对前端模块化的理解

发表于 | 分类于 | 阅读次数: | 本文总阅读量 次

平时写代码的时候，知道如果导出变量，如何引入变量。可见模块化就在我们的身边，可是为什么前端会引入模块化的概念，以及为什么有同步加载和异步加载呢？

为什么要模块化

在之前的项目中，如果没有模块化的概念，很多变量都有重名或者不小心重新赋值的危险。而且用 script 有可能阻塞 HTML 的下载或者渲染，影响用户体验。

在平时编码中，我们都习惯把一些通用的方法提出来放在一个文件里，哪个地方需要用到就引用，这样能够很好的梳理页面的逻辑，维护代码的成本也降低了不少。所以模块化给我们带来的好处是显而易见的。

  • 分离： 代码需要分离成小块，以便能为人所理解。
  • 可组合性： 在一个文件中编码，被许多其他文件重复使用。这提升了代码库的灵活性。
  • 解决全局变量重名问题
  • 提高复用性

现有的一些模块化方案有以下几种：

  • ES 6 模块
  • Commonjs
  • AMD
  • CMD

下面我就自身的理解对这几种方案做一个对比和总结：

ES6 Module

  • 编译时就能确定模块的依赖关系

ES6 模块遇到 import 命令时，不会去执行模块，而是生成一个引用，等用到的时候，才去模块中取值。因为是动态引用，所以不存在缓存的问题。可以看一下下面的例子：

1
2
3
4
5
6
7
8
9
// util.js
export let env = 'qa';
setTimeout(() => env = 'local', 1000);
// main.js
import {env} from './util';
console.log('env:', env);
setTimeout(() => console.log('new env:', env), 1500);

执行 main.js，会输出下面的结果：

1
2
// env: qa
// new env: local

可以看出 ES6 模块是动态的取值，不会缓存运行的结果。

目前浏览器尚未支持 ES6 模块 ，所以需要使用 babel 转换，大家可以在 Babel 提供的 REPL 在线编译器 中查看编译后的结果。

1
2
3
4
5
6
// es 6
import {add} from './config';
// es 5
'use strict';
var _config = require('./config');

可以看出，最后转换成 require 的方式了。ES6 模块在浏览器和服务器端都可以用，ES6 模块的设计思想是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。

import 命令具有提升效果，会提升到整个模块的头部，首先执行，所以不能把 import 写在表达式里面。这和 ES 6 模块的概念不符合。

CommonJS

  • 用于服务器端
  • 只能在运行时确定
  • 同步加载
  • 模块加载的顺序，按照其在代码中出现的顺序。

node 的模块遵循 CommonJS 规范。在服务器端，依赖是保存在本地硬盘的，所以读取的速度非常快，使用同步加载不会有什么影响。

看一下 CommonJS 的语法：

1
2
3
4
5
6
7
// header.js
module.exports = {
    title: '我是柚子'
};
// main.js
var header = require('./header');

module

