[JavaScript]技术选型:模块化与框架(二)

总自网易前端微专业,技术选型课程

前言

达到同一不成我们介绍了以无下框架的前提下,如何机智的贯彻模块化,并提供了几栽暴露接口和倚重声明的不二法门,这同样糟我们来介绍一下各种不同之模块系统与他们的利害。

模块系统

模块系统是民间社区,为了更好之兑现模块化,而做的如出一辙栽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传送门