jQuery plug-in definition

One: Introduction

　　Some WEB developers, will quote a jQuery library, then write about on the page

II: universal knowledge JQuery

Knowledge 1: When writing plug-ins with JQuery, the core of the following two methods:

$ .Extend (object) can be understood as JQuery add a static method.

$ .Fn.extend (object) will be understood that a method of adding JQuery instance.

The basic definition of call:

/ * $ .Extend definition and call 
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * / 
$ .extend ({fun1: function ( ) {alert ( " perform the method a");}}); 
$ .fun1 (); 
/ * $ .fn.extend definition calls 
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * / 
$ .fn.extend ({fun2: function () {Alert ( "execution method 2 ");}}); 
$ (the this) .fun2 (); 
// equivalent to 
$ .fn.fun3 = function () {alert (" three execution method ");} 
$ (the this) .fun3 ();

Knowledge 2: jQuery (function () {}); and (function ($) {}) (jQuery); difference:

the jQuery (function () {}); 
// corresponds 
$ (Document) .ready (function () {}); 
/ * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * / 
(function ($) {}) (the jQuery); 
// corresponds 
var Fn = function ($) {}; 
Fn (the jQuery);

jQuery (function () {}); the method is performed in the code of a DOM element loaded.

(Function ($) {}) (jQuery); defines an anonymous function, which represents the real parameter jQuery anonymous function. Often used in JQuery plug-in development, played a role in the private domain of definition of plug-ins.

Three: JQuery plug-in standards development structure

　　1, define the scope: the definition of a JQuery plugin, the code is first necessary to place this widget on a free from outside interference. If you want to define it is the private scope for this plug-in with some professional words. External code can not directly access the inside of the plug-in code. Internal plug-in code that does not pollute the global variable. In a certain role in the decoupling of the plug-reliance and operating environment. Having said that, how we should define the scope of a proprietary plug-in?

// step01 scope defined JQuery 
(function ($) { 

}) (the jQuery);

Do not underestimate this scope, as important as c # class keyword to define a class.

　　2, to extend a JQuery plugin: JQuery when a good definition of the scope, the most central and most urgent step is to add an extension method is an instance of this JQuery. First, we named this Jqury plug a method, called easySlider, when calling the plug-in, we can give this plugin pass some parameters via options. See specific method of defining the following code:

// step01 scope defined JQuery 
(function ($) { 
    // extension method step02 widget name 
    $ .fn.easySlider = function (Options) { 
        
    } 
}) (the jQuery);

Until now, in fact, a simple JQuery plugin has been completed. The call is made

　　3, set the default value: Define a JQuery plugin, just like the definition of a .net controls. A perfect plug-in, there should be more flexible properties. We look at this code: <asp: TextBox ID = "TextBox1" Width = "20" Height = "100" runat = "server"> </ asp: TextBox>. TextBox control has Width and Height properties, users with a TextBox, you can freely set the Height and Width controls may not set the value, because the control itself have default values. When ready to develop a JQuery plug that, when the user attribute is not specified, the default values should be defined in two steps to achieve such JQuery, see the following code step03-a, step03-b.

// step01 scope defined JQuery 
(function ($) { 
    // Default property step03-a widget 
    var = {Defaults 
        , PrevID,: 'prevBtn', 
        prevText: 'the Previous', 
        nextId:' nextBtn ', 
        nextText:' the Next ' 
        // ...... 
    }; 
    extension method // step02 widget name 
    $ .fn.easySlider = function (Options) { 
        // step03 B-merge user-defined attributes, default attributes 
        var options = $ .extend (defaults, options) ; 
    } 
}) (the jQuery);

　　Do people like innovation program, change the amount of change in the name of the country, for a line Yeah these. When you see a var defaults = {} to indicate a default attribute, when JQuery to write their own plug-ins to think different, so use var default01 = {}, var default02 = {} to indicate the default properties. Then the default attribute names varied, from bad to worse. It is recommended that when writing JQuery plugin, when you define the default attributes, variables are used to represent the default property defaults, such code more readable.

　　Some people see this line of code: var options = $ .extend (defaults, options), frowned, offing. Then we first look at the following code:

