盗墓笔记小说,最好看的小说排行,完美世界辰东

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案

讓Angular1.x跟上時(shí)代的步伐

Worktile 的前端構(gòu)建之路

2013年，那時(shí)候 Angular.js 才剛剛興起，我們大膽了選擇了當(dāng)時(shí)看來(lái)比較新的技術(shù)，經(jīng)過(guò) 3年的技術(shù)積累，Worktile 團(tuán)隊(duì)基本上把 Angular 1.x 可能踩得坑都踩了一遍，我們自己也寫了一些關(guān)于 Angular.js 的插件，可以說(shuō)團(tuán)隊(duì)目前采用 Angular.js 開(kāi)發(fā)項(xiàng)目沒(méi)有太大的技術(shù)難點(diǎn)。

Worktile 剛開(kāi)始的時(shí)候是自己用 Node.js 寫腳本進(jìn)行合并和壓縮 JS 代碼，現(xiàn)在想想當(dāng)時(shí)是多么的原始，后來(lái)切換到 Grunt 工具進(jìn)行簡(jiǎn)單的合并壓縮，編譯 LESS，使用 Grunt 一段時(shí)間之后發(fā)現(xiàn)其打包的速度實(shí)在太慢，當(dāng)做企業(yè)版的時(shí)候就切換到 Gulp 上了，在速度上的確有質(zhì)的飛躍，使用 Gulp 的時(shí)候我們做了稍微復(fù)雜一點(diǎn)的任務(wù)構(gòu)建，開(kāi)發(fā)環(huán)境自動(dòng)監(jiān)控 LESS 代碼變化等等，目前一直使用的是 Gulp，我們也在不停的跟隨時(shí)代的變化，保持自己永不落后，所以在一些邊緣項(xiàng)目上也會(huì)使用最近比較火的框架、類庫(kù)或者工具。

Angular 1.x 使用模塊化

大家都知道 Angular 1.x 有自己的一套模塊機(jī)制，定義一個(gè)模塊如下：

 
 
  
  angular.module("module.abc", ["module.def"]);

上面的代碼定義了一個(gè) "module.abc" 模塊，并且 "module.abc" 依賴 "module.def" 模塊，然而這個(gè)模塊機(jī)制很容易寫出有文件順序依賴的代碼，比如 a.js 文件定義了一個(gè) "module.abc" 模塊，b.js 沒(méi)有定義自己的模塊，而是直接使用了 "module.abc"，這樣 b.js 必須在 a.js 加載之后才能工作，如果有了文件的先后依賴，合并的時(shí)候就需要手動(dòng)維護(hù)一個(gè)順序列表。所以說(shuō) Angular.js 的模塊機(jī)制沒(méi)有解決JS文件依賴關(guān)系和JS文件異步加載的問(wèn)題。

現(xiàn)在大家談起前端的模塊化，之前很多選擇讓人眼花繚亂，比如 CommonJS，AMD(Require.js)，CMD(Sea.js)，UMD，從未來(lái)標(biāo)準(zhǔn)的角度*** ES6 Modules，不要為我為什么，關(guān)于如果在Angular 1.x 使用 ES6 的 Modules，網(wǎng)上有很多文章介紹怎么使用，推薦一篇前端大叔徐飛的博客，這里就不詳細(xì)的一一展開(kāi)了。

談到這里大家或許會(huì)問(wèn)：如果使用 Require.js ，在開(kāi)發(fā)階段是每個(gè) JS 都動(dòng)態(tài)加載的，生產(chǎn)環(huán)境根據(jù) r.js 這樣的工具合并成一個(gè)或者多個(gè)JS來(lái)提高前端性能，如果使用 ES6 的Modules，開(kāi)發(fā)環(huán)境和生產(chǎn)環(huán)境是怎么樣的呢?

在生產(chǎn)環(huán)境每個(gè)js文件都動(dòng)態(tài)加載顯然不是最合適，中小型項(xiàng)目基本不需要?jiǎng)討B(tài)加載，我覺(jué)得合并成1個(gè)或者多個(gè)js是***的解決方案。

那怎么合并 ES6 Modules 的JS，這類的工具很多很多，包括下面要介紹的 Webpack(目前1.x版本還不能原生支持，需要借助 Babel 工具)，基本上開(kāi)發(fā)環(huán)境也使用合并之后的 Bundle JS，調(diào)試使用 Source Map 工具，如果你開(kāi)發(fā)環(huán)境就不想使用合并之后的，systemjs也是個(gè)不錯(cuò)的選擇。

