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

前言

上一遍我们介绍了在不利用框架的前提下,怎么样机智的兑现模块化,并提供了二种透露接口和倚重讲明的点子,这五次大家来介绍一下各样不同的模块系统以及她们的优缺点。

模块系统

模块系统是民间社区,为了更好的实现模块化,而创制的一种js框架,不同的模块系统有各自的优缺点,并且有它独有的语法规则。
模块系统是生死攸关解决了模块的加载,分析,注入和初叶化,而其中最重点的四个方面是模块的辨析和注入。

AMD规范

AMD(Asynchronous Module Definition)
Intel规范是自然援助异步环境的一种标准,更加符合前端的开发条件,其语法规则与namespace的概念形式也很一般,假使不知道namespace的恋人可以查看自己总计的第一篇随笔。
它的语法规则大约如下:

define(["dep.js"], function(dep){
  // 模块的内容
  return{
  _interface: _interface//暴露的接口声明
  }
})

Intel同时还帮忙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都是社区的产物,Intel更偏向于异步IO环境,适合浏览器环境,并且与JS版本无关,协助CommonJS的书写情势。
只是库级其它协理不可以形成采取性的加载,即在if-else语句中挑选加载项,AMD也不知道该如何是好处理循环倚重的题材。

ES6 module

ES6,即ECMAScript 6/ECMAScript
2015,是由Ecma国际制定的新一版正式,在2015年2月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传送门

小结自和讯前端微专业,技术选型课程

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文件并采用了。