var obj01 = { name: "英文名：Sam Xiao", age: 29, girlfriend: { name: "Yang", age: 29} }
var obj02 = { name: "中文名：XiaoJian", girlfriend: { name: "YY"} };

var a = $.extend(obj01, obj02);
var b = $.extend(true, obj01, obj02);
var c = $.extend({}, obj01, obj02);
var d = $.extend(true,{}, obj01, obj02);

Copy the code into the development environment, look respectively a, b, c, d of the value, will understand options = $ .extend (defaults, options ) the meaning of var. Represent options to cover the value of defaults, and the value assigned to the options.
Plug in the environment, it means that the value set by the user, overriding the default plug-in; if the user does not set the default value of the property, or leave the default plug-ins.

　　4, support JQuery selector: JQuery selector, is an outstanding characteristic of JQuery, if we do not support plug-ins to write JQuery selector, it is indeed a big regret. Make your own such as a JQuery plugin supports multiple selectors, our code should be defined like this:

// step01 scope defined JQuery 
(function ($) { 
    // Default property step03-a widget 
    var = {Defaults 
        , PrevID,: 'prevBtn', 
        prevText: 'the Previous', 
        nextId:' nextBtn ', 
        nextText:' the Next ' 
        // ...... 
    }; 
    extension method // step02 widget name 
    $ .fn.easySlider = function (Options) { 
        // step03 B-merge user-defined attributes, default attributes 
        var options = $ .extend (defaults, options) ; 
        // Step4 support JQuery selector 
        this.each (function () { 

        }); 
    } 
}) (the jQuery);

5, support JQuery link call: code above seemingly perfect, in fact, not so perfect. So far does not support link call. In order to achieve the effect of link call each element must put the cycle of return

// step01 scope defined JQuery 
(function ($) { 
    // Default property step03-a widget 
    var = {Defaults 
        , PrevID,: 'prevBtn', 
        prevText: 'the Previous', 
        nextId:' nextBtn ', 
        nextText:' the Next ' 
        // ...... 
    }; 
    extension method // step02 widget name 
    $ .fn.easySlider = function (Options) { 
        // step03 B-merge user-defined attributes, default attributes 
        var options = $ .extend (defaults, options) ; 
        // Step4 support JQuery selector 
        // step5 support chained calls 
        return this.each (function () { 

        }); 
    } 
}) (the jQuery);

Such a definition to support link call. Such as support such calls: $ ( "div.") EasySlider ({prevId: "", prevText: ""}).. Css ({ "border-width": "1", "border-color": "red "," border-bottom-style ":" dotted "});

6, the plug-in approach: often realize the function of a plug-in requires a lot of code, there may be hundreds of lines, thousands of lines, or even thousands of lines. We see this code is structured, have the aid of function. In the first point it has been said, in the method defined in the plug-in, the outside world can not be called directly, the way I defined in the plug-in does not pollute the environment. Now how about trying to define some of the ways in plug-in:

// step01 scope defined JQuery 
(function ($) { 
    // Default property step03-a widget 
    var = {Defaults 
        , PrevID,: 'prevBtn', 
        prevText: 'the Previous', 
        nextId:' nextBtn ', 
        nextText:' the Next ' 
        // ...... 
    }; 
    // A-step06 method defined in the plugin 
    var ShowLink = function (obj) { 
        $ (obj) .append (function () {return "(" + $ (obj) .attr ( "the href ") +") "}); 
    } 

    // extension method step02 widget name 
    $ .fn.easySlider = function (Options) { 
        // step03 B-merge user-defined attributes, default attributes 
        var options = $ .extend (defaults , Options); 
        // step4 support JQuery selector to  
        // step5 support chained calls
        return this.each(function () {
            // step06-b defined in the plug-in method 
            ShowLink (the this); 
        }); 
    } 
}) (the jQuery);

Step step06-a: in the Plug-in defines a method called showLink (); This method is not called directly outside of the plug, C # class is a bit like a private method can only meet internal plug-ins. Step step06-b demonstrates how to call an internal plug-ins.

jQuery plug-in definition

Guess you like