Javascript模块化编程(一):模块的写法

标签: IT | 发表时间:2012-10-26 00:32 | 作者:
出处:http://www.ruanyifeng.com/blog/

随着网站逐渐变成" 互联网应用程序",嵌入网页的Javascript代码越来越庞大,越来越复杂。

网页越来越像桌面程序,需要一个团队分工协作、进度管理、单元测试等等......开发者不得不使用软件工程的方法,管理网页的业务逻辑。

Javascript模块化编程,已经成为一个迫切的需求。理想情况下,开发者只需要实现核心的业务逻辑,其他都可以加载别人已经写好的模块。

但是,Javascript不是一种模块化编程语言,它不支持" "(class),更遑论"模块"(module)了。(正在制定中的 ECMAScript标准第六版,将正式支持"类"和"模块",但还需要很长时间才能投入实用。)

Javascript社区做了很多努力,在现有的运行环境中,实现"模块"的效果。本文总结了当前"Javascript模块化编程"的最佳实践,说明如何投入实用。虽然这不是初级教程,但是只要稍稍了解Javascript的基本语法,就能看懂。

一、原始写法

模块就是实现特定功能的一组方法。

只要把不同的函数(以及记录状态的变量)简单地放在一起,就算是一个模块。

  function m1(){
    //...
  }

  function m2(){
    //...
  }

上面的函数m1()和m2(),组成一个模块。使用的时候,直接调用就行了。

这种做法的缺点很明显:"污染"了全局变量,无法保证不与其他模块发生变量名冲突,而且模块成员之间看不出直接关系。

二、对象写法

为了解决上面的缺点,可以把模块写成一个对象,所有的模块成员都放到这个对象里面。

  var module1 = new Object({

    _count : 0,

    m1 : function (){
      //...
    },

    m2 : function (){
      //...
    }

  });

上面的函数m1()和m2(),都封装在module1对象里。使用的时候,就是调用这个对象的属性。

  module1.m1();

但是,这样的写法会暴露所有模块成员,内部状态可以被外部改写。比如,外部代码可以直接改变内部计数器的值。

  module1._count = 5;

三、立即执行函数写法

使用" 立即执行函数"(Immediately-Invoked Function Expression,IIFE),可以达到不暴露私有成员的目的。

  var module1 = (function(){

    var _count = 0;

    var m1 = function(){
      //...
    };

    var m2 = function(){
      //...
    };

    return {
      m1 : m1,
      m2 : m2
    };

  })();

使用上面的写法,外部代码无法读取内部的_count变量。

  console.info(module1._count); //undefined

module1就是Javascript模块的基本写法。下面,再对这种写法进行加工。

四、放大模式

如果一个模块很大,必须分成几个部分,或者一个模块需要继承另一个模块,这时就有必要采用"放大模式"(augmentation)。

  var module1 = (function (mod){

    mod.m3 = function () {
      //...
    };

    return mod;

  })(module1);

上面的代码为module1模块添加了一个新方法m3(),然后返回新的module1模块。

五、宽放大模式(Loose augmentation)

在浏览器环境中,模块的各个部分通常都是从网上获取的,有时无法知道哪个部分会先加载。如果采用上一节的写法,第一个执行的部分有可能加载一个不存在空对象,这时就要采用"宽放大模式"。

  var module1 = ( function (mod){

    //...

    return mod;

  })(window.module1 || {});

与"放大模式"相比,"宽放大模式"就是"立即执行函数"的参数可以是空对象。

六、输入全局变量

独立性是模块的重要特点,模块内部最好不与程序的其他部分直接交互。

为了在模块内部调用全局变量,必须显式地将其他变量输入模块。

  var module1 = (function ($, YAHOO) {

    //...

  })(jQuery, YAHOO);

上面的module1模块需要使用jQuery库和YUI库,就把这两个库(其实是两个模块)当作参数输入module1。这样做除了保证模块的独立性,还使得模块之间的依赖关系变得明显。这方面更多的讨论,参见Ben Cherry的著名文章 《JavaScript Module Pattern: In-Depth》

这个系列的第二部分,将讨论如何在浏览器环境组织不同的模块、管理模块之间的依赖性。

(完)

文档信息

相关 [javascript 模块化 编程] 推荐:

Javascript模块化编程(二):AMD规范

- - 阮一峰的网络日志
这个系列的 第一部分介绍了Javascript模块的基本写法,今天介绍如何规范地使用模块. 先想一想,为什么模块很重要. 因为有了模块,我们就可以更方便地使用别人的代码,想要什么功能,就加载什么模块. 但是,这样做有一个前提,那就是大家必须以同样的方式编写模块,否则你有你的写法,我有我的写法,岂不是乱了套.

