js模塊化插件開發

模板一：

//在頭部添加分號(;)是爲了避免js壓縮後和其它代碼不規範的插件(末尾沒有分號)帶來的影響。
//(function(){})();代表定義一個匿名方法，然後執行此方法
; (function ($) {
    //插件內部 私有方法
    function t1() {
        console.debug(1);
    };
    //插件內部 私有方法，和t1等效
    var t2 = function () {
        console.debug(2);
    }
    //插件 公共方法，是全局方法，和window.t3 等效，一般不要在插件中出現此類用法
    t3 = function () {
        console.debug(3);
    }
    //定義一個 全局變量 插件名稱爲 myDal;  外部使用myDal.t4();myDal.t5('hello'); 
    //如果是要開發jquery插件，將window換成$即可，外部使用$.myDal.t4();$.myDal.t5('hello');
    window.myDal = {
        t4: function () {
            console.debug(4);
        },
        t5: function (txt) {
            console.debug(txt);
        }
    };
    //擴展 插件myDal 內部方法,使用 myDal.t6();
    //如果是jquery插件，需如下擴展  $.myDal.t6 = function(){....};
    myDal.t6 = function () {
        console.debug(6);
    };
})(jQuery);

模板二（支持AMD規範）：

AMD規範介紹參考 http://www.ruanyifeng.com/blog/2012/10/asynchronous_module_definition.html

//在頭部添加分號(;)是爲了避免js壓縮後和其它代碼不規範的插件(末尾沒有分號)帶來的影響。
; (function (factory) {
    if (typeof define === "function" && define.amd) {
        // 使用AMD規範模式
        define(["jquery"], factory);
    } else {
        // 使用全局模式
        factory(jQuery);
    }
}(function ($) {
    //插件內部 私有方法
    function t1() {
        console.debug(1);
    };
    //插件內部 私有方法，和t1等效
    var t2 = function () {
        console.debug(2);
    }
    //插件 公共方法，是全局方法，和window.t3 等效，一般不要在插件中出現此類用法
    t3 = function () {
        console.debug(3);
    }
    //定義一個 全局變量 插件名稱爲 myDal;  外部使用myDal.t4();myDal.t5('hello'); 
    //如果是要開發jquery插件，將window換成$即可，外部使用$.myDal.t4();$.myDal.t5('hello');
    window.myDal = {
        t4: function () {
            console.debug(4);
        },
        t5: function (txt) {
            console.debug(txt);
        }
    };
    //擴展 插件myDal 內部方法,使用 myDal.t6();
    //如果是jquery插件，需如下擴展  $.myDal.t6 = function(){....};
    myDal.t6 = function () {
        console.debug(6);
    };
}));

jquery.fn.xxx擴展插件

參考：

http://www.css88.com/archives/4821

http://www.cnblogs.com/damonlan/archive/2012/04/06/2434460.html

相關文章推薦

http://justineo.github.io/singles/writing-modular-js/

http://www.css88.com/archives/4826

http://www.zhangxinxu.com/wordpress/?cat=5