如何去定義一個jquery插件

擴展jquery的時候。最核心的方法是以下兩種：

$.extend(object) 可以理解為jquery添加一個靜態方法

$.fn.extend(object) 可以理解為jquery實例添加一個方法

 

$.extend(object)

         例子：

/* $.extend 定義與調用

* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

$.extend({ fun1: function () { alert("執行方法一"); } });//定義

$.fun1();//調用

　　

 

 

$.fn.extentd(object)

 

/*  $.fn.extend 定義與調用

* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

$.fn.extend({ fun2: function () { alert("執行方法2"); } });

$(this).fun2();

//等同於

$.fn.fun3 = function () { alert("執行方法三"); }

$(this).fun3();

 

　　

定義jquery插件的基本結構

 

1．  定義作用域：

為插件定義一個私有作用域。外界代碼不能直接訪問插件內部。插件內部代碼不受外界干擾，也不會污染到全局變量。

    //step01 定義JQuery的作用域
(function ($) {
 
})(jQuery);
 

　　

2. 為插件添加擴展方法：

//step01 定義JQuery的作用域
(function ($) {
    //step02 插件的擴展方法名稱
    $.fn.easySlider = function (options) {
        
    }
})(jQuery);

 

3. 設置默認值：

//step01 定義JQuery的作用域
(function ($) {
    //step03-a 插件的默認值屬性
    var defaults = {
        prevId: 'prevBtn',
        prevText: 'Previous',
        nextId: 'nextBtn',
        nextText: 'Next'
        //……
    };
    //step02 插件的擴展方法名稱
    $.fn.easySlider = function (options) {
        //step03-b 合並用戶自定義屬性，默認屬性
        var options = $.extend(defaults, options);
    }
})(jQuery);

　　

其中：var options = $.extend(defaults, options)的含義了。表示 options 去覆蓋了defaults的值，並把值賦給了options。
在插件環境中，就表示用戶設置的值，覆蓋了插件的默認值；如果用戶沒有設置默認值的屬性，還是保留插件的默認值。

4. 支持jquery選擇器：

        //step01 定義JQuery的作用域
(function ($) {
    //step03-a 插件的默認值屬性
    var defaults = {
        prevId: 'prevBtn',
        prevText: 'Previous',
        nextId: 'nextBtn',
        nextText: 'Next'
        //……
    };
    //step02 插件的擴展方法名稱
    $.fn.easySlider = function (options) {
        //step03-b 合並用戶自定義屬性，默認屬性
        var options = $.extend(defaults, options);
        //step4 支持JQuery選擇器
        this.each(function () {
 
        });
    }
})(jQuery);

　　

5 ．支持JQuery的鏈接調用：

為了能達到鏈接調用的效果必須要把循環的每個元素return

//step01 定義JQuery的作用域
(function ($) {
    //step03-a 插件的默認值屬性
    var defaults = {
        prevId: 'prevBtn',
        prevText: 'Previous',
        nextId: 'nextBtn',
        nextText: 'Next'
        //……
    };
    //step02 插件的擴展方法名稱
    $.fn.easySlider = function (options) {
        //step03-b 合並用戶自定義屬性，默認屬性
        var options = $.extend(defaults, options);
        //step4 支持JQuery選擇器
        //step5 支持鏈式調用
        return this.each(function () {
 
        });
    }
})(jQuery);

　　

6. 插件里的方法：

在插件里定義的方法，外界不能直接調用，我在插件里定義的方法也沒有污染外界環境。

//step01 定義JQuery的作用域
(function ($) {
    //step03-a 插件的默認值屬性
    var defaults = {
        prevId: 'prevBtn',
        prevText: 'Previous',
        nextId: 'nextBtn',
        nextText: 'Next'
        //……
    };
    //step06-a 在插件里定義方法
    var showLink = function (obj) {
        $(obj).append(function () { return "(" + $(obj).attr("href") + ")" });
    }
 
    //step02 插件的擴展方法名稱
    $.fn.easySlider = function (options) {
        //step03-b 合並用戶自定義屬性，默認屬性
        var options = $.extend(defaults, options);
        //step4 支持JQuery選擇器
        //step5 支持鏈式調用
        return this.each(function () {
            //step06-b 在插件里定義方法
            showLink(this);
        });
    }
})(jQuery);