前端模块化

1.模块与模块化开发

• 模块：实现特定功能的一组方法
• 模块化开发：随着浏览器性能的提升，相关技术的进步，前端项目变得越来越复杂。为了提高开发效率，人们将特定功能的方法/代码放在一起，构成模块，方便在开发过程中复用，但是出现了很多问题：全局变量的使用冲突，函数命名冲突，依赖关系管理困难。为了解决上述问题，制定了规范来解决上述问题——CommonJS、AMD、CMD

2.CommonJS

• CommonJS是起源于服务器端模块化开发的规范
• 定义模块：一个单独的文件就是一个模块，每一个模块都是一个单独的作用域（在模块内部定义的变量，无法被其他模块读取，除非定义为global对象的属性）
• 模块输出：模块只有一个出口 module.exports 对象，需要将模块希望输出的内容放在该对象中
• 加载模块：加载模块使用require方法，该方法读取一个文件并执行，返回文件内部的 module.exports 对象

//模块定义 myModel.js

var name = 'Byron';

function printName(){
    console.log(name);
}

function printFullName(firstName){
    console.log(firstName + name);
}

module.exports = {
    printName: printName,
    printFullName: printFullName
}

//加载模块

var nameModule = require('./myModel.js');

nameModule.printName();

• 问题：加载模块和操作模块提供的变量和方法是同步的(上面第二段代码)，即操作模块提供的变量和方法必须得等到加载模块完成后才可以执行。在服务器端，所有的模块(js文件)都放在硬盘中，因此模块的加载速度很快。但是在浏览器端，加载模块需要向服务器发送请求，会受到网络的影响。如果模块的加载需要等很长时间，浏览器就会处于“假死”状态。因此CommonJS只适用于服务器端，并不适用于浏览器端。

3.AMD

• AMD即 Asynchronous Module Definition，中文名为异步模块定义。它是一个在浏览器端模块化开发的规范
• 使用AMD规范进行开发需要使用RequireJS
• requireJS主要解决两个问题:
  • js文件之间的依赖关系：被依赖的文件需要早于依赖它的文件加载到浏览器
  • js加载的时候浏览器会停止页面渲染，加载文件越多，页面失去响应时间越长
• AMD是一个模块一个文件吗？

使用

• 定义模块：requireJS定义了一个函数 define，它是全局变量，用来定义模块

define(id?, dependencies?, factory);

1. id：可选参数，用来定义模块的标识，如果没有提供该参数，默认为该模块对应的脚本文件名（去掉拓展名）
2. dependencies：是一个当前模块依赖的模块名称数组
3. factory：工厂方法，模块初始化要执行的函数或对象。如果为函数，它应该只被执行一次。如果是对象，此对象应该为模块的输出值

• 加载和使用模块：

require([module], callback);

1.[module]，是一个数组，指定了要加载的模块
2.callback，是加载成功之后的回调函数

• 例子：

require(['math'], function (math) {
　　math.add(2, 3);
});
console.log('hello world');

console.log()的执行和模块的加载是异步的，不会因为等待模块的加载而使浏览器“假死”

4.CMD

• CMD即 Common Module Definition，中文为通用模块定义，它是一个在浏览器端模块化开发的规范
• 使用CMD规范进行开发需要使用SeaJS
• Sea.js推荐一个模块一个文件

使用

• 定义模块：requireJS定义了一个函数 define，它是全局变量，用来定义模块

define(id?, dependencies?, factory);

1. id：可选(推荐不写，默认为文件名)，用来定义模块的标识，通常用文件名作为模块id
2. dependencies：可选(推荐不写)，是一个当前模块依赖的模块名称数组(因为CMD推崇依赖就近，因此一般不在此处指定)
3. factory：
   • function(require, exports, module)
   • require(id):require 是一个方法，接受模块标识作为唯一参数，用来获取其他模块提供的接口
   • exports 是一个对象，用来向外提供模块接口
   • module 是一个对象，上面存储了与当前模块相关联的一些属性和方法

• 加载模块

seajs.use([module], callback);

1.[module]，是一个数组，指定了要加载的模块
2.callback，是加载成功之后的回调函数

seajs.use(['./a', './b'], function(a, b) {
  a.doSomething();
  b.doSomething();
});

AMD和CMD

• 模块定义时对依赖的处理不同：
  • AMD推崇依赖前置，在定义模块的时候就要声明其依赖的模块
  • CMD推崇就近依赖，只有在用到某个模块的时候再去require
• 对依赖模块的执行时机处理不同（同第一点，换种表述方式）：
  • AMD依赖前置，js可以方便知道依赖模块是谁，立即加载
  • CMD就近依赖，需要使用把模块变为字符串解析一遍才知道依赖了那些模块
• 模块的加载就是异步的
• SeaJS和RequireJS可以完成相同的功能

r.js

尽管RequireJS和SeaJS解决了模块化开发遇到的问题,但是又出现了新的问题:一个单独的文件就是一个模块,如果网页功能复杂,大量的模块意味着大量的请求,这不仅会增加服务器的压力,而且会影响用户体验(完全加载时间变长).为了解决这个问题,需要使用 r.js 来对模块进行打包和压缩,这能有效减少请求和j文件大小.

练习

项目地址
预览地址
(点击加载需要后端支持,因此预览效果无法实现)