Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Lessons:28Length:1.7 hours
  • Overview
  • Transcript

4.4 Useful Snippets

At this point, we know how to do a lot with snippets, so let's bring all that together and let's create something that's pretty powerful. One thing I find myself doing quite often in JavaScript is using the module pattern. We'll start a file by using an IIFE, and then we'll create something to store our module in. So, we'll create a Person module. And the way the module pattern works is, we want to invoke this function and store its results into this Person variable. And the result of this function is actually going to be a function. This resulting function will share the same name, in this case Person. Then also, we have to set the prototype for this Person. Now finally, we can return the function Person. The way this works is, is I can create a Person object. And the benefit of this is that I encapsulate all my Person functionality inside of this module. Now if I want to create another module, in this case we'll call it Animal, it's really done the same way. After I create the IIFE I need to create the function with the same name. Then also again I have to set the prototype and lastly return the Animal. So I think you can see where we're going with this. It would be really beneficial to have a snippet that allows us to template out the name of the module. We will go and add this in our snippets.cson file. Below addEventListener we will add one for the module pattern. We will set the prefix to be modpat. We'll remember to use the triple quotes for the body and then we'll go and we'll use one of these existing modules to template off of. Now rather than using Animal, we'll select all of these with cmd-opt-g and we can change these to a template. Having $1 right here will allow us to use multiple cursors, and name the template in every single spot. And we'll make sure to get rid of this colon right here or our snippet won't execute. So now we'll save, and we'll go execute our snippet. We'll get rid of our existing modules. Now we'll call modpat and then hit tab. And from here, I can now say Person. And just as easily we can come down here and create the module for Animal. And this is a really awesome reproducible way to create this module pattern. However, what would be a lot easier is if we actually gave it a default name. So to do that, we're gonna select this dollar sign in every place and I wanna say, $, and we'll provide the curly braces. We'll say this is the first template variable and then provide the default name. And in this case we'll just say module. And then also to help the control flow, we'll provide a second template variable inside of the constructor function. So let's execute this one more time, we'll get rid of our existing modules again, we'll type in modpat. And now we see we have the default name. And if for some reason we wanted to keep this name, we hit tab again, and now we're inside of the constructor function. So we just created a really useful snippet. Personally, I actually do use this snippet all the time. The idea behind snippets is to encapsulate and speed up tasks like this. Which are really tedious, prone to error, and can slow you down. As you go about your development workflow, look at all the common tasks you do and just ask yourself, can I put this in a snippet?

Back to the top