Jquery plugin development and jquery plugin

Jquery plugin development and jquery plugin

This Saturday, I had a good time playing lol this morning. Let's take a moment to talk about jquery plug-in development. Hope you can advise me!

In the process of software development, a certain design pattern is required to guide development. With the pattern, we can better organize our code and learn better practices from previous human experience.
According to the description in jQuery advanced programming, there are three important jQuery plug-in development methods:

We usually use the second method for Simple plug-in development, which is relative to the third method. The third method is used to develop more advanced jQuery components. The components developed in this mode have many built-in jQuery features, such as the automatic saving of the status information of the plug-in, various plug-in methods are very detailed.
The first method is too simple, just adding a static method in the jQuery namespace or you can understand it. Therefore, when calling the method added through $. extend (), we call $. myFunction () directly through the $ symbol without selecting the DOM element $ (). myFunction ().

Method 1, $. extend ()

// Define the plug-in $. extend ({goTop: function () {$ ('html, body '). animate ({scrollTop: 0}, 500) ;}); // call $ ('. gotop '). click (function () {$. goTop ();});

In the above Code, a goTop method is added to jQuery through the $. extend () method, and then called directly through $. A simple jQuery plug-in has been completed.
As you can see, it is convenient to define methods of Some helper classes through this method. After being defined once, jQuery can call it wherever necessary in the program.

Method 2, $. fn

The first method does not support jQuery's powerful selector. To process DOM elements and apply the developed plug-in to the selected elements, you still need to use the second method. Most of the plug-ins I have seen and used are also created using the $. fn method, at least currently.

Syntax example of the second method:

$. Fn. mypluginName = function () {// code content}

Add a method to $. fn, whose name is the name of our plug-in, and then expand our plug-in code in this method.
For example, if the background color of an element on the page is changed to red, it is written:

// Define the plug-in $. fn. pluginBg = function () {this.css ('backgroundcolor', 'red'); // here, this indicates the element selected by jQuery, that is, this = $ (element ), this usage is not described here.} // call $ (elment ). pluginBg ();

Parameter passing plug-in

A strong plug-in can be customized by users at will, which requires us to consider more comprehensively in developing plug-ins and provide appropriate parameters as much as possible. Generally, the extend method of jQuery is used to receive the parameters of the processing plug-in. As mentioned above, but that is to pass a single object to the extend method, this object will be merged to jQuery, so we can call the methods included in the new merged object on jQuery. When multiple objects are passed to the extend method, it merges all parameter objects into the first one. At the same time, if an object has an attribute of the same name, the attributes that follow the merging will overwrite the previous one. With this, we can define an object in the plug-in that saves the default values of the plug-in parameters, and merge the received parameter objects into the default objects, finally, you can specify the value for the parameter and use the default value of the plug-in when no parameter is specified.

For example, you can set the color when calling the plug-in. The Code is as follows:

// Define the plug-in $. fn. pluginStyle = function (opt) {var defaults = {'color': 'red',}; var settings = $. extend (defaults, opt); return this.css ({'color': settings. color,})} // If the parameter is not called, the color is set to the default value red $ (elm ). pluginStyle (); // If the parameter is called, the color is set to blue $ (elm ). pluginStyle ({'color': 'blue '});

After receiving and processing parameters, the plug-in can write more flexible plug-ins.

Object-oriented plug-in

　　Q:

If you want to write a complex plug-in, the amount of code will be large, and how to organize the code becomes a problem to be faced. Without a good way to organize the code, the overall feeling will be messy, at the same time, it is difficult to maintain. What should I do?

　　A:

We wrap all the attributes of the plug-in into an object and use object-oriented thinking for development. Then, everything will be solved!

Let's beautify the above example. The Code is as follows:

// Define the Nick Object Construction Method var Nick = function (ele, opt) {this. $ element = ele, this. ults = {'color': 'red'}, this. options = $. extend (this. defaults, opt);} // defines the object method Nick. prototype = {handsome: function () {return this.$element.css ({'color': this. options. color}) ;}// use the object $ in the plug-in. fn. myPlugin = function (options) {// create an object var me = new Nick (this, options); // call the return me method. handsome ();} // If the parameter is not called, the color is set to the default value red $ (elm ). pluginStyle (); // If the parameter is called, the color is set to blue $ (elm ). pluginStyle ({'color': 'blue '});

I feel perfect when writing it here, but when I prepare to release it after dinner, I will look at it-Oh! There seems to be room for improvement!

The use of anonymous Functions

Not only is the development of jQuery plug-ins, we should be careful not to pollute the global namespace when writing any JS Code, because as the amount of Code increases, if you intentionally define some variables in the global scope, it will be difficult to maintain them at last, and it will conflict with the code written by others.
A good practice is to always use self-called anonymous functions to wrap your code, so that you can use it completely securely and securely anywhere, without any conflict.
In Javascript, you cannot use curly brackets to easily create scopes, but a function can form a scope. The code in the domain cannot be accessed by the outside world, if we put our code into the function, it will not pollute the global namespace, nor conflict with other code. So we wrap all the code with self-called anonymous functions.
Finally, wrap the above plug-in code with an anonymous function!

At the end of the day, let's say that-Hope you will inspire me!