jQuery插件開發方式

時間 2019-11-16

原文原文鏈接

1、jQuery擴展

　　一、$.extend(object)html

　　相似於.Net的擴展方法，用於擴展jQuery。而後就能夠用$.的方式調用。函數

    $(function(){
        $.extend({ fun1: function () { alert("爲jQuery擴展一個fun1函數!"); } });
        $.fun1();
    })

　　二、$.fn.extend(object)this

　　擴展jQuery的對象。google

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

　　能夠用google來看看：spa

　　上面的寫法等同於:插件

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

2、私有域

　　其定義方式以下：code

(function ($) { })(jQuery);
//至關於
var fn = function (xxoo) { };
fn(jQuery);

　　如下代碼彈出123。htm

  $(function(){
     var fn = function (xxoo) { };
     fn(alert(123));
  })

3、定義插件的基本步驟

　　一、定義做用域對象

　　開發一個jQuery插件，首先要把插件的代碼與外界隔離開來，外部的代碼不容許直接訪問插件內部的代碼，插件內部的代碼也不影響外部。blog

    //步驟1 定義插件私有做用域
    (function ($) {

    })(jQuery);

　　這樣就能保證插件內部的代碼與外界隔離了。

　　二、擴展jQuery

　　定義了做用域以後，爲了可以讓外部調用，就須要將插件擴展到jQuery。

    //步驟1 定義私有做用域
    (function ($) {
        //步驟2 插件的擴展方法名稱
        $.fn.MyFrame = function (options) {
            
        }
    })(jQuery);

　　三、默認值

　　定義了jQuery插件以後，若是但願某些參數具備默認值，那麼能夠以這種方式來指定。

    //步驟1 定義私有做用域
    (function ($) {
        //步驟3 插件的默認值屬性
        var defaults = {
            Id: '#id1',
        };
        //步驟2 插件的擴展方法名稱
        $.fn.MyFrame = function (options) {
            //步驟3 合併用戶自定義屬性，默認屬性(若是options爲空，則使用defaults)
            var options = $.extend(defaults, options);
        }
    })(jQuery);

　　四、支持jQuery選擇器

    //步驟1 定義私有做用域
    (function ($) {
        //步驟3 插件的默認值屬性
        var defaults = {
            Id: '#id1',
        };
        //步驟2 插件的擴展方法名稱
        $.fn.MyFrame = function (options) {
            //步驟3 合併用戶自定義屬性，默認屬性(若是options爲空，則使用defaults)
            var options = $.extend(defaults, options);
        }
        //步驟4 支持jQuery選擇器
        this.each(function () {

        });
    })(jQuery);

　　五、支持jQuery的鏈式調用

    //步驟1 定義私有做用域
    (function ($) {
        //步驟3 插件的默認值屬性
        var defaults = {
            Id: '#id1',
        };
        //步驟2 插件的擴展方法名稱
        $.fn.MyFrame = function (options) {
            //步驟3 合併用戶自定義屬性，默認屬性(若是options爲空，則使用defaults)
            var options = $.extend(defaults, options);
        }
        //步驟4 支持jQuery選擇器
        //步驟5 支持鏈式調用(將步驟4返回)
        return this.each(function () {

        });
    })(jQuery);

　　六、插件內部方法

    //步驟1 定義私有做用域
    (function ($) {
        //步驟3 插件的默認值屬性
        var defaults = {
            Id: '#id1',
        };

        //步驟6 在插件裏定義函數
        var MyFun = function (obj) {
            alert(obj);
        }

        //步驟2 插件的擴展方法名稱
        $.fn.MyFrame = function (options) {
            //步驟3 合併用戶自定義屬性，默認屬性(若是options爲空，則使用defaults)
            var options = $.extend(defaults, options);
        }
        //步驟4 支持jQuery選擇器
        //步驟5 支持鏈式調用(將步驟4返回)
        return this.each(function () {
            //步驟6 在插件裏定義函數
            MyFun(this);
        });
    })(jQuery);