ES2015(ES6)

如果可以，盡快使用，因?yàn)樗?Javascript 未來(lái)的標(biāo)準(zhǔn)，作為一個(gè)前端技術(shù)人員，如果不能與時(shí)俱進(jìn)那就只能等著淘汰，ES 2015 有著現(xiàn)代語(yǔ)言的語(yǔ)法，解決了 Javascript 語(yǔ)言層面上的很多問(wèn)題，有 Class，Modules，Arrows，Template Strings 等等一系列的新特性，用了之后腰不酸腿不痛(請(qǐng)一定要相信我)，最終的目的只有一個(gè)：提高生產(chǎn)力，讓代碼更簡(jiǎn)單，當(dāng)然現(xiàn)在很多瀏覽器還不能原生支持 ES2015，沒(méi)關(guān)系，有Babel在，生產(chǎn)環(huán)境轉(zhuǎn)換好成 ES5 不是問(wèn)題。

其實(shí) ES 2015 的新特性數(shù)也能數(shù)出來(lái)，稍微花上 1 天就全學(xué)會(huì)了，推薦2個(gè)地址：

https://babeljs.io/docs/learn...
https://github.com/lukehoban/...

Webpack

Webpack 是最近1-2年來(lái)非常火的構(gòu)建工具，如果說(shuō)前端工程師沒(méi)有聽(tīng)過(guò)或者嘗試下 Webpack ，簡(jiǎn)直會(huì)被嫌棄，當(dāng)然工具之所以火當(dāng)然有他的道理，在我看來(lái)他能解決很多模塊化和工程化的問(wèn)題，提高生產(chǎn)力，如果你還不知道 Webpack 是什么，趕緊花幾個(gè)小時(shí)去了解下，了解之后不要不了了之，結(jié)合自己的項(xiàng)目，切換到 Webpack 是否可行，如果可行，接下來(lái)怎么***過(guò)渡，即使目前不用，下一個(gè)項(xiàng)目開(kāi)始的時(shí)候試著嘗試下。

Webpack 的優(yōu)點(diǎn)：

支持CommonJS 和AMD 模塊，ES 2015 Modules 在 2.0 中將會(huì)原生支持，這個(gè)問(wèn)題不大，因?yàn)槲覀兛隙ㄒ褂?Babel 的;
模塊加載器，能夠處理一切資源，包括 CSS，LESS，Image，JSON 等等，比如使用 babel-loader 加載器讓我們能夠用ES6的語(yǔ)法來(lái)編寫代碼;
Code Spliting，可以通過(guò)配置打包成多個(gè)文件，有效的利用瀏覽器的緩存功能提升性能，并且能自動(dòng)抽取多個(gè)入口公用的代碼;

插件機(jī)制提供了更多擴(kuò)展功能，彌補(bǔ) Loaders 的不足，比如自帶的 UglifyJsPlugin 壓縮代碼。

Angular 1.x + ES2015 + Webpack Seed

說(shuō)了那么多，我都有點(diǎn)煩了，直接上代碼 https://github.com/why520craz...

這是我寫的一個(gè)怎么使用 Angular 1.x + ES2015 + Webpack 的一個(gè)示例項(xiàng)目，基本上是我目前水平覺(jué)得比較好的組織形式了，里面涵蓋了：

使用 ES6 Modules 進(jìn)行 Angular 1.x 的模塊化開(kāi)發(fā);
使用全組件化開(kāi)發(fā)一個(gè)簡(jiǎn)單的 Angular 1.x 單頁(yè)項(xiàng)目;
使用 Webpack 合并 JS，CSS，Image 等一切靜態(tài)資源;
包管理工具使用 NPM，任務(wù)的啟動(dòng)腳本使用 NPM Scripts;
使用 Webpack 的 CommonsChunkPlugin 將引用的第三方類庫(kù)單獨(dú)打包成一個(gè)獨(dú)立的 bundle，并把多個(gè)入口公用的JS抽取出獨(dú)立的 bundle;
使用 HtmlWebpackPlugin 插件生成入口的HTML文件，并把打包之后的JS和CSS引入到HTML中，不需要手動(dòng)添加 scripts 標(biāo)簽和 style link;
使用 ExtractTextPlugin 插件把 CSS 抽取成獨(dú)立的文件，當(dāng)然你也可以不這么做，直接放在 JS 中;
使用 postcss 處理樣式的兼容性問(wèn)題，autoprefixer 自動(dòng)追加前綴等。

