JavaScript plug-in development tutorial (1)_javascript skills

1, opening analysis

Hi everyone! Today's series of articles mainly talks about how to develop plug-in development based on "JavaScript". I think many people are familiar with the word "plug-in",

Some people may call it "component" or "component". This is not important. The key is how to design and how to make a comprehensive consideration. This is the key concept of this article. I think everyone is right

I have a certain understanding of "jQuery plug-in method". Let's discuss this topic together and finally give relevant implementation plans to continuously improve our abilities.

Second, enter the main topic of the plug-in

Generally speaking, the development of jQuery plug-ins is divided into two types: one is the global function hanging in the jQuery namespace, which can also be called a static method.

The other is the jQuery object level method, that is, the method hung under the jQuery prototype, so that the jQuery object instance obtained through the selector can also share this method.

(1), class-level plug-in development

The most direct understanding of class-level plug-in development is to add class methods to the "jQuery" class, which can be understood as adding static methods. A typical example is the "$.ajax()" function, which defines the function in the jQuery namespace. Plug-in development at the class level can be extended in the following forms:

1.1 Add a global function, we only need to define it as follows, look at the code:

Copy code The code is as follows:

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

1.2 Add multiple global functions, which can be defined as follows:

Copy code The code is as follows:

$.extend({
Hello: function(name){
              // put your code here
} ,
world : function(){
              // put your code here
}
}) ;

Description: "$.extend(target, [object1], [objectN])" (This method is mainly used to merge the contents (properties) of two or more objects into the first object and return the merged The first object.

If the method has only one parameter target, this parameter will expand the jQuery namespace, that is, it will be hung under the jQuery global object as a static method).

(2), object-level plug-in development

Object-level plug-in development requires the following two forms:

2.1 Use "$.fn.extend()" to dynamically mount related attributes as the prototype.

Copy code The code is as follows:

(function($){
$.fn.extend({
pluginName : function(opts){
                      // put your code here
                                                                            }) ;
})(jQuery) ;

　2.2 Directly add dynamic properties to the prototype chain.

Copy code The code is as follows:

(function($) {  

$.fn.pluginName = function(){
// put your code here
} ;  
})(jQuery) ;

Explain: the two are equivalent. For a jQuery plug-in, a basic function can work well, but for a more complex plug-in, a variety of methods and private functions need to be provided.

You may use different namespaces to provide various methods for your plug-in, but adding too many namespaces will make the code confusing and less robust. So the best solution is to define private functions and methods appropriately.

So we implement a simulated private plug-in unit through a combination of self-executing functions and closures, just like in our example above.

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

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

Copy code The code is as follows:

       style="margin-top:10px;
        margin-bottom:30px;"
>8

                                                 

(2), "data.json" is defined as follows:

Copy code The code is as follows:

​{
"text" : "Hello, Big Bear {{bb}}!" ;
}

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

Copy code The code is 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:

To summarize :

(1) "$.fn.bigbear.defaults" provides the default parameter options of the plug-in. A plug-in with good scalability should allow users to customize parameter options according to needs and control the behavior of the plug-in, so it provides the ability to restore the default Options are necessary. You can set these options through jQuery's extend method.

　(2), "return this.each(){...}" traverses multiple elements and returns jQuery using the Sizzle selector engine. Sizzle can provide multi-element operations for your function (for example, all class names have the same elements). This is one of the few great features of jQuery, and even if you’re not going to provide multi-element support for your plugin, it’s still a good way to prepare for it. In addition, jQuery has a very good feature that it can perform method cascading, which can also be called chain call, so we should not destroy this feature and always return an element in the method.

(4), final summary

(1), jQuery provides two methods for developing plug-ins, namely: jQuery.fn.extend(object); Add methods to jQuery objects.
jQuery.extend(object); To extend the jQuery class itself. Add new methods to the class.

(2), put all the code in a closure (an immediate execution function). At this time, the closure is equivalent to a private scope, the internal information cannot be accessed by the outside, and there will be no pollution of global variables. The official explanation of the creation and development specifications is: a) avoid global dependencies; b) avoid third-party damage; c) be compatible with jQuery operators '$' and 'jQuery '.

(3) Provide default parameter options for the plug-in. A plug-in with good scalability should allow users to customize parameter options according to their needs and control the behavior of the plug-in, so it is necessary to provide a restore default option. You can set these options through jQuery’s extend method

　(4), traverse multiple elements and return jQuery to use the Sizzle selector engine. Sizzle can provide multi-element operations for your function (for example, all elements with the same class name). This is one of the few great features of jQuery, and even if you are not going to provide multi-element support for your plugin, it is still a good practice to prepare for it during plugin development. In addition, jQuery has a very good feature that it can perform method cascading, which can also be called chain call, so we should not destroy this feature and always return an element in the method.

(5). It is important to place 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 default values ​​and only needs to be instantiated once, rather than every time your plug-in function is called, you should put this code outside the plug-in method.

(6), after everyone has studied, think about it. If the project technology selection changes and these plug-ins are strongly dependent on the "jQuery" mechanism, the plug-ins we wrote before will not be able to be used (assuming that jQuery is not used), what should we do? Refactor that?

Tomorrow’s article will talk about this issue and reconstruct the key logic of the plug-in, so stay tuned. . .