JavaScript模块化编程那些事

概述

模块化是将系统分离成独立功能的方法,这样我们可以按需加载功能。

往往当一个项目开发得越来越复杂时,可能会遇到这些些问题,例如:命名冲突、文件依赖等。

总结:在生产的角度,模块化开发是一种生产方式,这种方式生产效率高,维护成本低。

模块化开发演变

全局函数

在早期的开发过程中会将重复的代码封装搭到函数中,再将一系列的函数放到一个文件中。这种方式存在一些问题:存在污染全局变量、看不出相互的直接关系。这种方式并不能解决根本的问题:命名冲突和文件依赖。

对象命名空间

通过对象命名空间的形式,从某种程度上解决了变量命名冲突的问题,但是并不能从根本上解决命名冲突。存在问题:内部状态可被外部改写、命名空间越来越长。

私有公有成员分离

利用此种方式将函数包装成一个独立的作用域,私有空间的变量和函数不会影响到全局作用域。这种方式相当于现在写插件的形式,解决了变量命名冲突的问题,但是没有解决降低开发复杂度的问题。

CommonJS

CommonJS规范加载模块是同步的,也就是说,加载完成才执行后面的操作。

CommonJS规范分为三部分:module(模块标识)、require(模块引用)、exports(模块定义)。 module变量在每个模块内部,就代表当前模块; exports属性是对外的接口,用于导出当前模块的方法或变量;require()用来加载外部模块,读取并执行js文件,返回该模块的exports对象。

AMD(reuire.js)

AMD也就是异步模块定义,它采用异步方式加载模块,主要针对的是浏览器端的模块规范。它通过define方法去定义模块,require方法去加载模块。

AMD定义:如果这个模块还需要依赖其他模块,那么define函数的第一个参数,必须是一个数组,指明该模块的依赖。

require(['modules'], callback);

第一个参数['modules'],是一个数组,里面的成员就是需要加载的模块;第二个参数callback,则是加载成功之后的回调函数。

CMD(sea.js)

CMD即通用模块定义,CMD规范是国内发展出来的;正如AMD有require.js,CMD有个浏览器的实现sea.js。sea.js要解决的问题和require.js一样,只不过在模块定义方式和模块加载方式上有所不同。

define(function (require, exports, module) {  
  // 模块代码
})

require是可以把其他模块导入进来的一个参数;exports可以把模块内的一些属性和方法导出;module是一个对象,上面存储了与当前模块相关联的一些属性和方法。CMD是按需加载,推崇依赖就近,延迟执行。文件是提前加载好的,只有在require的时候才去执行文件;

ES6 Module

ES6模块化汲取CommonJS和AMD的优点,语法简洁,支持异步加载,未来可以成为浏览器和服务器通用的模块化解决方案。
ES6中模块的定义:ES6新增了两个关键字:export和import。export用于把模块里的内容暴露出来,import用于引入模块提供的功能。
ES6中模块的加载,import加载模块:

import{bar,foo,test,obj} from './lib'foo();

注意:可以使用export default命令,为模块指定默认输出,一个模块只能有一个默认输出,所以export default只能使用一次。

ES6模块运行机制:ES6模块是动态引用,如果使用import从一个模块加载变量(即import foo from 'foo'),变量不会被缓存,而是成为一个指向被加载模块的引用。等脚本执行时,根据只读引用,到被加载的那个模块中去取值。


一郭鲜

你可能感兴趣的:(JavaScript模块化编程那些事)