Big Bear JavaScript plug-in development------(first quarter)

First, the opening analysis

Hi, everybody! Big Bear is coming again, today this series of articles is mainly to say how to develop based on "JavaScript" plug -in development, 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 the concept. I think we have

"JQuery plugin Way" Have a certain understanding, we combine this topic to discuss together, finally give the relevant implementation plan, to constantly improve their ability.

Second, go to the plugin topic

In general, the development of jquery plugins is divided into two types: a global function that hangs in the jquery namespace, or a static method.

The other is the jquery object-level approach, which is the method that hangs under the jquery prototype, so that the jquery object instance obtained by the selector can also share the method.

(1), class-level plug-in development

The most straightforward understanding of plug-in development at the class level is to add a class method to the "JQuery" class, which can be understood as adding a static method. 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 ways:

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

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

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

 1  $.extend ({ 2  hello:  3  //  Put your code here  4  },  5  World: function   () { 6  //  Put your code here  7   8 }); 

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

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

(2), object-level plug-in development

　Plug-in development at the object level requires two forms:

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

1 (function($) {   2    $.fn.extend ({   3          function(opts) {   4             //  put your codehere5         }   6    });    7 }) (JQuery);   

2.2 Add dynamic properties directly to the prototype chain.

1 (function($) {     2     function() {   3         //  put  your codehere4    };    5 }) (JQuery);    

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

You might use different namespaces to provide a variety of methods for your plugin, but adding too many namespaces can make your code confusing and robust. So the best solution is to define private functions and methods appropriately.

So we do this by combining self-executing functions with closures to simulate a private plug-in unit, just like in our example above.

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

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

　　

1 <div id= "BB" style= "width:220px;border:1px solid #ccc;" >2     <span></span>3     <4         style= "margin-top : 10px; 5         margin-bottom:30px; " 6     >8     </div>9 </div>            

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

{

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

　　

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

　　

1$(function(){2$ ("#bb"). Bigbear ();3 }) ;4(function($){5$.fn.bigbear =function(opts) {6opts =$.extend ({},$.fn.bigbear.defaults,opts);7         return  This. each (function(){8             varElem = $ ( This) ;9Elem.find ("span"). Text (opts["title")]) ;Ten$.get (opts["url"],function(data) { OneElem.find ("div"). Text (data["text")]) ; A             }) ; -         }) ; -     } ; the$.fn.bigbear.defaults = { -Title: "This is a simple test" , -URL: "Data.json" -     } ; +}) (JQuery);

　Operating effect:

　　

　　Summary:

(1) "$.fn.bigbear.defaults" provides default parameter options for plug-ins a well-scaled plug-in should allow the user to customize parameter options on demand and control the behavior of the plug-in, so it is necessary to provide a restore default option. You can set these options by using JQuery's Extend method.

(2), " return This.each () {...} "traversing multiple elements and returning jquery using the Sizzle selector engine, sizzle can provide a multivariate operation for your function (for example, for all class names with the same element). This is one of the best features of jquery, and even though you are not prepared to provide multi-factor support for your plugin during the development of the plugin, it is still a good way to prepare for it. In addition, jquery has a very good feature is the method can be cascaded, also known as chained calls, so we should not break this feature, always return an element in the method.

(iv), concluding

　　(1), JQuery for the development of plug-in arch two methods, respectively: JQuery.fn.extend (object); Adds a method to a 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) In this case the closure is equivalent to a private scope, external access to internal information, and there is no global variable pollution. The official creation development specification is interpreted as: a) avoid global dependencies; b) avoid third-party destruction; c) compatible with the jQuery operator ' $ ' and ' jquery '.

(3), providing default parameter options for plug-ins a well-scaled plug-in should allow the user to customize parameter options based on demand and control the behavior of the plug-in, so it is necessary to provide a restore default option. You can set these options by using the Extend method of jquery.

(4), traversing multiple elements and returning jquery using the Sizzle selector engine, sizzle can provide a multivariate operation for your function (for example, for all class names with the same element). This is one of the best features of jquery, and even if you are not prepared to provide multi-factor support for your plugin during the development of the plugin, preparing for it is still a good practice. In addition, jquery has a very good feature is the method can be cascaded, also known as chained calls, so we should not break this feature, always return an element in the method.

(5), a one-time code outside the main loop is important, but is often ignored. Simply put, if you have a piece of code that is a bunch of default values, you just need to be instantiated once, instead of having to instantiate every time you call your plug-in function, you should put this code outside the plugin method.

　　(6), everyone study to think about, if the project technology selection for these plug-ins are strongly dependent on the "jQuery" mechanism, we have previously written plug-ins will not be used (assuming that 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 ...

　　　　　　　　　　　　

hahaha, the end of this article, not to be continued, hope and we have enough communication, common progress ... To shout ...       (*^__^*)      

Big Bear JavaScript plug-in development------(first quarter)