总结自网易前端微专业,技术选型课程
前言
上一次我们介绍了在不使用框架的前提下,如何机智的实现模块化,并提供了几种暴露接口和依赖声明的方式,这一次我们来介绍一下各种不同的模块系统以及他们的优缺点。
模块系统
模块系统是民间社区,为了更好的实现模块化,而制作的一种js框架,不同的模块系统有各自的优缺点,并且有它独有的语法规则。
模块系统是主要解决了模块的加载,分析,注入和初始化,而其中最重要的两个方面是模块的分析和注入。
CommonJS规范
CommonJS是为了在非浏览器环境下运行js而制定的一个js规范,而Node.js是这个规范的一个具体实现。
它的语法规则如下:
exports._function = _function;//接口暴露的方式比如在1.js文件中
var _ modelName = require("./1")//文件路径关系
这里的前提是这两个js模块是写在不同的文件中的,这样也更接近与Objective-C或者C语言中引入.h文件的方式。学习过Objective-C开发IOS的朋友都知道,我们将希望暴露的接口声明在.h文件中,私有的接口写在.m文件中,这里只不过我们把接口写在
exports._name = _name;
语句形式中而已。
CommonJS是一个依赖管理成熟并且可靠的规范,并且是运行时支持,模块定义也很简单。并且虽然JS没有文件级别的作用域,但CommonJS在运行时对文件进行了封装,这样在不同文件中定义的全局变量并不会互相影响,保证了全局变量的安全,对于循环依赖也有很好的支持。
但CommonJS也有一个很大的缺陷,这些文件都是同步require的,但在前端使用时,script的引用却是异步的过程,这也就意味着,如果被依赖的文件没有被提前加载进来,后面的文件就无法正常的执行。所以我们在前端使用CommonJS规范时,都要使用一些打包软件来将多个js文件打包到一起去,这样就解决的异步加载的问题。
常用的打包方式有browserify和webpack等,其使用方法也很简单,只需要在终端输入一下指令:
browserify a.js > b.js
这样,a文件中的所有依赖都会被打包到b.js文件中,就可以在浏览器中只引用一个js文件并使用了。
AMD规范
AMD(Asynchronous Module Definition)
AMD规范是天然支持异步环境的一种规范,更加适合前端的开发环境,其语法规则与namespace的定义方式也很相似,如果不知道namespace的朋友可以查看我总结的第一篇文章。
它的语法规则大致如下:
define(["dep.js"], function(dep){
// 模块的内容
return{
_interface: _interface//暴露的接口声明
}
})
AMD同时还支持Simplified CommonJS wrapping,即在Common的语法规则基础上,在外层包裹一层define函数,即
define(function(require, exports){
//CommonJS语法规则写的模块体
})
这样,我们的依赖注入是成了一段js脚本,获取依赖列表利用的是function.toString()打印函数体,然后使用正则表达式,获取到依赖注入的信息。
同时,AMD将要支持Loader Plugins,即加载别的组件。
我们知道,完整组件 = 结构 + 逻辑 + 样式列表,引入了结构和样式列表之后,模块就可以变成一个完整的组件。
define([".js",".html",".css"], function(Regular, templeate){
//模块内容
Component = Regular.extend({
template: template//字符串
})
})
AMD和CommonJS都是社区的产物,AMD更偏向于异步IO环境,适合浏览器环境,并且与JS版本无关,支持CommonJS的书写方式。
但是库级别的支持无法做到选择性的加载,即在if-else语句中选择加载项,AMD也无法处理循环依赖的问题。
ES6 module
ES6,即ECMAScript 6/ECMAScript 2015,是由Ecma国际制定的新一版规范,在2015年6月17日正式发布,这就使得JacaScript原生支持模块化。从过去浏览器对ES规范的实现周期来看,想要浏览器完全支持ES6的所有新功能,需要至少一年的时间。想要在浏览器中使用ES6的功能,我们还需要一段时间的等待。
export{_interface}//语言级别的接口暴露方式
import{_interface} from './a';//语言级别的依赖注入
这里export和import...from...已经成为了JS的关键字,并且也有了class关键字。
ES6是真正的官方规范,是未来的模块标准,在语言级别支持了模块化,适应所有js运行时,包括浏览器段,同样可以处理循环依赖。
但ES6还没有达到稳定级别,在大多数浏览器中都无法兼容,使用仍然受到很大的限制。
如果想要动手测试一下以上介绍的各种规范,我们可以使用一款叫做System.js的框架,它支持加载AMD,CommonJS和ES6,并且支持Transpiler,即可支持任何资源。github传送门