第五篇,理解JS模块化编程思想
模块化编程
·模块化编程是一种处理复杂系统分解成更好的可管理模块的方式,它可以把系统代码划分为职责单一高度解耦切可替代的模块。
·系统中某一部分的变化将如何影响其他部分就会变得显而易见,系统的可维护性更加简单易得。
引入模块化就是为了降低系统的可维护性,把成本降低,把一个复杂的项目解耦成为一个细小单一的模块,这样好维护好开发出现问题也可以快速的锁定。
模块化发展历史
1. 早期函数封装
function foo() { //... }
好处:可以把复杂的应用进行解耦
缺点:污染全局命名空间
2.nameEspace
var obj = {
count: 1,
foo: function() { //... }
}
好处:解决污染全局命名空间
缺点:私有成员暴露,内部状态可被外部改写
3.立即执行函数
(function(root) {
//...
})(this)
好处:避免上面两个问题
缺点:提供逻辑划分,不解决代码本身问题
不使用模块化开发之前我们需要考虑的问题。
1.可维护成本。
2.命名空间。
3.依赖管理。
Commonjs
CommonJS 规范加载模块是同步的,也就是说,加载完成才执行后面的操作,Node.js主要用于服务器编程模块都是存在本地硬盘中加载比较快,所以Node.js采用CommonJS规范。
CommonJS规范分为三部分:module(模块标识)require(模块引用)exports(模块定义)
module 变量在每个模块内部,就代表当前模块;
exports 属性是对外的接口,用于导出当前模块的方法或变量;
require() 用来加载外部模块,读取并执行js文件,返回该模块的exports对象;
Commonjs里的规范每一个文件就是一个模块,它们都会有自己的作用域。,以文件做为一个作用域。但是有一个问题commonjs它这种规范只适用于服务端。因为在服务端它是具有同步去加载模块的条件的,如果换作是在浏览器客户端使用commonjs 这个规范,我们知道在浏览器客户端使用的是ECMA规范,JS天生异步,所以不能去同步加载模块,比如说前面加载的模块造成了阻塞,后面的东西就显示不出来了。所以在客户端这个先天条件下是不适用的。
AMD(require.js)
AMD 也就是异步模块定义。它采用异步的方式去加载模块。通过define方法去定义模块。requrie方法去加载模块。
AMD模块定义
如果这个模块还需要依赖其他模块,那么define函数的第一个参数,必须是一个数组,指名该模块的依赖。
define([tools],function() { //... });
AMD模块的加载
require([module], callback);
第一个参数[module],是一个数组里面的成员就是需要加载的模块;第二个参数callback,则是加载成功之后的回调函数。例如加载math.js。
require([math], function(math) { //... });
require()异步加载math,浏览器不会失去响应;它指定的回调函数,只有前面的模块都加载成功后,才会运行,解决了依赖性的问题。
AMD有一个不足就是依赖前置,如果用不到的模块这样就带来了不必要的性能消耗。
依赖前置? "懒加载的书写方式 用到了谁就加载谁" 异步加载
ES6 module