We’ll take a moment here to cover some conventions used for naming functions and variables.
Earlier, we introduced a function in the prototype named _generate(). This function is used as an area to create the actual plugin elements. So for example, with a tooltip, we might simply create a div here.
_generate () {
this.$tooltip = $('<div></div>'),
$('body').append(this.$tooltip);
}
We are creating a reference to our tooltip object here since we’ll need to show/hide it later on when we write our .hover() code.
Note this function could be called anything, e.g., _create() or _make() or whatever makes sense to you. The point here is it’s an area used discretely to create the visual components of your plugin.
Finally, for our tooltip example, we’ll .append() it to the body of our page, thereby making it visible and active.
It’s also a good idea to provide a destroy() method that can be called to quickly send your plugin into oblivion.
destroy: function () {
this.$tooltip.remove();
$.removeData(this.$el, 'wTooltip'),
}
We’ll cover exactly how to call this method later in the guide.
Although quite rare, sometimes we may want to keep track of the initialization of the plugin on each element. Such a situation may occur if your plugin is interacting with a back-end server.
Let’s say we have a setColor() method that updates the plugin’s color somewhere, but then also sends a call to the server to update some property.
_generate: function () {
this.$tooltip = $('<div></div>'),
this.setColor('red'),
this.init = true;
$('body').append(this.$tooltip);
},
setColor: function (color) {
this.$tooltip.css('color', color);
if (this.init) {
// Update on back end.
}
}
The problem occurs when we are preloading our plugin on load. At this point, we probably don’t want to call the server because the action was not initiated by the user.
You will notice we create some variables preceded with a $ such as $el or $tooltip. This is not so much related to plugin development, but rather good practice when working with jQuery.
Whenever we are referring to a jQuery element, we will precede it with $ just to let us know this is a jQuery object we can operate on.
this.$el = $(el);
this.init = false;
Our plugin will contain many functions both private and public. In JavaScript, there is no real concept of private functions since they can all be accessed one way or another.
To give the idea that a function is private and should not be publicly available, we will just precede it with an underscore character (_). You will see we have already done this with our _generate() function above. Otherwise, functions such as setColor() in the example above are public, as we can call them to alter the plugin’s state at any time.
Often in our plugins, we will need to pass a reference to our plugin object this to another function scope with a different, local this. You probably will have seen a declaration like this before, which creates a reference to the this object under a different name, thereby making it accessible in other function scopes.
Some more common styles are below:
var _this = this;
var $this = this;
var that = this;
var _self = this;
It really doesn’t matter which one you go with. However, I prefer to use _this although using _self is also quite popular.
The example below will illustrate the point:
_generate: function () {
var _this = this;
function elMousemove (e) {
_this.$tooltip.css({left: e.pageX, top: e.pageY});
}
this.$tooltip = $('<div></div>'),
this.$el.mousemove(elMousemove);
$('body').append(this.$tooltip);
}
If we were to use the this object in the elMousemove() function, we would actually be referring to the $el element instead of the actual plugin this object.
If you dislike having to declare _this = this all over the place, there is a workaround using jQuery’s $.proxy() function. Essentially, it does the same thing — passing any object you like as the this for your function.
_generate: function () {
function elMousemove (e) {
this.$tooltip.css({left: e.pageX, top: e.pageY});
}
this.$tooltip = $('<div></div>'),
this.$el.mousemove($.proxy(elMousemove, this));
$('body').append(this.$tooltip);
}
We could even pass in this.$tooltip all together if we liked.
this.$el.mousemove($.proxy(elMousemove, this.$tooltip));
Whichever approach you decide to take, make sure you are consistent. Otherwise, it can lead to a lot of confusion.
I personally recommend setting var _this = this. It’s not expensive, as it’s just a reference to the object and probably will result in less code than using multiple $.proxy statements everywhere. However, it is available should you need it.
We almost have a working plugin and have covered how to keep your plugin code consistent. This sets the groundwork for starting to fully build out our plugins.