【Angular專(zhuān)題】——（1）Angular，孤傲的變革者

一. 漫談Angular

Angular，來(lái)自Google的前端SPA框架，與React,Vue并稱(chēng)前端框架的三駕馬車(chē)，前些日子剛發(fā)布了7.0版本。它是一個(gè)十足的革命者，每一次亮相，都會(huì)把新的思想和軟件層面的實(shí)現(xiàn)提供給開(kāi)發(fā)者，從Angularjs1.0時(shí)代推翻jQuery的統(tǒng)治地位，到Angular2.0時(shí)代基于Typescript的全面升級(jí)，再到現(xiàn)在每半年一個(gè)大版本的高速更新迭代，不斷革新著前端代碼的編寫(xiě)方式，也推動(dòng)著前端開(kāi)發(fā)工程化和正規(guī)化的發(fā)展，可以說(shuō)Angular一直在用行動(dòng)詮釋著自己的孤傲和才華。

Angular非常喜歡引入和傳播思想層面的概念，它把那些被公認(rèn)為正確優(yōu)雅且有助于工程實(shí)踐的事物帶給前端，而并不在乎這些事物來(lái)自前端或者后端，也不在乎新的概念起源于哪個(gè)編程語(yǔ)言，它不發(fā)明概念，只是概念的搬運(yùn)工，它似乎總是在說(shuō)“這個(gè)想法是對(duì)的，那我們?cè)贏ngular里實(shí)現(xiàn)它吧”，造成的直接結(jié)果就是學(xué)習(xí)曲線異常陡峭，許多初級(jí)和中級(jí)的開(kāi)發(fā)者淺嘗輒止，直接棄坑投奔React和Vue陣營(yíng)，所有的創(chuàng)新都會(huì)面臨這樣的窘境，但Angular似乎并不在乎，升級(jí)迭代的速度反而更快了。事實(shí)證明這種精英門(mén)檻思維是正確的，它的確讓很多初中級(jí)開(kāi)發(fā)者無(wú)所適從，但同時(shí)也讓中高級(jí)前端開(kāi)發(fā)者和從后端轉(zhuǎn)到前端開(kāi)發(fā)的工程師受益，工程化的工具，面向?qū)ο蟮乃枷耄叻翵ava的語(yǔ)法，強(qiáng)類(lèi)型的限制，一個(gè)個(gè)特性都對(duì)開(kāi)發(fā)團(tuán)隊(duì)的整體素養(yǎng)提出了更高的要求，同時(shí)也讓代碼的質(zhì)量也有了更多的保障。

Angular是有生命的，與其說(shuō)它是一個(gè)框架，倒不如說(shuō)它是一個(gè)老師，不僅教授編程，也傳播思想，嚴(yán)厲卻有活力。如果說(shuō)Vue能激發(fā)開(kāi)發(fā)者的興趣，讓你快速上手拿出作品，React能夠強(qiáng)迫開(kāi)發(fā)者深耕javascript語(yǔ)言本身的特性和組件化思想，那么Angular帶給前端開(kāi)發(fā)者的，更多的是正統(tǒng)的面向?qū)ο箝_(kāi)發(fā)和軟件工程的思維方式，它逼迫你改變散漫的編程習(xí)慣，強(qiáng)迫你學(xué)習(xí)新的實(shí)現(xiàn)方式，漸漸地你甚至忘記了自己是一個(gè)前端，那么恭喜你，說(shuō)明你已經(jīng)脫離了初級(jí)水平。

如果一件事情是軟件工程師應(yīng)該懂的，那么你就應(yīng)該懂。在我眼里，這才是Angular帶給前端開(kāi)發(fā)者最有價(jià)值的思想，因?yàn)閮?nèi)心深處的自我認(rèn)知和定位會(huì)決定一個(gè)人未來(lái)所能達(dá)到的高度。

二. 如果你還在使用Angularjs

提到Angular體系，許多開(kāi)發(fā)者由于入行較晚的緣故，很有可能還在使用Angularjs1.X版本進(jìn)行開(kāi)發(fā)或維護(hù)，并沒(méi)有必要覺(jué)得自卑或者沮喪。Angular的開(kāi)發(fā)者并不見(jiàn)得就比Angularjs1.X的開(kāi)發(fā)者更厲害，不夸張的說(shuō)，Angularjs1.X中所包含的精華知識(shí)對(duì)很多開(kāi)發(fā)者來(lái)說(shuō)可能一輩子都學(xué)不完，你需要關(guān)注其底層原理，把知識(shí)點(diǎn)延伸開(kāi)去學(xué)習(xí)，而不只是每天沒(méi)完沒(méi)了地寫(xiě)頁(yè)面綁事件發(fā)請(qǐng)求然后自我陶醉。

Angularjs1.X被認(rèn)為是模塊化的開(kāi)發(fā)框架，而Angular,Vue,React被認(rèn)為是組件化的框架，從常見(jiàn)語(yǔ)法的角度來(lái)看的確是這樣，但這并不代表Angularjs1.X不能進(jìn)行組件化開(kāi)發(fā)，只是門(mén)檻略高，Angularjs1.X中組件化的實(shí)現(xiàn)是基于自定義指令的，1-2年經(jīng)驗(yàn)卻未嘗試過(guò)使用自定義指令的開(kāi)發(fā)者比比皆是，造成的直接結(jié)果就是常常一個(gè)controller中的代碼好幾千行，代碼里混合著各種DOM操作，不僅性能很難保障，維護(hù)難度也是噩夢(mèng)級(jí)別的。

