javascript模块化

时间：2014-10-03 19:53:05 收藏：0 阅读：415

1、为什么要模块化

嵌入网页的javascript代码越来越庞大，越来越复杂，需要一个团队分工协作、进度管理、单元测试等，模块化编程，已经成为一个迫切的需求。此外：模块化编程解决的问题有：命名冲突问题，文件依赖问题等等。

一言以蔽之：模块化就是分解代码。

2、什么是模块

模块就是实现特定功能的一组方法。只要把不同的函数（以及记录状态的变量）简单地放在一起，就算是一个模块。有了模块，我们可以更方便地使用别人的代码，想要什么功能，就加载什么模块。接着出现了模块规范：就是大家必须以同样的方式编写模块，目前，通行的Javascript模块规范主要有两种：CommonJS和AMD。

3、模块之间的关系如何解决

通过形成依赖树来保证模块的加载顺序

3.1：AMD规范中：如果模块还依赖其他模块，那么define()函数的第一个参数，必须是一个数组，指明该模块的依赖性。

　define([‘myLib‘], function(myLib){

　　　　function foo(){

　　　　　　myLib.doSomething();

　　　　}

　　　　return {

　　　　　　foo : foo

　　　　};

　　});

3.2：CMD规范中：

// 所有模块都通过 define 来定义
define(function(require, exports, module) {

  // 通过 require 引入依赖
  var $ = require(‘jquery‘);
  var Spinning = require(‘./spinning‘);

  // 通过 exports 对外提供接口
  exports.doSomething = ...

  // 或者通过 module.exports 提供整个接口
  module.exports = ...

});

4、AMD和common js有什么区别

　AMD是"Asynchronous Module Definition"的缩写，意思就是"异步模块定义"。它采用异步方式加载模块，模块的加载不影响它后面语句的运行。所有依赖这个模块的语句，都定义在一个回调函数中，等到加载完成之后，这个回调函数才会运行。

　AMD也采用require()语句加载模块，但是不同于CommonJS，它要求两个参数：

    require([module], callback);

第一个参数[module]，是一个数组，里面的成员是要加载的模块；

第二个参数callback，是加载成功之后的回调函数。如果将前面的代码改写成AMD形式，就是下面这样：

require([‘math‘], function (math) {
    math.add(2, 3);
});

5、包，以及npm包结构规范

5.1：概念：包就是能完成独立功能的一个特殊模块，例如connect，http，compression,cookie-session,body-parser

都是包,包与模块相比有多个区别:

1、包是由模块组成的
2、通常情况下由第三方提供的叫包，而自己书写的叫模块
3、通常引用包用模块的名字，而引用模块用文件路径

4、模块可能不能单独使用,而包是可以单独使用的

官网解释：package

This specification describes the CommonJS package format for distributing CommonJS programs and libraries. A CommonJS package is a cohesive wrapping of a collection of modules, code and other assets into a single form. It provides the basis for convenient delivery, installation and management of CommonJS components.

This specifies the CommonJS package descriptor file and package file format. It does not specify a package catalogue file or format; this is an exercise for future specifications. The package descriptor file is a statement of known fact at the time the package is published and may not be modified without publishing a new release.

5.2：包结构规范

CommonJS包规范是理论，NPM是其中的一种实践。NPM之于Node，相当于gem之于Ruby，pear之于PHP。对于Node而言，NPM帮助完成了第三方模块的发布、安装和依赖等。借助NPM，Node与第三方模块之间形成了很好的一个生态系统。借助NPM，可以帮助用户快速安装和管理依赖包。

一个符合CommonJS规范的包应该是如下这种结构：

一个package.json文件应该存在于包顶级目录下
二进制文件应该包含在bin目录下。
JavaScript代码应该包含在lib目录下。
文档应该在doc目录下。
单元测试应该在test目录下。
由上文的require的查找过程可以知道，Node.js在没有找到目标文件时，会将当前目录当作一个包来尝试加载，所以在package.json文件中最重要的一个字段就是main。而实际上，这一处是Node.js的扩展，标准定义中并不包含此字段，对于require，只需要main属性即可。但是在除此之外包需要接受安装、卸载、依赖管理，版本管理等流程，所以CommonJS为package.json文件定义了如下一些必须的字段：

name。包名，需要在NPM上是唯一的。不能带有空格。
description。包简介。通常会显示在一些列表中。
version。版本号。一个语义化的版本号（http://semver.org/ ），通常为x.y.z。该版本号十分重要，常常用于一些版本控制的场合。
keywords。关键字数组。用于NPM中的分类搜索。
maintainers。包维护者的数组。数组元素是一个包含name、email、web三个属性的JSON对象。
contributors。包贡献者的数组。第一个就是包的作者本人。在开源社区，如果提交的patch被merge进master分支的话，就应当加上这个贡献patch的人。格式包含name和email。如：

"contributors": [{ "name": "Jackson Tian", "email": "mail @gmail.com" }, { "name": "fengmk2", "email": "mail2@gmail.com" }],

bugs。一个可以提交bug的URL地址。可以是邮件地址（mailto:mailxx@domain），也可以是网页地址（http://url）。
licenses。包所使用的许可证。例如：

"licenses": [{ "type": "GPLv2", "url": "http://www.example.com/licenses/gpl.html", }]

repositories。托管源代码的地址数组。
dependencies。当前包需要的依赖

6、node.js的模块引用机制

6.1：简单模块定义和使用

在Node.js中，定义一个模块十分方便。我们以计算圆形的面积和周长两个方法为例，来表现Node.js中模块的定义方式。

var PI = Math.PI;
exports.area = function (r) {
    return PI * r * r;
};
exports.circumference = function (r) {
    return 2 * PI * r;
};

将这个文件存为circle.js，并新建一个app.js文件，并写入以下代码：

var circle = require(‘./circle.js‘);
console.log( ‘The area of a circle of radius 4 is ‘ + circle.area(4));

可以看到模块调用也十分方便，只需要require需要调用的文件即可。