AngularJS形容了十年JS却休亮模块化为何物?

模块化这个题目绝不同一开头即在,WWW刚刚问世之时候,html,JavaScript,CSS(JS和CSS都是后来以网景被引进浏览器的)都是绝简单的是,不需模块化。

模块化的需要是界之后果,当web page进化到web
application,浏览器端处理的逻辑更是复杂,展现的体裁和卡通越来多,对于工程的要求啊尽管越发强。于是模块化的需求也不怕来了。模块化的意义:

  • 组件的复用,降低开发成本和保障本
  • 组件单独开发,方便分工合作
  • 模块化遵循标准,方便自动化依赖管理,代码优化,部署

JavaScript长久以来被当是简单的脚本语言,实际上情况已经来来扭转,在新型版本的ECMA-262(ES6)文档中强调JavaScript是通用编程语言而未是脚本语言。脚本语言,比如shell并无是为此来形成复杂功能的,只是用来举行片自动化控制,是不需模块化的。而用于构建复杂系统通用编程语言(比如Java)一般还出模块的兑现。


1.模块化标准

ES6之前,JavaScript并无原生的模块机制,好以JavaScript非常灵活,有特别多种写法可以用代码天然隔离,起至模块化的效能:

//define
var modules = {}  
modules.mod1 = {  
    foo : function(){...},
    bar : function(){...}
    ...
}
//call
modules.mod1.foo()  

在客户端这种方法为主是十足用之,然而问题依然有:你无法管理依赖,所有的代码都必须load到外存中,需要什么模块必须由人工处理。分模块是工程化的究竟,也是理所当然发展的结果,自然发出多品。很显著,模块之间相依赖需要编制模块的当儿照一定之正经。现存的正统还当真不掉,不亮堂ES6
能否终结这会混战:

  • AMD
  • CMD
  • closure
  • CommonJS
  • ES6

AMD和CMD分别是requireJS和seaJS定义之业内。使用纯原生的ES5语法意味者其只得使闭包,书写和读书都大奇幻。值得一提的凡AngularJS也使用类似之方,以至于Angular的撰稿人们还受不了,决定以AngularJS
2
使用初的言语AtScript,前端轮子太多,又造了一个,好以这轮子造之比较好,兼容ES6
TypeScript规范,扯的远矣,看看AMD长得啥样:
AMD:

define(['./a', './b'], function(a, b) {  
    ...
})

Closure是google出品的前端工具,Closure提供了相同多样工具和仓库,谷歌自己之几近只项目还是运用Closure开发的。closure
compiler通过模块间依赖之宣示将有被依的文件包到同,而且Closure的同一不胜优势是如采用破坏性压缩(ADVANCED)压缩率极高。

//文件A
goog.provide('module1')  
com.foo.bar = {  
 ...
}
 ....

//文件B
goog.require('module1')  
var a = com.foo.bar;  

然而Closure并无完善,不同之文件共享同一个大局对象,所以您只能这么形容
a.b.c=…。

CommonJS是Node.js使用的模块化标准。Node.js对于前端开发者来说不仅可以提供一个Server,还是一个到家的开销平台,在Node上运Grunt/gulp构建web项目是桩特别爽的事务。Node的模块化声明的法与Closure类似,只是更,天然隔离了命名空间。上面的代码如果利用CommonJS的模块化规范好如此形容:

//文件A
module.exports = {...}  
....

//文件B
var a = require('./foo/bar')

browserify让以CommonJS模块化规范之代码可以运行在客户端上。


2.静态加载与动态加载

于看ES6之前我们事先押模块加载的有数种植艺术:

静态加载:在编译阶段进行,把富有需要的依打包及一个文件中
动态加载:在运作时加载依赖
AMD标准是动态加载的代表,而CommonJS是静态加载的意味。AMD的目的是故当浏览器上,所以是异步加载的。而NodeJS是运作于服务器上之,同步加载的办法一目了然还易于为人收受,所以用了CommonJS。同样的道理,如果静态加载,那即便采取并的加载方式,如果动态加载就非得用异步的加载方式。

那ES6用何种加载机制?

ES6既要就此简易的声明方式来就静态加载,又无甘于舍弃动态加载的风味,而及时简单栽方法几乎未容许略的同时落实,所以ES6提供了点儿种独立的模块加载方法。

2.1 声明的点子

import {foo} from module1  

2.2 通过System.import API的方式

System.import('some_module')  
  .then(some_module => {
    // Use some_module
  })
  .catch(error => {
    ...
});

又看下export的语法,与CommonJS很像,只不过没有了module这个目标,而一直调用export。
可以export任何一个 函数,变量,对象

//expt.js
export function abc(){}//export 一个命名的function  
export default function(){} //export default function  
export num=123 //export 一个数值  
export obj={}  
export { obj as default };

//import
import expt from 'expt'//default export  
import {default as myModule} from 'expt' //rename  
import {abc,num,obj} from 'expt' 

再度多细节可以关押就篇稿子:http://www.2ality.com/2014/09/es6-modules-final.html

手上来拘禁,使用预编译的方式显然要好于使用动态加载,浏览器对ES6告知法支持还蛮不同,如果采取动态加载ES6,在浏览器端要做ES6暨ES5的翻工作,这个明显是还低效的。但是随着浏览器对ES6支持加强,尤其是浏览器实现了动态加载API后,动态加载的优势就是会呈现:

  • 重复通畅的用户体验,动态加载可以兑现类似lazyload的加载方式,将download的时分散
  • 又简单之档次,无需预编译,项目方可掉配置很多工具
  • HTTP/2的推广又倾向于以多独稍的要,适合动态加载

3.实践

如现在使ES6,可以挑选动态加载模块system.js
或者browserify的预编译方法。

以system.js+babel动态加载依赖。system.js
是ES6动态模块加载的一个实现。写了一个小DEMO:

品类初始化

bower install babel system.js --save 

index.html

...
<script src="/bower_components/system.js/dist/system.js"></script>

<script>
System.config({
    baseURL : "/scripts",
    transpiler : 'babel',
    map : {
    babel:'/bower_components/babel/browser.js'

    }
  }
)

System.import('main.js').then(function(m){
    m.default.sayHello()
})

</script>

...

main.js

export default {  
sayHello : function(){
        console.log('hello')
    }
}

类型的地方在:
https://github.com/stackOverMind/demo-system.js

使用gulp+browserify+babel预编译。gulp是一个Node.js平台上的职责管理平台。预编译要做过多布局,非常繁琐,推荐用yeoman来生成项目骨架。比如用generator-es6-webapp。

转非常简单,在路目录中施行

yo es6-webapp  

欠依赖之成为安装依赖就哼。


4.其它,关于前端化趋势

ES6模块化意味着什么?

还强有力的前端,Web技术完全前更换。HTML5的开拓进取与少数优秀浏览器的支撑给web技术完全前移,以前像渲染这种工作在后端进行是由浏览器薄弱,且发出老IE这种拖延后腿捣乱的健儿。

简化编程模型,人工管理JS依赖和将大半个JS打包这种工作得免需了,而相当WebComponents标准,开发Web将不再依靠模板引擎以及预编译引擎。

前端化还有更耐人寻味的熏陶–在过去浏览器是个器AngularJS,现在浏览器是单重要的工具,在未来浏览器就用户唯一的操作系统。

本文非原创,转载自:
作者:肖光宇
野狗科技联合创始人,先后在猫扑、百度、搜狗任职,爱折腾之前端工程师。
野狗官博:https://blog.wilddog.com/
野狗官网:https://www.wilddog.com/
公众订阅号:wilddogbaas

相关文章