JavaScript 模块模式

1. 对象字面量

var myObjectLiteral = {
 
    variableKey: variableValue,
 
    functionKey: function () {
      // ...
    }
};

示例如下：

var myModule = {
 
  myProperty: "someValue",
 
  // object literals can contain properties and methods.
  // e.g we can define a further object for module configuration:
  myConfig: {
    useCaching: true,
    language: "en"
  },
 
  // a very basic method
  saySomething: function () {
    console.log( "Where in the world is Paul Irish today?" );
  },
 
  // output a value based on the current configuration
  reportMyConfig: function () {
    console.log( "Caching is: " + ( this.myConfig.useCaching ? "enabled" : "disabled") );
  },
 
  // override the current configuration
  updateMyConfig: function( newConfig ) {
 
    if ( typeof newConfig === "object" ) {
      this.myConfig = newConfig;
      console.log( this.myConfig.language );
    }
  }
};
 
// Outputs: Where in the world is Paul Irish today?
myModule.saySomething();
 
// Outputs: Caching is: enabled
myModule.reportMyConfig();
 
// Outputs: fr
myModule.updateMyConfig({
  language: "fr",
  useCaching: false
});
 
// Outputs: Caching is: disabled
myModule.reportMyConfig();

2. 模块模式

var testModule = (function () {
    var counter = 0; // 私有变量
    return {
        incrementCounter: function () {
            /// <summary>
            /// 增加计数
            /// </summary>
            return ++counter;
        },
        resetConter: function () {
            /// <summary>
            /// 重置计数
            /// </summary>
            counter = 0;
        }
    }
})();

// 使用
testModule.incrementCounter();
testModule.resetConter();

包括命名空间、私有、共有变量的模块：

var myNamespace = (function () {
    // 私有
    var myPrivateVar = 0;
    var myPrivateMethod = function (foo) {
        console.log(foo);
    };

    return {
        // 公有变量
        myPublicVar: 'foo',

        //调用私有变量和方法的公有函数
        myPublicFunction: function (bar) {
            myPrivateVar++; // 增加自由的计数器的值
            myPrivateMethod(bar); // 传入bar调用私有方法
        }
    };
})();

var basketModule = (function () {
    // 私有变量
    var basket = [];

    function doSomethingPrivate() {
        // ...
    }

    function doSomethingElsePrivate() {
        // ...
    }

    // 返回一个暴露出的公有对象
    return {
        addItem: function (values) {
            /// <summary>
            /// 添加item到购物车
            /// </summary>
            /// <param name="values"></param>
            basket.push(values);
        },
        getItemCount: function () {
            /// <summary>
            /// 获取购物车里的item数
            /// </summary>
            return basket.length;
        },
        // 私有函数的公有形式别名
        doSomething: doSomethingPrivate,
        getTotal: function () {
            /// <summary>
            /// 获取购物车里所有item的价格总值
            /// </summary>
            var itemCount = this.getItemCount(),
                total = 0;
            while (itemCount--) {
                total += basket[itemCount].price;
            }
            return total;
        }
    };

}());

basketModule.addItem({ item: '面包', price: 5 });
basketModule.addItem({ item: '黄油', price: 8 });
console.log(basketModule.getItemCount());
console.log(basketModule.getTotal());

3. 揭示模块模式

var myRevealingModule = (function () {
 
        var privateCounter = 0;
 
        function privateFunction() {
            privateCounter++;
        }
 
        function publicFunction() {
            publicIncrement();
        }
 
        function publicIncrement() {
            privateFunction();
        }
 
        function publicGetCount(){
          return privateCounter;
        }
 
        // Reveal public pointers to
        // private functions and properties
 
       return {
            start: publicFunction,
            increment: publicIncrement,
            count: publicGetCount
        };
 
    })();
 
myRevealingModule.start();

 

4. 更多模块模式的代码

 

/* 匿名闭包 */

(function () {

    var MyAPP = {
        version: '0.0.1'
    };

    MyAPP.print = function () {
        console.log(MyAPP.version);
    };

    MyAPP.print();

}());

/* 全局导入（Global Import） */

(function ($, YAHOO) {
    var MyAPP = {
        version: '0.0.1'
    };

    MyAPP.print = function () {
        console.log(MyAPP.version);
    };

    MyAPP.print();

    $(function () {
        $('body').html(MyAPP.version);
    });

}(jQuery, YAHOO));

/* 模块导出（Module Export） */
var MODULE = (function () {
    var MyAPP = {},
        privateVariable = 1;

    function privateMethod() {
        /// <summary>
        /// 私有方法
        /// </summary>
        // ...
    }

    MyAPP.moduleProperty = 1;
    MyAPP.moduleMethod = function () {
        // ...
    };

    return MyAPP;

}());

/* 高级模块模式 */

// Augmentation(augment modules.)
var MODULE = (function (my) {
    my.anotherMethod = function () {
        // added method...
    };

    return my;
}(MODULE));

/* 松耦合扩展 */
var MODULE = (function (my) {
    // 添加方法
    return my;
}(MODULE || {}));

/* 紧耦合扩展 */
var MODULE = (function (my) {
    var oldModuleMethod = my.moduleMethod;
    // 重写模块方法
    my.moduleMethod = function () {
        // 方法重写，此处可以通过oldModuleMethod访问老方法
    };

    return my;
}(MODULE));

/* 克隆和继承 */

var MODULE_TWO = (function (old) {
    var NewApp = {},
        key;

    for (key in old) {
        if (old.hasOwnProperty(key)) {
            NewApp[key] = old[key];
        }
    }

    var super_moduleMethod = old.moduleMethod;
    NewApp.moduleMethod = function () {
        // override method on the clone, access to super through super_moduleMethod
    };

    return NewApp;
}(MODULE));

/* 跨文件私有状态 */

var MODULE = (function (my) {
    var _private = my._private = my._private || {},
        _seal = my._seal = my._seal || function () {
            delete my._private;
            delete my._seal;
            delete my._unseal;
        },
        _unseal = my._unseal = my._unseal || function () {
            my._private = _private;
            my._seal = _seal;
            my._unseal = _unseal;
        };

    // permanent(永久) access to _private, _seal, and _unseal

    return my;
}(MODULE || {}));

/* 子模块 */
MODULE.sub = (function () {
    var my = {};
    // ...

    return my;
}());

/* 组合使用 */
var UTIL = (function (parent, $) {
    var my = parent.ajax = parent.ajax || {};

    my.get = function (url, params, callback) {
        return $.getJSON(url, params, callback);
    };

    // etc...

    return parent;
}(UTIL || {}, jQuery));

参考自：

http://drakeleung.github.io/blog/2016/02/07/JavaScript-Module-A-Beginner-Guide/

https://addyosmani.com/resources/essentialjsdesignpatterns/book/#modulepatternjavascript

http://www.adequatelygood.com/JavaScript-Module-Pattern-In-Depth.html