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

版权声明：本文为博主原创文章，未经博主允许不得转载。