杂项-前端模块化
模块化是指把一个复杂系统分解到多个模块以方便编码. 通常来说, 一个文件就是一个模块, 有自己的作用域, 只向外暴露特定的变量和函数. 目前流行的JS模块化规范主要有: CommonJS, AMD, CMD以及ES6的模块系统
CommonJS 和 Node.js
NodeJS是CommonJS规范的主要实践者, 它有四个重要的环境变量为模块化的实现提供支持: module, exports, require, global.
实际的使用时, 用module.exports定义当前模块对外输出的接口(不推荐直接使用export), 用require加载模块.
// 定义模块math.js
var basicNum = 0;
function add(a, b) {
return a + b;
}
module.exports = { //在这里写上需要向外暴露的函数、变量
add: add,
basicNum: basicNum
}
/** 必须加./路径，不加的话只会去node_modules文件找 **/
// 引用自定义的模块时，参数包含路径，可省略.js
var math = require('./math');
math.add(2, 5);
// 引用核心模块时，不需要带路径
var http = require('http');
http.createService(...).listen(3000);
CommonJS用同步的方式加载模式. 在服务端, 模块文件都存放在本地磁盘, 读取非常的快速, 所以这样做是不会有问题的. 但是在浏览器daunt, 是通过网络加载的, 因此更合理的方案是使用异步加载.
更多NodeJS实现commonJS的原理可以参考 [Node: 模块机制]
AMD 和 require.js
AMD规范采用异步方式加载模块. 模块的加载不影响它后面语句的运行. 所有依赖这个模块的语句, 都定义在一个回调函数中, 等到加载完成之后, 这个回调函数才会运行.
/** 网页中引入require.js及main.js **/
<script src="js/require.js" data-main="js/main"></script>
<script>
/** main.js 入口文件/主模块 **/
// 首先用config()指定各模块路径和引用名
require.config({
baseUrl: "js/lib",
paths: {
"jquery": "jquery.min", //实际路径为js/lib/jquery.min.js
"underscore": "underscore.min",
}
});
// 执行基本操作
require(["jquery","underscore"],function($,_){
// some code here
});
</script>
引用模块的时候, 我们将模块名放在[]中作为require的第一参数; 如果我们定义的模块本省也依赖其他模块, 那就需要将他们放在[]中作为define()的第一参数.
// 定义math.js模块
define(function () {
var basicNum = 0;
var add = function (x, y) {
return x + y;
};
return {
add: add,
basicNum :basicNum
};
});
// 定义一个依赖underscore.js的模块
define(['underscore'],function(_){
var classify = function(list){
_.countBy(list,function(num){
return num > 30 ? 'old' : 'young';
})
};
return {
classify :classify
};
})
// 引用模块，将模块放在[]内
require(['jquery', 'math'],function($, math){
var sum = math.add(10,20);
$("#sum").html(sum);
});
AMD的优点在于:
- 可以在不转换代码的情况下直接在浏览器中运行
- 可以异步加载依赖
- 可以并行加载多个依赖
- 代码可运行在浏览器环境和node环境下
CMD 和 sea.js
AMD的实现者require.js在申明依赖的模块时，会在第一时间加载并执行模块内的代码：
define(["a", "b", "c", "d", "e", "f"], function(a, b, c, d, e, f) {
// 等于在最前面声明并初始化了要用到的所有模块
if (false) {
// 即便没用到某个模块 b，但 b 还是提前执行了。**这就CMD要优化的地方**
b.foo()
}
});
CMD是另一种JS模块化的方案, 它与AMD比较类似, 不同点在于: AMD推崇依赖前置, 提前执行, CMD推崇依赖就近, 延迟执行.
/** AMD写法 **/
define(["a", "b", "c", "d", "e", "f"], function(a, b, c, d, e, f) {
// 等于在最前面声明并初始化了要用到的所有模块
a.doSomething();
if (false) {
// 即便没用到某个模块 b，但 b 还是提前执行了
b.doSomething()
}
});
/** CMD写法 **/
define(function(require, exports, module) {
var a = require('./a'); //在需要时申明
a.doSomething();
if (false) {
var b = require('./b');
b.doSomething();
}
});
/** sea.js **/
// 定义模块 math.js
define(function(require, exports, module) {
var $ = require('jquery.js');
var add = function(a,b){
return a+b;
}
exports.add = add;
});
// 加载模块
seajs.use(['math.js'], function(math){
var sum = math.add(1+2);
});
简易实现
/**
* 定义注册器
* @param {*} p 模块的路径
*/
function require(p) {
// 处理模块路径
var path = require.resolve(p);
// 获取模块的具体方法
var mod = require.modules[path];
// 如果不存在, 则抛出一个异常
if (!mod) throw new Error('failed to require "' + p + '"');
// 如果模块没有exports, 则手动注册一个exports
if (!mod.exports) {
mod.exports = {};
// 调用mod方法, 传入三个参数: 模块本身, 模块的exports,
mod.call(mod.exports, mod, mod.exports, require.relative(path));
}
return mod.exports;
}
// 保存了所有注册的模块
require.modules = {};
// 处理模块的路径
require.resolve = function (path) {
var orig = path;
var reg = path + '.js';
var index = path + '/index.js';
return (
// 如果'模块.js'存在, 则返回'模块.js'
(require.modules[reg] && reg) ||
// 如果'模块/index.js'存在, 则返回'模块/index.js'
(require.modules[index] && index) ||
// 直接返回'模块'
orig
);
};
/**
* 注册模块
* @param {*} path 模块的路径
* @param {*} fn 模块的方法
*/
require.register = function (path, fn) {
require.modules[path] = fn;
};
/**
*
* @param {*} parent 当前模块的路径
*/
require.relative = function (parent) {
/**
* 返回一个require函数
* @param {*} p 模块路径
*/
return function (p) {
// 如果不是`.`开头的路径直接调用`require`
if ('.' != p.charAt(0)) return require(p);
// 分割当前模块的路径
var path = parent.split('/');
// 分割现在模块的路径
var segs = p.split('/');
path.pop();
// 合并两个模块的路径
for (var i = 0; i < segs.length; i++) {
var seg = segs[i];
if ('..' == seg) path.pop();
else if ('.' != seg) path.push(seg);
}
// 调用模块
return require(path.join('/'));
};
};
// 使用方式
// 注册模块`moduleId`
require.register('moduleId', function (module, exports, require) {
// Module code goes here
});
// 加载模块
var result = require('moduleId');
ES6 Module
ES6 module 在语言层面上实现了模块化. 浏览器和原生node都宣布要原生支持该规范.
// 导入
import { readFile } from 'fs';
import React from 'react';
// 导出
export function hello() {};
export default {
// ...
};
ES6的模块不是对象, import命令会被JS引擎进行静态的分析, 在编译时就引入模块代码, 而不是在代码运行时加载, 所以无法实现条件加载. 这是有意为之的, 目的就是为了更好的支持静态分析.
ES6 模块的特点:
- 自动采用严格模式
import是只读的, 不能赋值, 类似于constexport/import提升:import/export必须位于模块顶级.
Style 中的模块化
以Sass为例:
// util.scss 文件
// 定义样式片段
@mixin center {
// 水平竖直居中
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
// main.scss 文件
// 导入和使用 util.scss 中定义的样式片段
@import "util";
#box{
@include center;
}
常见问题
commonjs和esm的区别
CommonJS最初被应用在Nodejs中, 成为Nodejs的模块规范. 运行在浏览器端, 在esm出来之前是AMD的. 在ES6之后, 引入了新的ESM规范. 目前我们在webpack中使用的export和import, 会经过Babel转换为CommonJS规范.
差别在于:
- CommonJS模块输出的是一个值的拷贝, ES6模块输出的是值的引用
- CommonJS是运行时加载, ES6模块是编译时输出接口
- CommonJS是单个值的导出, ESM可以导出多个
- CommonJS是动态语法, 可以写在判断中, ESM静态语法, 只能写在顶层
- CommonJS的this是当前模块, ESM的this是undefiend