FED

©FrontEndDev.org
2015 - 2024
web@2.23.0 api@2.21.1

javascript 设计模式3——模块模式

在一些大的项目中经常使用到模块,在这里,我们将了解一下什么是模块模式。模块模式最简单的方法大家一定会用过,如下所示:

var a = {
     b : 1,
     c : 2 
}

这样一个对象的直接量其实就已经是可以表示一个模块的定义了。但是这里会有些问题:a对象里面的b和c属性是公有的,也就是说我们可以在外面任意改变其值。而模块化设计要求的是我们尽可能的实现模块中的值和方法都不被外部改变,形成独立或者说是私有的环境。所以我们可以这样写:

var count = (function(window, undefined){
    var total = 0;//私有成员变量
    var c =  function(q) {//私有方法,闭包函数
        total++;
    }
    return {
        count : c//暴露的私有方法,
    };
})(window, undefined)

可以看到,count最终接受了匿名函数返回的一个自面量,而其中的count方法也就是私有的c的公开方法的别名是包含了匿名函数内上下文的闭包函数,通过它,我们可以改变total的值,实现了total的私有化。我们可以这样来改变total的值

count.count();//这样total的值就递增了1

以上的例子中我们可以看到模块模式的一些特点:

模块化,可重用

  1. 封装了变量和function,和全局的namaspace不接触,松耦合
  2. 只暴露可用public的方法,其它私有方法全部隐藏。

在大型应用中模块化设计经常引用到。通过一些模块的加载器,和AMD规范,我们可以有序整理项目,实现可维护的高效率代码。