JavaScript > module模式

先展示module模式的一个示例:

var singleton = function(){

    //私有变量
    var privateVariable = 10;

    //私有函数
    function privateFunction(){
        return false;
    }

    //公有方法和属性
    return{
        publicProperty:true,

        publicMethod:function(){
            privateVariable ++;
            return privateFunction();
        }
    }
}();

这个模块模式使用了一个返回对象的立即执行的匿名函数，首先定义了私有变量和函数，返回的对象字面量是一个全局对象类型的单例（按照惯例，JavaScript是以对象字面量的方式来创建单例对象的），其中只包含可以公开的属性和方法，因为返回的这个字面量对象是在匿名函数内部定义的，所以它的公有方法有权访问私有变量和函数。

基于这个简单的示例，再来看一个实际应用的例子(为了更好的体现js结构，省略了部分代码)：

//dom加载完毕后执行，立即执行函数的执行时机比该函数要早；
$(function(){
    $PC.init();
});

var PageCtrl = $PC = function(){

    //私有变量
    var me = null, $RG = null, _tools = null;

    //私有函数
    function nameFormatter(value, row, index){
        return 'testValue';
    }

    //返回的全局单例对象
    return{
        /** * 页面初始化 */
        init:function(){
            this.initVars();
            this.renderUI();
            this.bindUI();
        },

        /** * 变量初始化 */
        initVars:function(){
            me = this;
            $RG = $('#repayCollectionGrid');
            _tools = [{
                id:'exportProtocol',
                text:'导出协议',
                iconCls:'icon-export',
                handler:function(){
                    location.href = ctx + '/selfSupport/exportProtocol.htm';
                }
            }];
        },
        /** * 渲染页面控件 */
        renderUI:function(){
            $RG.datagrid({
                url:ctx + '/selfSupport/getRepayBKProductGrid.htm',
                columns:[[
                    {field:'name',title:'名称',width:25,formatter:nameFormatter}
                ]],
                toolbar:_tools
            });
        },

        /** * 绑定事件和数据 */
        bindUI:function(){
            $('#confirm_btn_cancel').click(function(e){
                $('#confirmWin').window('close');
            });
            //查询
            $('#searchBtn').click(function(e){
                var data = $('#searchForm').serializeObject();
                $RG.datagrid('load',data);
            });
        }
    };
}();

这种结构有什么好处呢？

1.和把各种功能的js代码块统统写在$(document).ready(function(){ …}); 中相比，这种结构很清晰，初始化变量的代码在initVars函数中，渲染页面的代码在renderUI函数中，为页面控件绑定事件的代码在bindUI中；

2.随着js文件数量的增加，全局同名变量或方法的可能性也越大，所以尽量避免把变量和方法定义为全局的，这种结构就很好的把私有变量和方法的作用域限定在匿名函数内部，通过闭包的方式提供可以访问这些私有变量或方法的公共方法，在外部通过$PC.xxx()的方式调用这些公共方法，避免了同名全局变量或方法的冲突。

参考资料
《JavaScript高级程序设计》