Webpack 還有一些更高級(jí)的特性沒(méi)有在示例中展現(xiàn)，比如通過(guò)dllplugin只將有變化的JS生成不同的 Hash，充分利用瀏覽器的緩存，頻繁打包部署后，沒(méi)有改動(dòng)的類庫(kù)將不會(huì)重新生成。

前端開(kāi)發(fā)遠(yuǎn)不止于此，有人總結(jié)了前端開(kāi)發(fā)的四個(gè)階段：

庫(kù)/框架選型;
簡(jiǎn)單構(gòu)建優(yōu)化;
模塊化開(kāi)發(fā);
組件化開(kāi)發(fā)與資源管理。

大部分團(tuán)隊(duì)還是停留在第二第三階段，每個(gè)階段的實(shí)現(xiàn)都有很多種選擇。

如果只想達(dá)到第二階段，那么選擇一個(gè)壓縮合并工具幾分鐘可能就能實(shí)現(xiàn)，具體任務(wù)是使用 Grunt，Gulp，還是 NPM Scripts 都可以;

第三階段就需要代碼級(jí)別的支持，選擇 Webpack 原生支持 CommonJS，AMD 寫法，不需要單獨(dú)引入 Require.js 或者 Sea.js 這樣的類庫(kù)，省去了很多麻煩，你也可以選擇其他的支持模塊化的構(gòu)建工具：systemjs,Browserify, 或者rollup;

第四階段的組件化開(kāi)發(fā)和資源管理暫時(shí)就不討論了，關(guān)于是全組件開(kāi)發(fā)和半組件開(kāi)發(fā)也有很多爭(zhēng)議。

總結(jié)

時(shí)至今日，談起 Angular.js ，或許有些人都覺(jué)得有些過(guò)時(shí)，人人都在談 React，Vue。當(dāng)然 Angular 2 經(jīng)過(guò)一些波折之后也在逐漸走進(jìn)我們的視線，其實(shí)最終哪個(gè)框架會(huì)一統(tǒng)天下誰(shuí)都沒(méi)法預(yù)料。但也有些前端大牛認(rèn)為 Angular.js 在某些行業(yè)或者企業(yè)才剛剛興起!

不得不承認(rèn) Angular 1 有很多問(wèn)題，如果你的項(xiàng)目之前選擇的是 Angular.js ，不是一拍腦袋就升級(jí) Angular 2 的，即使不升級(jí)，我們也可以在 Angular 1.x 的基礎(chǔ)上做一些工作來(lái)適應(yīng)未來(lái)的變化，慢慢的哪一天你就會(huì)突然發(fā)現(xiàn)升級(jí)就是那么的簡(jiǎn)單。

希望這篇文章能夠激起大家永遠(yuǎn)保持積極向前追求***代碼的心，不僅對(duì)自己的成長(zhǎng)也會(huì)對(duì)公司帶來(lái)***的價(jià)值。對(duì)了!雖然Webpack 只是一個(gè)工具，但目前來(lái)看應(yīng)該是個(gè)不錯(cuò)的工具，值得前端的朋友去學(xué)習(xí)，因?yàn)槭褂昧怂拇_使前端的開(kāi)發(fā)更簡(jiǎn)單了。

***的內(nèi)心OS篇

其實(shí)這篇文章來(lái)源于我在公司內(nèi)部的一個(gè)分享前端構(gòu)建工具 - Webpack

分享的時(shí)候主要是現(xiàn)場(chǎng)擼代碼，通過(guò)博客的話就不好展現(xiàn)了，所以我基本上沒(méi)有介紹 Webpack 入門的一些用法，并且網(wǎng)上已經(jīng)有很多大牛的分享，推薦大家看一下Webpack 教程資源收集，這里面基本涵蓋了各路大神，從入門到精通全看一遍即可，如果你的英文足夠好，請(qǐng)直接看 Webpack 官方文檔~

當(dāng)前題目：讓Angular1.x跟上時(shí)代的步伐
URL網(wǎng)址：http://fisionsoft.com.cn/article/ccceseo.html

新聞中心

其他資訊