Javascript Module 模式

     Javascript Module Pattern 可以说是在Javascript代码实现过程中的最佳实践方法,能够清晰地表达Javascript面向对象的概念。其核心理念是用Javascript的“类”封装私有和公有的属性和方法。它不允许开发人员定义全局变量去“污染”全局对象。通过这种模式,可以提高Web的性能,也利于维护Javascript的代码。

  在Javascript程序设计语言中,函数可以作为一个模块,在某些情况下,需要创建的是单例对象,而不是创建一个类的实例。在模块的内部,公共接口可以访问模块中的私有变量以及私有方法。这些公共接口函数又叫做特权方法(Privileged Methods)。

  许多Javascript实现的应用程序使用的都是单例,因此Javascript Module Pattern 应用就比较多。因此创建一个匿名函数用来返回一个字面对象包装的特权方法集,由于闭包原则,这些特权方法有权访问到匿名函数中的变量和方法,这就是模块模式。

Javascript Module Pattern 的好处:

1.通过该模式可以以中面向对象的思想来编写Javascript代码。

2.功能的模块化,提高代码的利用率。

在这里我们先看一下匿名闭包函数:

var jsModule = function(){//全局单例对象 
    var privateVar = "Foo"; 
    var privateMethod = function(){ 
        return privateVar; 
    }; 
    return { 
        printVar: function(){ 
            return privateMethod(); 
        } 
    }; 
}();//自执行函数 
console.log(jsModule.printVar()); 

匿名闭包

可以说该特性是Javascript的非常好的特性。创建匿名函数,并立即执行。保证了函数在运行期间其内的代码一直是处于私有状态的。

(function(){
       // 所有的变量和函数都在这里声明,而且作用域也只能在这个匿名闭包
       // 匿名闭包里的代码可以访问外部全局对象 
})();

匿名闭包函数后面的括号,是必须要有的,如果没有的话,Javascript解释器会默认声明一个函数的,有括号的话,就是创建一个自执行的函数。还有一种声明方法:

(function(){
       // 所有的变量和函数都在这里声明,而且作用域也只能在这个匿名闭包
       // 匿名闭包里的代码可以访问外部全局对象 
}());

引入全局

Javascript有个特性,称为隐式全局变量。使用变量时,Javascript解释器会根据作用域来查找这个变量的var 声明,如果没有找到var声明,Javascript解释器假定该变量为全局变量。如果该变量被使用的话,解释器就会自动创建它。这样一来在匿名闭包里使用或创建全局变量的话就是非常的容易的。但是也有一个非常困难的就是代码比较难管理,尤其是在阅读代码时,无法分清哪些是全局变量,哪些局部变量。

但是,匿名函数有一个不错的选择就是把全局变量作为参数传递给匿名函数。这样我们的代码既清晰,而且比使用隐式全局变量更快。

(function($,YaHoo){
      // 在该匿名函数里有权限访问全局jQuery和YaHoo
})(jQuery,YaHoo)

模块出口

有时你不只是想用全局变量,但是你需要先声明他们(模块的全局调用)。我们用匿名函数的返回值,很容易地输出他们,这样就完成了基本的Module pattern。下面是一个完整的例子。

var MOODLE = (function(){
   var my = {},
        privateVar = 1;
    function privateMethod(){
     // .....          
   }         
  my.moduleProperty = 1;
  my.moduleMethod = function(){
       // ....   
   }
   return my;       
})();

注意,我们声明了一个全局模块MODULE ,有两个公开属性:MODULE.moduleMethod和MODULE.moduleProperty。而且匿名函数的闭包还维持了私有内部状态。

我们知道该如何引用全局变量和输出全局变量。

 

Javascript Module 模式,布布扣,bubuko.com

Javascript Module 模式

上一篇:vue移动端常用组件


下一篇:Web UI 自动化测试框架 pyse