这里的 module 代表的是当前模块，它是一个对象，把它打印出来是下面的结果：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
{
Module {
  id: '/Users/yanmeng/2017FE/css-animation/js/b.js',
  exports: { item: 'item' },
  parent:
   Module {
     id: '.',
     exports: {},
     parent: null,
     filename: '/Users/yanmeng/2017FE/css-animation/js/main.js',
     loaded: false,
     children: [ [Circular] ],
     paths:
      [ '/Users/yanmeng/2017FE/css-animation/js/node_modules',
        '/Users/yanmeng/2017FE/css-animation/node_modules',
        '/Users/yanmeng/2017FE/node_modules',
        '/Users/yanmeng/node_modules',
        '/Users/node_modules',
        '/node_modules' ] },
  filename: '/Users/yanmeng/2017FE/css-animation/js/b.js',
  loaded: false,
  children: [],
  paths:
   [ '/Users/yanmeng/2017FE/css-animation/js/node_modules',
     '/Users/yanmeng/2017FE/css-animation/node_modules',
     '/Users/yanmeng/2017FE/node_modules',
     '/Users/yanmeng/node_modules',
     '/Users/node_modules',
     '/node_modules' 
    ] 
}
  • id 是该模块的 id
  • loaded 代表改模块是否加载完毕
  • exports 是一个对象，里面有模块输出的各个接口。

之后调用这个模块的时候，就会从 exports 中取值，即使再执行，也不会再执行改模块，而是从缓存中取值，返回的是第一次运行的结果，除非手动清除缓存。

1
2
3
4
5
6
7
// 删除指定模块的缓存
delete require.cache[moduleName];
// 删除所有模块的缓存
Object.keys(require.cache).forEach(function(key) {
  delete require.cache[key];
})

缓存是根据绝对路径识别模块的，如果同一个模块放在不同的路径下，还是会重新加载这个模块。

require

require 命令第一次执行的时候，会加载并执行整个脚本，然后在内存中生成此脚本返回的 exports 对象。

ES6 模块与 CommonJS 模块的差异

  • CommonJS 模块输出的是一个值的拷贝，ES6 模块输出的是值的引用。
  • CommonJS 模块是运行时加载，ES6 模块是编译时输出接口。

ES6 模块是动态引用，并且不会缓存值。

ES6 模块在对脚本静态分析的时候，遇到 import 就会生成一个只读引用，等到脚本真正执行的时候，再根据这个只读引用，到被加载的那个模块里取值，所以说 ES6 模块是动态引用。
从依赖中引入的模块变量是一个地址引用，是只读的，可以为它新增属性，可是不能重新赋值。

1
2
3
4
5
6
7
8
// lib.js
export let obj = {};
// main.js
import { obj } from './lib';
obj.prop = 123; // OK
obj = {}; // TypeError

import 命令加载 CommonJS 模块

1
2
3
4
5
6
7
// fs.js
module.exports = {
    readfile: 'readfile'
}
// main.js
import {readfile} from 'fs';

上面的写法不对，因为 commonjs 是运行时加载的， es 6 模块是编译时加载的，所以在编译的时候，无法确认readfile 接口。

require 命令加载 ES6 模块

在用 require 命令加载 es6 模块的时候，ES6 模块的所有输出接口，会成为输入对象的属性。

1
2
3
4
5
6
7
8
9
// es.js
let foo = {bar:'my-default'};
export default foo;
foo = null;
// cjs.js
const es_namespace = require('./es');
console.log(es_namespace.default);
// {bar:'my-default'}

AMD

又称异步加载模块（Asynchronous Module Definition）

  • 依赖前置
  • 比较适合浏览器环境
  • 实现 js 文件的异步加载，避免网页失去响应
  • 管理模块之间的依赖性，便于代码的编写和维护
  • 代表库: RequireJS

如果在浏览器环境，就需要在服务端加载模块，那么采用同步加载的方法就会影响用户体验，所以浏览器端一般采用 AMD 规范。

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 // lib.js
　　define('[./util.js]', function(util){
　　    function bar() {
　　        util.log('it is sunshine');
　　    };
　　    return {
　　        bar: bar
　　    };
　　});
　　
// main.js
require(['./lib.js'], function(lib){
    console.log(lib.bar());
})

CMD

  • 依赖就近
  • 需要用到依赖的时候才申明
  • 代表库: Sea.js

Sea.js 实现了这个规范，Sea.js 遇到依赖后只会去下载 JS 文件，并不会执行，而是等到所有被依赖的 JS 脚本都下载完以后，才从头开始执行主逻辑。因此被依赖模块的执行顺序和书写顺序完全一致。

1
2
3
4
5
6
7
8
define(function(require, exports, module) {
    var a = require('./a')
    a.doSomething()
    // ...
    var b = require('./b') 
    b.doSomething()
    // ...
})

本文只是浅显的介绍了一些模块的概念和用法，关于 ES6 模块、 CommonJs 的循环加载和 ES 6 模块和 CommonJs的互相引用，大家可以动手实践一下，会受益匪浅。

参考：

支持原创