模块化是指将 一个复杂的系统分解为多个模块以方便编码。
很久以前,开发网页要通过命名空间的方式来组织代码,例如 jQuery 库将它的 API
在了 window .$下,在加载完 jQue町后,其他模块再通过 window ♀去使用 jQuery 。这样做
有很多问题,其中包括:
• 命名空间冲突,两个库可能会使用同一个名称,例如 Zepto ( http: // zeptojs.com )也
被放在 ndow.$ 下:
• 无法合理地管理项目的依赖和版本
• 无法方便地控制依赖的加载顺序。
当项目变大时 ,这种方式将变得难以维护,需要用模块化的思想来组织代码。常用的模块化方案有以下几种:
1、 CommonJS
CommonJS ( http: //www.commonjs.org )是一种被广泛使用的 JavaScript 模块化规范,其核心思想是通过 require 方法来同步加载依赖的其他模块,通过 module.exports导出需要暴露的接口。 CommonJS 规范的流行得益于 Node.js 采用了这种方式,后来这种方式被引入到了网页开发中。
采用 CommonJS 导入及导出的代码如下:
// 导入
const moduleA = require ( ’. / moduleA ’);
// 导出
module .exports = moduleA.someFunc;
CommonJS 的优点在于:
• 代码可复用于 Node.js 环境下井运行,例如做同构应用:
• 通过 Npm 发布的很多第三方模块都采用了 CommonJS 范。
CommonJS 的缺点在于,这样的代码无法直接运行在浏览器环境下,必须通过工具转换成标准 的ES5。
CommonJS 还可以细分为 CommonJSl 和CommonJS2 ,区别在于 CommonJSl 只能通过exports . XX = XX 的方式导出,而 CommonJS2 CommonJSl 基础上加入了 module.exports = XX 的导出方式。 CommonJS 通常指 CommonJS2。
2、 AMD
AMD ( https://en.wikipedia.org/wiki/ Asynchronous_ module_ definition )也是 一种JavaScript模块化规范,与 CommonJS 最大的不同在于,它采用了异步的方式去加载依赖的模块。 AMD规范主要用于解决针对浏览器环境的模块化问题,最具代表性的实现是 requirejs (http:// requirejs. org)。
采用 AMD 导入及导出的代码如下:
// 定义 个模块
de fine (’module ’,[’dep ’] , function (dep) {
return exports;
});
//导入和使用
require ( [’module ’] , function (module) {
});
AMD 的优点在于:
• 可在不转换代码的情况下直接在浏览器中运行;
• 可异步加载依赖:
• 可并行加载多个依赖:
• 代码可运行在浏览器环境和 node.js 环境下。
AMD 的缺点在于 JavaScript 运行环境没有原生支持 AMD, 需要先导入实现了 AMD 的库后才能正常使用。
3、ES6 模块化
ES6 模块化是国际标准化组织 ECMA 提出的 JavaScript 模块化规范,它在语言层面上实现了模块化。浏览器厂商和 Node.js 都宣布要原生支持该规范 它将逐渐取代 CommonJS和AMD 规范,成为浏览器和服务器通用的模块解决方案。
采用 ES6 模块化导入及导出的代码如下:
//导
import { readFile } from ’ fs ’;
import React from ’ react ’ ;
//导出
export function hello {) { } ;
export default {
// ...
}
ES6 模块虽然是终极模块化方案,但它的缺点在于目前无法直接运行在大部分 JavaScript运行环境下,必须通过工具转换成标准的 ES5 后才能正常运行。
4、样式文件中的模块化
除了 JavaScript 开始进行模块化改造,前端开发里的样式文件也支持模块化。以 scss为例,将 些常用的样式片段放进 个通用的文件里,再在另 个文件里通过@ import 语句导入和使用这些样式片段:
//uitil.scss 文件
//定义样式片段
@mixin center {
//水平坚直居中
position: absolute;
left: 50%;
top : 50%;
transform : translate( -50% ,-50% );
}
//main.scss 文件
//导入和使用 util.scss 中定义的样式片段
@import "until";
#box{
@include center;
}