jQuery外掛開發標準寫法

前言　　

如今做web開發，jquery 幾乎是必不可少的，就連vs神器在2010版本開始將Jquery 及ui 內置web項目裡了。至於使用jquery好處這裡就不再贅述了，用過的都知道。今天我們來討論下jquery的插件機制，jquery有著成千上萬的第三方插件，有時我們寫好了一個獨立的功能，也想將其與jquery結合起來，可以用jquery鍊式調用，這就要擴充jquery，寫成插件形式了，如下面就是一個簡單擴充Jquery物件的demo：

        //sample:扩展jquery对象的方法，bold()用于加粗字体。
        (function ($) {
            $.fn.extend({
                "bold": function () {                    ///<summary>
                    /// 加粗字体
                    ///</summary>
                    return this.css({ fontWeight: "bold" });
                }
            });
        })(jQuery);

呼叫方式：

##這是一個非常簡單的擴展。接下來我們一步一步來解析上面的程式碼。

一、jquery的插件機制

為了方便使用者建立插件，jquery提供了jQuery.extend()和jQuery.fn.extend()方法。

1. jQuery.extend() 方法有一個重載。

　 jQuery.extend(object) ,一個參數的用於擴展jQuery類別本身，也就是用來在jQuery類別/命名空間上增加新函數，或者叫靜態方法，例如jQuery內建的ajax方法都是用jQuery.ajax()這樣呼叫的，有點像「類別名稱.方法名稱」 靜態方法的呼叫方式。下面我們也來寫個jQuery.extend(object)的範例：

#

        //扩展jQuery对象本身
        jQuery.extend({
            "minValue": function (a, b) {                ///<summary>
                /// 比较两个值，返回最小值
                ///</summary>
                return a < b ? a : b;
            },
            "maxValue": function (a, b) {                ///<summary>
                /// 比较两个值，返回最大值
                ///</summary>
                return a > b ? a : b;
            }
        });        //调用
        var i = 100; j = 101;        var min_v = $.minValue(i, j); // min_v 等于 100
        var max_v = $.maxValue(i, j); // max_v 等于 101

重載版本： jQuery.extend([deep], target, object1, [objectN])

   用一個或多個其他對象來擴展一個對象，返回被擴展的物件。

   如果不指定target，則為jQuery命名空間本身進行擴充。這有助於外掛程式作者為jQuery增加新方法。
   如果第一個參數設為true，則jQuery傳回一個深層的副本，遞歸地複製找到的任何物件。否則的話，副本會與原始物件共用結構。
   未定義的屬性將不會被複製，然而從物件的原型繼承的屬性將會被複製。
參數

   deep:       可選。如果設為true，則遞迴合併。
   target:     則待修改物件。
   object1:   待合併到第一個物件的物件。
   objectN:   可選。待合併到第一個物件的物件。
範例1：合併 settings 和 options，修改並傳回 settings。

var settings = { validate: false, limit: 5, name: "foo" }; 
var options = { validate: true, name: "bar" }; 
jQuery.extend(settings, options);

結果：<br/>

settings == { validate: true, limit: 5, name: "bar" }

範例2：合併defaults 和options , 不修改defaults。 <br/><br/>

var empty = {}; 
var defaults = { validate: false, limit: 5, name: "foo" }; 
var options = { validate: true, name: "bar" }; 
var settings = jQuery.extend(empty, defaults, options);
结果：
settings == { validate: true, limit: 5, name: "bar" } 
empty == { validate: true, limit: 5, name: "bar" }

這個重載的方法，我們一般用來在寫外掛時用自訂外掛參數去覆寫插件的預設參數。 <br/><br/>

jQuery.fn.extend(object)擴充 jQuery 元素集來提供新的方法（通常用來製作外掛程式）。

首先我們來看fn 是什麼東西呢。查看jQuery程式碼，就不難發現。

jQuery.fn = jQuery.prototype = {

　　　init: function( selector, context ) {.....};

};<br/>