如果面對(duì)這樣的情況你還沒(méi)有解決思路，那我并不建議你開(kāi)始Angular技術(shù)棧的學(xué)習(xí)，而應(yīng)該先去搞清楚如何在自己最熟悉的框架中來(lái)應(yīng)用組件化開(kāi)發(fā)的思想。比如面對(duì)一個(gè)4000行的controller，先考慮一下自己能不能通過(guò)拆分子路由和組合視圖將其重構(gòu)為3-4個(gè)大模塊，這樣每個(gè)大模塊就有約1000行代碼，再考慮一下能否把大模塊拆分成3-4個(gè)小模塊，controller只傳入必要的啟動(dòng)參數(shù)，然后在小模塊中實(shí)現(xiàn)業(yè)務(wù)自治，并通過(guò)controller來(lái)實(shí)現(xiàn)不同小模塊之間的通訊，這樣每個(gè)模塊的代碼量基本就可以做到小于500行，接著把DOM操作盡量整合進(jìn)指令的link函數(shù)中，配合框架自身的生命周期特點(diǎn)來(lái)運(yùn)行。如果上面的描述你不知道如何做，那么就靜下心好好查查資料，學(xué)習(xí)實(shí)踐一下。如果你已經(jīng)知道該怎么實(shí)現(xiàn)，那么就可以開(kāi)啟Angular2的學(xué)習(xí)了，你會(huì)在其中看到很多很多自己熟悉的東西。

三. 我計(jì)劃這樣學(xué)習(xí)Angular技術(shù)棧

說(shuō)實(shí)話，我接觸Angular才2個(gè)禮拜，但是我很喜歡它，嚴(yán)謹(jǐn)，優(yōu)雅，最重要的是VSCode的主題很漂亮。我的學(xué)習(xí)計(jì)劃大約是這樣，如果感興趣，歡迎一起行動(dòng)起來(lái)：

1.慕課網(wǎng)的免費(fèi)教程里有一個(gè)Angular的課程和一個(gè)Angular-Cli的課程，可以帶你快速入門(mén)。（已完成）

2.閱讀官方文檔：Angular中文網(wǎng)地址：https://www.angular.cn/

官方文檔特別詳細(xì)，至少需要通讀一次，然后在實(shí)際開(kāi)發(fā)中遇到相關(guān)問(wèn)題時(shí)再來(lái)查詢(xún)。

3.針對(duì)概念和原理進(jìn)行專(zhuān)題學(xué)習(xí)

針對(duì)概念關(guān)鍵詞展開(kāi)學(xué)習(xí)是我一貫的做法，在【一統(tǒng)江湖的大前端（7）React.js-從開(kāi)發(fā)者到工程師】中就有提及。“學(xué)習(xí)一個(gè)框架，做一個(gè)TodoList，然后就沒(méi)有然后了”，這是很多人對(duì)于新技術(shù)的學(xué)習(xí)方式，你會(huì)發(fā)現(xiàn)它其實(shí)并沒(méi)有什么卵用，因?yàn)檫^(guò)半個(gè)月，你就會(huì)不記得自己做過(guò)什么了（別問(wèn)我怎么知道的）。如果有實(shí)戰(zhàn)項(xiàng)目，那是最好的，實(shí)戰(zhàn)中的學(xué)習(xí)是最快的；如果沒(méi)有實(shí)戰(zhàn)項(xiàng)目，那么你應(yīng)該關(guān)注它的核心概念和原理，響應(yīng)式編程是什么東西，新的Angular中的DI系統(tǒng)有什么變化，修飾器是如何工作的等等，框架和實(shí)現(xiàn)細(xì)節(jié)或許會(huì)變化，但經(jīng)典思想一般都是很穩(wěn)定的，你只需要反復(fù)研究去理解它就可以了。

4.分享以及撰寫(xiě)技術(shù)博客

寫(xiě)博文并不是什么高大上的事情，只是一種習(xí)慣，一種輔助自己思考和總結(jié)的習(xí)慣。最重要的是，它可以提高你打字的速度，如果你用80%的時(shí)間敲完別人100%時(shí)間才能敲完的代碼，那不就有20%的時(shí)間去學(xué)習(xí)新東西或者去寫(xiě)博客了么，我的時(shí)間基本就是這樣擠出來(lái)的。

React Angular 小程序

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶(hù)投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實(shí)的內(nèi)容，請(qǐng)聯(lián)系我們jiasou666@gmail.com 處理，核實(shí)后本網(wǎng)站將在24小時(shí)內(nèi)刪除侵權(quán)內(nèi)容。

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶(hù)投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實(shí)的內(nèi)容，請(qǐng)聯(lián)系我們jiasou666@gmail.com 處理，核實(shí)后本網(wǎng)站將在24小時(shí)內(nèi)刪除侵權(quán)內(nèi)容。