前端模块化——CommonJS、AMD、CMD、ES6规范
前言
随着技术的发展，各种前端库层出不穷，前端代码日益膨胀。如果不对前端代码加以模块化规范去管理，维护将变得异常困难。本文的主要内容是理解什么是模块化、为什么要模块化、模块化的优缺点以及当下最流行的AMD、CMD、CommonJS、ES6规范。本文旨在用通俗易懂的语言介绍抽象的概念，希望对大家有所帮助。
什么是模块化？
什么是模块？
对于一个复杂的程序，将其按照一定的规范封装成几个文件块，每一块向外暴露一些接口，块的内部数据是私有的，块与块之间通过接口通信。这个过程称为模块化，而文件块称为模块。
模块化的前世今生
- 模仿命名空间进行简单对象封装
这种方法减少了全局变量的污染，减少了命名冲突。但与此同时，这种方法的问题是，由于是使用简单对象封装，对象外部能直接修改对象的属性，数据安全性不好。
let namespace={data:'123456',foo(){console.log(`ns foo ${data}`);},bar(){console.log(`ns bar ${data}`);}
}
namespace.data='789456';
namespace.foo(); //ns foo 789456
namespace.bar(); //ns bar 789456
- 通过闭包进行封装
这种方法在减少全局变量冲突的同时还保证了私有数据的安全性，闭包外部只能通过暴露的接口操作私有数据。
那么如果当前模块依赖另一个模块怎么办？答案是将被依赖的模块作为参数传入。这种方法是实现现代模块化的基础。
// module.js文件
(function(window, $) {let data = '123456';function foo() {console.log(`mo foo ${data}`);$('body').css('background', 'black');}function bar() {console.log(`mo bar ${data}`);other(); //内部调用}function other() {console.log(`mo other ${data}`);}//暴露行为window.mo = { foo, bar };
})(window, jQuery);
// index.html文件
<script type='text/javascript' src='jquery'>script>
<script type='text/javascript' src='module.js'>script>
<script type='text/javascript'>mo.foo();
script>
模块化的好处
- 减少全局变量污染
- 提高了可复用性
- 代码更易维护
- 模块分离可以实现按需加载
- 一定程度上减少了http请求的数量
模块化有着如此独特的好处，那么我们没有理由不对我们的代码进行模块化管理，下面我们来看一下四种主流的模块化规范，分别是CommonJS、AMD、CMD和ES6规范。
四种主流的模块化规范
CommonJS
1.概述
采用CommonJS模块规范的应用，每个文件就是一个模块，具有自己的私有作用域，不会污染全局作用域。模块的加载是同步的而且可以加载多次，但在第一次加载后就会被缓存，后面再次被加载时会直接从缓存中读取。CommonJS主要用于服务器Node.js编程。
2.module对象
每个模块内部都有一个module对象代表当前模块。module模块具有以下几个属性：
module.id:模块的标识符，通常是绝对路径的模块文件名。module.filename:模块的文件名。module.loaded:一个布尔值，表示模块是否已经完成加载。module.parent:一个数组，表示依赖该模块的模块。module.children:一个数组，表示该模块依赖的模块。module.exports:一个对象，表示模块向外暴露的内容。
3.module.exports属性
我们已经知道，module.exports属性是模块暴露的接口，加载某个模块时就是加载该模块的module.exports属性。所以module.exports属性是CommonJS模块化规范的核心。
4.exports变量
每个module都拥有一个exports变量，它指向module.exports属性，是module.exports的引用，设置这个变量是为了能够给module.exports添加属性，使用该变量添加的属性对调用该模块的模块可见。
const exports=module.exports; // CommonJS规范在每个module前隐式做了这个赋值
5.基本语法
- 暴露模块
module.exports=value或者module.xxx=value - 引入模块
require(xxx)，如果引入的模块是第三方模块，那么xxx为模块名。如果引入的模块是自定义模块，那么xxx为文件路径。
6.实战
// module_exports_example.js
let x 本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！