javascript(模块模式)

javascript Module(模块)模式

从javascript对象创建说起

说起Module(模块)模式，可能一些刚刚接触javascript的同学还是觉得比较陌生，但是相信大多数学习javascript的同学都知道javascript对象创建的方式。最熟悉的莫过于构造器方式创建对象。

Constructor(构造器)模式

基本Construcor(构造器)

function Car(model,year,miles){
    this.model = model;
    this.year = year;
    this.miles = miles;

    this.toShow = function(){
        return this.model + "已经行驶了:" +this.miles + "公里!";
    }
}
//用法:
//可以创建car的新实例
var benz = new Car('Benz',2012,2000);
var bmw = new Car('bmw',2014,5000);

//打开浏览器控制台(console)，查看这些对象上调用toShow()方法的输出
console.log(benz.toShow());
console.log(bmw.toShow())

上面是一个最简单的构造器模式的版本，它存在一些问题，比如让继承变得困难。最关键的问题是， toShow()这样的函数是为每个使用Car构造器创建的新对象而分别重新定义的。最不是最理想的，因为这种函数应该在所有的Car类型实例之间共享。所以后又有了基于原型的构造器对象创建

带原型的Constructor(构造器)

function Car(model,year,miles){
    this.model = model;
    this.year = year;
    this.miles = miles;
}
//注意这里直接使用了Object.prototype.newMethod,而不是直接定义Object.prototype是为了避免重新定义prototype对象
/*
Car.prototype = {
    constructor: Car,//这样写需要重新定位constructor
    toShow:function(){
        return this.model + "已经行驶了:" +this.miles + "公里!";
    }
}
*/
Car.prototype.toShow = function(){
    return this.model + "已经行驶了:" +this.miles + "公里!";
}

//用法:

var benz = new Car('Benz',2012,2000);
var bmw = new Car('bmw',2014,5000);

console.log(benz.toShow());
console.log(bmw.toShow());

现在toShow()的单一实例就能在所有Car对象之间共享了。

基本的关于构造器创建对象的模式说完了

以下来讲解：

Module(模块)模式

看一个例子：

var basketModule = (function(){
    //购物车数组,私有变量
    var basket = [];

    //私有函数
    function doSomethingPrivate(){
        //。。。
    }

    //私有函数
    function doSomethingElsePrivate(){
        //。。。
    }

    //返回一个暴露出的公有对象
    return {
        //添加item到购物车
        addItems:function(values){
            basket.push(values);
        },

        //获得购物车里商品总数
        getItemCount:function(){
            return basket.length;
        },

        //私有函数的公有形式别名
        doSomething:doSomethingPrivate,

        //获取所有商品的总价格
        getTotal:function(){
            var itemCount = this.getItemCount(),
                total = 0;
            while(itemCount--){
                total += basket[itemCount].price;
            }
            return total;
        }
    };
})();

//用法:
basketModule.addItem({
    item:"面包",
    price:5
});
basketModule.addItem({
    item:"可乐",
    price:2
});

//2
console.log(basketModule.getItemCount());
//7
console.log(basketModule.getTotal());

总结

Module模式用于进一步模拟类的概念，通过这种方式，可以使一个单独的对象拥有公有/私有方法和变量，从而屏蔽来自全局作用域的特殊部分。产生的结果是:函数名与在页面上其他脚本定义的函数冲突的可能性降低。

Module模式使用闭包封装”私有”状态和组织。它提供了一种包装混合公有/私有方法和变量的方式，防止其泄露至全局作用域，并与别的开发人员的接口发生冲突。通过该模式，只需返回一个公有API，而其他的一切都维持在私有闭包里面。

这样做为我们提供了一个屏蔽处理底层事件逻辑的整洁解决方案，同时只暴露一个接口供应用程序的其他部分使用。该模式除了返回一个对象而不是一个函数之外，非常类似于一个立即调用的函数表达式(IIFE)。

即：

(function(){

})();