原來jQuery .fn = jQuery.prototype，也就是jQuery物件的原型。那jQuery.fn.extend()方法就是擴展jQuery物件的原型方法。我們知道擴展原型上的方法，就相當於為物件添加」成員方法“，類別的”成員方法“要類別的物件才能調用，所以使用jQuery.fn.extend(object)擴展的方法， jQuery類別的實例可以使用這個「成員函數」。 jQuery.fn.extend(object)和jQuery.extend(object)方法一定要區分開來。

二、

自執行的匿名函數/閉包#

1. 什么是自执行的匿名函数? <br/>　　 它是指形如这样的函数: (function {// code})();<br/> 2. 疑问 为什么(function {// code})();可以被执行, 而function {// code}();却会报错?<br/> 3. 分析 <br/> (1). 首先, 要清楚两者的区别: (function {// code})是表达式, function {// code}是函数声明. <br/> (2). 其次, js"预编译"的特点: js在"预编译"阶段, 会解释函数声明, 但却会忽略表式. <br/> (3). 当js执行到function() {//code}();时, 由于function() {//code}在"预编译"阶段已经被解释过, js会跳过function(){//code}, 试图去执行();, 故会报错; <br/> 当js执行到(function {// code})();时, 由于(function {// code})是表达式, js会去对它求解得到返回值, 由于返回值是一 个函数, 故而遇到();时, 便会被执行.

另外， 函数转换为表达式的方法并不一定要靠分组操作符()，我们还可以用void操作符，~操作符，!操作符……<br/><br/> 例如：<br/> bootstrap 框架中的插件写法：<br/> !function($){<br/>　　//do something;<br/> }(jQuery);

和 <br/> (function($){<br/>　　//do something;<br/> })(jQuery); 是一回事。<br/><br/>匿名函数最大的用途是创建闭包（这是JavaScript语言的特性之一），并且还可以构建命名空间，以减少全局变量的使用。<br/>例如：<br/> var a=1;<br/> (function()(){<br/>　　　　var a=100;<br/>　　})();<br/> alert(a); //弹出 1<br/>更多 闭包和匿名函数 可查看 Javascript的匿名函数与自执行 这篇文章。

三、一步一步封装JQuery插件

接下来我们一起来写个高亮的jqury插件<br/>1.定一个闭包区域，防止插件"污染"

<br/>

//闭包限定命名空间(function ($) {
    
})(window.jQuery);

<br/>

2.jQuery.fn.extend(object)扩展jquery 方法，制作插件

<br/>

<br/>

//闭包限定命名空间(function ($) {
    $.fn.extend({
        "highLight":function(options){            //do something
        }
    });
})(window.jQuery);

3.给插件默认参数，实现 插件的功能<br/>

//闭包限定命名空间(function ($) {
    $.fn.extend({
        "highLight": function (options) {            var opts = $.extend({}, defaluts, options); //使用jQuery.extend 覆盖插件默认参数
            this.each(function () {  //这里的this 就是 jQuery对象
                //遍历所有的要高亮的dom,当调用 highLight()插件的是一个集合的时候。
                var $this = $(this); //获取当前dom 的 jQuery对象，这里的this是当前循环的dom
                //根据参数来设置 dom的样式
                $this.css({
                    backgroundColor: opts.background,
                    color: opts.foreground
                });
            });

        }
    });    //默认参数
    var defaluts = {
        foreground: 'red',
        background: 'yellow'
    };
})(window.jQuery);

<br/>

到这一步，高亮插件基本功能已经具备了。调用代码如下：

<br/>

