JavaScript Plug-in development tutorial (i) _javascript skills

First, the opening analysis

Hi, everybody! Today this series is mainly about how to develop plug-in development based on "JavaScript", and I think a lot of people are not unfamiliar with the word "plugin",

Some people may be called "components" or "parts", this is not important, the key is to see how to design, how to do a full range of considerations, this is the focus of this article elaborated on the concept. I think everyone is right

"jquery plug-in Mode" has a certain understanding, we combine this topic together to discuss, and finally give the relevant implementation plan, to continuously improve their own who ability.

Second, enter the plug-in business

In general, the development of jquery Plug-ins is divided into two types: one is a global function that hangs under the jquery namespace, or it can be called a static method.

Another is the jquery object-level approach, a method that hangs under the jquery prototype, so that the jquery object instance obtained through the selector can also share the method.

(1), class-level plug-in development

The most straightforward understanding of class-level plug-in development is to add a class method to the "JQuery" class, which can be understood as adding static methods. A typical example is the "$.ajax ()" function, which defines a function in the namespace of jquery. Plug-in development for class level can be extended in the following ways:

1.1 To add a global function, we just need to define the following to see the code:

Copy Code code as follows:

$.hello = function () {
Alert ("Hello, Big Bear!") ") ;
} ;

1.2 Add more than one global function, you can use the following definition:

Copy Code code as follows:

$.extend ({
Hello:function (name) {
Put your code here
} ,
World:function () {
Put your code here
}
}) ;

Description: "$.extend (target, [Object1], [objectn])" (this method is used primarily to merge the contents (properties) of two or more objects to the first object and return the merged first object.

If the method has only one parameter target, the parameter expands the jquery namespace, which is hung as a static method under the JQuery global object.

(2), object-level plug-in development

Object-level plug-in development requires two forms as follows:

2.1 Dynamically mount the related properties for the prototype through "$.fn.extend ()".

Copy Code code as follows:

(function ($) {
$.fn.extend ({
Pluginname:function (opts) {
Put your code here
}
}) ;
}) (JQuery);

2.2 Add dynamic attributes directly to the prototype chain.

Copy Code code as follows:

(function ($) {
$.fn.pluginname = function () {
Put your code here
} ;
}) (JQuery);

To illustrate: The two are equivalent, for a jquery plug-in, a basic function can work well, but for more complex plug-ins need to provide a variety of methods and private functions.

You may use different namespaces to provide a variety of methods for your plug-in, but adding too many namespaces can make your code messy and robust. So the best solution is to properly define private functions and methods.

So we implemented the simulation of the private plug-in unit through the combination of the self execution function and the closure, just as we did in the above example.

(c), here is a simple example to see the implementation process:

(1), "HTML" fragment code, as follows:

Copy Code code as follows:

<div id= "BB" style= "width:220px;border:1px solid #ccc;" >
<span></span>
<div
Style= "margin-top:10px;
margin-bottom:30px; "
>8 </div>
</div>

(2) The definition of "Data.json" is as follows:

Copy Code code as follows:

{
"Text": "Hello, Big Bear June {BB}}!" " ;
}

(3), "Bb.js" code is as follows:

Copy Code code as follows:

$ (function () {
$ ("#bb"). Bigbear ();
}) ;
(function ($) {
$.fn.bigbear = function (opts) {
opts = $.extend ({},$.fn.bigbear.defaults,opts);
Return This.each (function () {
var Elem = $ (this);
Elem.find ("span"). Text (opts["title"));
$.get (opts["url"],function (data) {
Elem.find ("div"). Text (data["text"]);
}) ;
}) ;
} ;
$.fn.bigbear.defaults = {
Title: "This is a simple test,"
URL: "Data.json"
} ;
}) (JQuery);

Operation Effect:

Summary :

(1) "$.fn.bigbear.defaults" provides the default parameter options for plug-ins an extensible plug-in should allow users to customize parameter options based on requirements and control the behavior of plug-ins, so it is necessary to provide a restore default option. You can set these options by using the Extend method of jquery.

(2), "return This.each () {...}" Iterate over multiple elements and return jquery using the Sizzle selector engine, sizzle can provide you with a multivariate operation for your function (for example, the same element for all class names). This is one of several excellent features of jquery, and even though you are not prepared to provide multiple element support for your plug-in during the development of Plug-ins, it is still a good way to prepare for this. In addition, a good feature of jquery is that it can be cascaded or chained, so we should not break this feature and always return an element in the method.

(iv) The final summary

(1) JQuery has two methods for developing Plug-ins, respectively: JQuery.fn.extend (object); Add a method to the jquery object.
Jquery.extend (object); To extend the jquery class itself. Adds a new method to the class.

(2), put all the code in the closure (an instant execution function) when the closure is equivalent to a private scope, external access to the internal information, and there will be no global variable pollution. The official creation of the development specification is interpreted as: a) avoid global dependencies; b avoid third party damage; c) compatible with jquery operator ' $ ' and ' jquery '.

(3) Providing default parameter options for plug-ins an extensible plug-in should allow users to customize parameter options based on requirements and control the behavior of plug-ins, so it is necessary to provide a restore default option. You can set these options through jquery's Extend method

(4), traversing multiple elements and returning jquery using the Sizzle selector engine, sizzle can provide you with a multivariate operation for your function (for example, the same element for all class names). This is one of several excellent features of jquery, and even though you are not prepared to provide multiple element support for your plug-in during the development of Plug-ins, it is still a good practice to prepare for this. In addition, a good feature of jquery is that it can be cascaded or chained, so we should not break this feature and always return an element in the method.

(5) It is important to place a one-time code outside the main loop, but it is often ignored. Simply put, if you have a piece of code that is a bunch of defaults, you just have to instantiate it once instead of having to instantiate every time you invoke your plug-in function, you should put the code outside of the plug-in method.

(6), we learn to think about it, if the project technology selection for these plug-ins are strong reliance on "jQuery" mechanism, we previously wrote Plug-ins will not be used (assuming the situation without jQuery), how to do refactoring that?

Tomorrow's article will say this question, and will refactor the key logic of the plug-in, please look forward to ...