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 模式

时间: 2024-10-17 03:47:44

Javascript Module 模式的相关文章

深入理解JavaScript系列(3):全面解析Module模式

简介 Module模式是JavaScript编程中一个非常通用的模式,一般情况下,大家都知道基本用法,本文尝试着给大家更多该模式的高级使用方式. 首先我们来看看Module模式的基本特征: 模块化,可重用 封装了变量和function,和全局的namaspace不接触,松耦合 只暴露可用public的方法,其它私有方法全部隐藏 关于Module模式,最早是由YUI的成员Eric Miraglia在4年前提出了这个概念,我们将从一个简单的例子来解释一下基本的用法(如果你已经非常熟悉了,请忽略这一节

<深入理解JavaScript>学习笔记(3)_全面解析Module模式

简介 Module模式是JavaScript编程中一个非常通用的模式,一般情况下,大家都知道基本用法,本文尝试着给大家更多该模式的高级使用方式. 首先我们来看看Module模式的基本特征: 模块化,可重用 封装了变量和function,和全局的namaspace不接触,松耦合 只暴露可用public的方法,其它私有方法全部隐藏 基本用法 先看一下最简单的一个实现,代码如下: var Calculator = function (eq) { //这里可以声明私有成员 var eqCtl = doc

【JavaScript】设计模式-module模式及其改进

写在前面 编写易于维护的代码,其中最重要的方面就是能够找到代码中重复出现的主题并优化他们,这也是设计模式最有价值的地方 说到这里...... <head first设计模式>里有一篇文章,是说使用模式的心智, 1.初学者"心智" :"我要为HELLO WORLD找个模式" 2.中级人员模式: "或许这里我需要一个单件模式" 3.悟道者心智:"在这里使用一个装饰者模式相当自然" but,but,but,不学,连初学者

转载翻译文章:JavaScript Module Pattern: In-Dept

# JavaScript Module Pattern: In-Depth # 转载翻译文章:JavaScript Module Pattern: In-Depth*原文*:http://www.adequatelygood.com/JavaScript-Module-Pattern-In-Depth.html 模块模式是一种常见的js开发编码模式.通常来说,它很好理解,但还有一些高级应用并没有得到太多关注.这篇文章,我将回顾基础知识,并介绍一些真正了不起的高级主题,其中包括一个我认为极为原始的

Javascript编程模式(JavaScript Programming Patterns)Part 1.

JavaScript 为网站添加状态,这些状态可能是校验或者更复杂的行为像拖拽终止功能或者是异步的请求webserver (aka Ajax). 在过去的那些年里, JavaScript libraries变得越来越流行. 如果你面对着很多的工作计划,一个很明确的道理就是在网站变得越来越复杂的情况下每次修改‘轮子“肯定让你不爽.当然我们把类库放到一边,聚焦于 JavaScript的语法,对你最有价值的东西是在你编写 JavaScript你要明确你使用的是那种”编程模式“. 下面主要介绍几个jav

module模式小记

当我们以一个通常的写法来写一个构造函数的时候(通过new 调用的函数) 它里面的属性和方法对外界是可见的 function Person() { this.name = "haha"; this.sayName = function(){ return this.name; } return this; } var p1 = new Person(); console.log(p1.sayName());//haha console.log(p1.name);//haha p1.nam

(转)深入理解JavaScript 模块模式

深入理解JavaScript 模块模式 (原文)http://www.cnblogs.com/starweb/archive/2013/02/17/2914023.html 英文:http://www.adequatelygood.com/2010/3/JavaScript-Module-Pattern-In-Depth 模块模式是JavaScript一种常用的编码模式.这是一般的理解,但也有一些高级应用没有得到很多关注.在本文中,我将回顾基础知识,浏览一些不错的高级技巧,甚至我认为是原生基础的

【设计模式】module模式&amp;&amp;Revealing module (揭示)模式

写在前面 <head first设计模式>里有一篇文章,是说使用模式的心智, 1.初学者"心智" :"我要为HELLO WORLD找个模式" 2.中级人员模式: "或许这里我需要一个单件模式" 3.悟道者心智:"在这里使用一个装饰者模式相当自然" but,but,but,不学,连初学者都不算呐... 先了解一下设计模式的起源吧: >>>设计模式的起源就比较有意思了,设计模式最初起源于奥地利维也纳的

Javascript 严格模式详解

Javascript 严格模式详解 作者: 阮一峰 日期: 2013年1月14日 一.概述 除了正常运行模式,ECMAscript 5添加了第二种运行模式:"严格模式"(strict mode).顾名思义,这种模式使得Javascript在更严格的条件下运行. 设立"严格模式"的目的,主要有以下几个: - 消除Javascript语法的一些不合理.不严谨之处,减少一些怪异行为; - 消除代码运行的一些不安全之处,保证代码运行的安全: - 提高编译器效率,增加运行速度