$(function () {
    $("p").highLight(); //调用自定义 高亮插件});

<br/>

这里只能 直接调用，不能链式调用。我们知道jQuey是可以链式调用的，就是可以在一个jQuery对象上调用多个方法，如：<br/>$('#id').css({marginTop:'100px'}).addAttr("title","测试“); <br/>但是我们上面的插件，就不能这样链式调用了。比如：$("p").highLight().css({marginTop:'100px'}); //将会报找不到css方法，原因在与我的自定义插件在完成功能后，没有将 jQuery对象给返回出来。接下来，return jQuery对象，让我们的插件也支持链式调用。（其实很简单，就是执行完我们插件代码的时候将jQuery对像return 出来，和上面的代码没啥区别）

<br/>

 1 //闭包限定命名空间 2 (function ($) { 3     $.fn.extend({ 4         "highLight": function (options) { 5             var opts = $.extend({}, defaluts, options); //使用jQuery.extend 覆盖插件默认参数 6             return this.each(function () {  //这里的this 就是 jQuery对象。这里return 为了支持链式调用 7                 //遍历所有的要高亮的dom,当调用 highLight()插件的是一个集合的时候。 8                 var $this = $(this); //获取当前dom 的 jQuery对象，这里的this是当前循环的dom 9                 //根据参数来设置 dom的样式10                 $this.css({11                     backgroundColor: opts.background,12                     color: opts.foreground13                 });14             });15 16         }17     });18     //默认参数19     var defaluts = {20         foreground: 'red',21         background: 'yellow'22     };23 })(window.jQuery);

<br/>

View Code

4.暴露公共方法 给别人来扩展你的插件（如果有需求的话）<br/>比如的高亮插件有一个format方法来格式话高亮文本，则我们可将它写成公共的，暴露给插件使用者，不同的使用着根据自己的需求来重写该format方法，从而是高亮文本可以呈现不同的格式。

<br/>

    //公共的格式化 方法. 默认是加粗，用户可以通过覆盖该方法达到不同的格式化效果。
    $.fn.highLight.format = function (str) {        return "<strong>" + str + "</strong>"; 
    }

5.插件私有方法<br/> 有些时候，我们的插件需要一些私有方法，不能被外界访问。例如 我们插件里面需要有个方法 来检测用户调用插件时传入的参数是否符合规范。<br/>6.其他的一些设置，如：为你的插件加入元数据插件的支持将使其变得更强大。

完整的高亮插件代码如下：

<br/>

//闭包限定命名空间(function ($) {
    $.fn.extend({
        "highLight": function (options) {            //检测用户传进来的参数是否合法
            if (!isValid(options))                return this;            var opts = $.extend({}, defaluts, options); //使用jQuery.extend 覆盖插件默认参数
            return this.each(function () {  //这里的this 就是 jQuery对象。这里return 为了支持链式调用
                //遍历所有的要高亮的dom,当调用 highLight()插件的是一个集合的时候。
                var $this = $(this); //获取当前dom 的 jQuery对象，这里的this是当前循环的dom
                //根据参数来设置 dom的样式
                $this.css({
                    backgroundColor: opts.background,
                    color: opts.foreground
                });                //格式化高亮文本
                var markup = $this.html();
                markup = $.fn.highLight.format(markup);
                $this.html(markup);
            });

        }
    });    //默认参数
    var defaluts = {
        foreground: 'red',
        background: 'yellow'
    };    //公共的格式化 方法. 默认是加粗，用户可以通过覆盖该方法达到不同的格式化效果。
    $.fn.highLight.format = function (str) {        return "<strong>" + str + "</strong>";
    }    //私有方法，检测参数是否合法
    function isValid(options) {        return !options || (options && typeof options === "object") ? true : false;
    }
})(window.jQuery);

调用

        //调用
        //调用者覆盖 插件暴露的共公方法
        $.fn.highLight.format = function (txt) {            return "<em>" + txt + "</em>"
        }
        $(function () {
            $("p").highLight({ foreground: &#39;orange&#39;, background: &#39;#ccc&#39; }); //调用自定义 高亮插件
        });

本文讲解了jQuery插件开发标准写法 ，更多相关内容请关注php中文网。

相关推荐：
JQuery中DOM操作——wrap

React this绑定的几点思考

django 使用 request 获取浏览器发送的参数

以上是jQuery外掛開發標準寫法的詳細內容。更多資訊請關注PHP中文網其他相關文章！