jquery Plugin Authoring

If you look at this article, I'm sure you will no doubt think of jquery as a simple library to use. jquery may be easy to use, but it still has some strange places, and people unfamiliar with its basic functions and concepts may be difficult to grasp. But don't worry, I've already divided the code into a small section and made a simple guide. Those grammars may seem overly complex, but if you go into its thoughts and patterns, it's very straightforward.
Below, we have a basic level of plug-ins:

Shawn Khameneh
Extraordinarythoughts.com

(function ($) {
var privatefunction = function () {
The code runs here
}

var methods = {
Init:function (options) {
Return This.each (function () {
var $this = $ (this);
var settings = $this. Data (' Pluginname ');

if (typeof (settings) = = ' undefined ') {

var defaults = {
PropertyName: ' Value ',
Onsomeevent:function () {}
}

Settings = $.extend ({}, defaults, options);

$this. Data (' Pluginname ', settings);
} else {
Settings = $.extend ({}, settings, options);
}

The code runs here

});
},
Destroy:function (options) {
return $ (this). each (function () {
var $this = $ (this);

$this. Removedata (' Pluginname ');
});
},
Val:function (options) {
var somevalue = this.eq (0). html ();

return somevalue;
}
};

$.fn.pluginname = function () {
var method = Arguments[0];

if (Methods[method]) {
method = Methods[method];
arguments = Array.prototype.slice.call (arguments, 1);
else if (typeof (method) = = ' object ' | |!method) {
method = Methods.init;
} else {
$.error (' method ' + method + ' does not exist on Jquery.pluginname ');
return this;
}

Return method.apply (this, arguments);

}

}) (JQuery);
You may notice that the structure of the code I mentioned is quite different from the other plug-in code. Depending on your usage and requirements, the way plug-ins are developed may also be diversified. My goal is to clarify some of the concepts in the code, enough for you to find a way to understand and develop a jquery plugin.


Now, let's dissect our code.

Container: An instant execution function
Essentially, the code for each plug-in is included in an instant-executing function, as follows:

(Function (arg1, arg2) {
Code
}) (Arg1, arg2);
An instant execution function, as its name suggests, is a function. What makes it unique is that it is contained within a pair of parentheses, which makes all the code run in the local scope of the anonymous function. This is not to say that the DOM (global variable) is masked within the function, but that the public variables and object namespaces inside the function cannot be accessed externally. This is a good start, so when you declare your variables and objects, you don't have to worry about conflicting variable names and existing code.

Now, because all of the public variables inside the function are inaccessible, it becomes a problem to use the jquery itself as an internal public variable. Just like normal functions, instant functions also pass in object arguments based on references. We can pass the jquery object into the function as follows:

(function ($) {

Use $ in local scope to refer to jquery
}) (JQuery);
We passed in a function in which the public variable "JQuery" was passed into an instant execution, and we could refer to it by "$" in the function local (container). In other words, we call the container as a function, and the parameter of the function is jquery. Because we refer to "JQuery" as a public variable, rather than its abbreviated "$", so that we can be compatible with the prototype library. If you don't have to prototype or other libraries that use "$" as a shorthand, you won't have any impact, but knowing this usage is still a good thing.

Plugins: a function
A jQuery plugin is essentially a huge function that we cram into the jquery namespace, and of course we can easily use "jquery.pluginname=function" to achieve our goal, But if we do this, the code for our plug-in is in an unprotected state of exposure. "Jquery.fn" is shorthand for "jquery.prototype", meaning that when we get our plugin through the JQuery namespace, it's only writable (not modifiable). It can actually do something for you. It allows you to properly organize your own code and to understand how to protect your code from changes that are not required by the runtime. The best thing to say is that it's a good practice.

With a plugin, we get a basic jquery function:

(function ($) {

$.fn.pluginname = function (options) {

The code runs here

return this;
}

}) (JQuery);
The functions in the above code can be invoked like other jquery functions through "$ (' #element '). Pluginname ()". Notice how I added the "return this" statement, which was wrapped by a jquery object by returning a reference to a collection of original elements (contained in this) to produce the effect of a chained call. You should also note that "This" is a jquery object in this particular scope, equivalent to "$ (' #element ')."