Javascript模块化编程(一):模块的写法

- - 阮一峰的网络日志
随着网站逐渐变成" 互联网应用程序",嵌入网页的Javascript代码越来越庞大,越来越复杂. 网页越来越像桌面程序,需要一个团队分工协作、进度管理、单元测试等等......开发者不得不使用软件工程的方法,管理网页的业务逻辑. Javascript模块化编程,已经成为一个迫切的需求. 理想情况下,开发者只需要实现核心的业务逻辑,其他都可以加载别人已经写好的模块.

Javascript模块化编程(三):require.js的用法

- - 阮一峰的网络日志
这个系列的 第一部分和 第二部分,介绍了Javascript模块原型和理论概念,今天介绍如何将它们用于实战. 我采用的是一个非常流行的库 require.js. 一、为什么要用require.js. 最早的时候,所有Javascript代码都写在一个文件里面,只要加载这一个文件就够了. 后来,代码越来越多,一个文件不够了,必须分成多个文件,依次加载.

javascript 编程规范

- 红茶 - 博客园-Ruby's Louvre
为公司起草的javascript编程规范,参考了网上的许多资料,尤其是google的规范. 现在放出来,希望能抛砖引玉,大家多提宝贵意见. 本规范是针对javascript函数式编程风格与公司严重依赖于jQuery进行编码的现实制定出来. 禁止使用eval,with与caller(ecma262 v5 的use strict要求).

Javascript编程风格

- - 阮一峰的网络日志
Douglas Crockford是Javascript权威, Json格式就是他的发明. 去年11月他有一个演讲( Youtube),谈到了好的Javascript编程风格是什么. 我非常推荐这个演讲,它不仅有助于学习Javascript,而且能让你心情舒畅,因为Crockford讲得很幽默,时不时让听众会心一笑.

使用SeaJS实现模块化JavaScript开发

- jk - CNode社区
SeaJS是一个遵循CommonJS规范的JavaScript模块加载框架,可以实现JavaScript的模块化开发及加载机制. 与jQuery等JavaScript框架不同,SeaJS不会扩展封装语言特性,而只是实现JavaScript的模块化及按模块加载. SeaJS的主要目的是令JavaScript开发模块化并可以轻松愉悦进行加载,将前端工程师从繁重的JavaScript文件及对象依赖处理中解放出来,可以专注于代码本身的逻辑.

【转载】使用SeaJS实现模块化JavaScript开发

- - HTML5研究小组
SeaJS是一个遵循CommonJS规范的JavaScript模块加载框架,可以实现JavaScript的模块化开发及加载机制. 与jQuery等JavaScript框架不同,SeaJS不会扩展封装语言特性,而只是实现JavaScript的模块化及按…. SeaJS是一个遵循 CommonJS规范的JavaScript模块加载框架,可以实现JavaScript的模块化开发及加载机制.

Javascript异步编程的4种方法

- - 阮一峰的网络日志
你可能知道,Javascript语言的执行环境是"单线程"(single thread). 所谓"单线程",就是指一次只能完成一件任务. 如果有多个任务,就必须排队,前面一个任务完成,再执行后面一个任务,以此类推. 这种模式的好处是实现起来比较简单,执行环境相对单纯;坏处是只要有一个任务耗时很长,后面的任务都必须排队等着,会拖延整个程序的执行.

使用 node.js 进行服务器端 JavaScript 编程

- jiaosq - IBM developerWorks 中国 : 文档库
node.js 是一个可以使用 JavaScript 开发服务器端应用的平台. 它依托于 Google V8 JavaScript 引擎,并采用事件 I/O 的架构,可以用来创建高性能服务器. 本文详细介绍了 node.js 的基本知识、模块化的结构、事件驱动的机制以及常用的模块.

面向对象的 JavaScript 编程及其 Scope 处理

- zhibin - IBM developerWorks 中国 : Web development : Articles,Tutorials
在面向对象的 JavaScript 编程中,我们常常会将一些数据结构和操作封装成对象以达到继承和重用的目的. 然而层层封装和继承再加上 JavaScript 中特殊关键字 this 的使用,使得 JavaScript 当前运行 Context 看起来非常的混乱. 很多 developer 为了获取运行时正确的 Context,常常不得已将 function 或者 Object 声明在全局 Global Context 中.