在 js 中, Module 模式用于进一步模拟类的概念, 通过这种方式, 能够使一个单独的对象拥有公有 / 私有方法和变量, 从而屏蔽来自全局作用域的特殊部分.
产生的结果是: 函数名与在页面上其他脚本定义的函数冲突的可能性降低.
原理: 通过命名空间, 函数自知行, 返回对象, 闭包的应用实现私有变量和私有函数.
优点: 1. 对应拥有面向对象背景的开发人员来说更加整洁
2. 它支持私有数据
缺点: 1. 要改变可见性时, 必须要修改每一个曾经使用过该成员的地方
2. 无法为私有成员创建自动化单元测试
3. 修改 bug 时, 必须覆盖所有与有 bug 的私有方法进行交互的公有方法
4. 无法轻易地扩展私有方法
示例 1:
计数器实例
- var testModule = (function(){
- var counter = 0;
- return {
- incrementCounter : function(){
- return ++counter;
- },
- resetCounter : function(){
- console.log("counter value prior to reset :" + counter);
- counter = 0;
- }
- };
- })();
- // 用法
- // 增加计数器
- testModule.incrementCounter();
- // 检查计数器并重置
- // 输出 1
- testModule.resetCounter();
示例 2:
模板:
- var myNamespace = (function(){
- // 私有计数器变量
- var myPrivateVar = 0;
- // 记录所有参数的私有函数
- var myPrivateMethod = function(foo){
- console.log(foo);
- };
- return {
- // 公有变量
- myPublicVar : "foo",
- // 调用私有变量和方法的公有函数
- myPublicMethod : function(bar){
- // 增加私有计数器值
- myPrivateVar++;
- // 传人 bar 调用私有方法
- myPrivateMethod(bar);
- }
- };
- })();
示例 3:
购物车实例
- var basketModule = (function(){
- // 私有
- var basket = [];
- function doSomethingPrivate(){
- //...
- }
- function doSomethingElsePrivate(){
- //...
- }
- // 返回一个暴露出的公有对象
- return {
- // 添加 item 到购物车
- addItem : function(values){
- basket.push(values);
- },
- // 获取购物车的 item 数
- getItemCount : function(){
- return basket.length;
- },
- // 私有函数的公有形式别名
doSomething : doSomethingPrivate ,
- // 获取购物车里所有 item 的价格总值
- getTotal : function(){
- var itemCount = this.getItemCount(),
- total = 0;
- while(itemCount--){
- total +=basket[itemCount].price;
- }
- return total;
- }
- };
- })();
- // 用法
- basketModule.addItem({
- item : "bread",
- price : 0.5
- });
- basketModule.addItem({
- item : "butter",
- price : 0.3
- });
- // 输出 2
- console.log(basketModule.getItemCount());
- // 输出 0.8
- console.log(basketModule.getTotal());
示例 4
引入 jQuery 和 Underscope, 并且局部内重新命名
- var myModule = (function(jQ,_){
- function privateMethod1(){
- jQ(".container").html("test");
- }
- function privateMethod2(){
- console.log(_.min([10,5,100,2,1000]));
- }
- return {
- publicMethod : function(){
- privateMethod1();
- }
- };
- // 引入 jQuery 和 Underscope
- })(jQuery, _);
- // 用法
- myModule.publicMethod();
示例 5
返回对象即可, 不一定要直接 return 对象字面量
- var myModule = (function(){
- var module = {},
- privateVariable = "Hello World";
- function privateMethod(){
- //...
- }
- module.publicProperty = "Foobar";
- module.publicMethod = function(){
- console.log(privateVariable);
- };
- return module;
- })();
来源: http://www.qdfuns.com/article/17398/6daad3b4f882293e177af5c5980eb79f.html