亚洲欧美日韩综合系列在线_91精品人妻一区二区_欧美大肥婆一级特大AA片_九色91视频免费观看_亚洲综合国产精品_av中文字幕在线不卡_久久精品色综合网_看黄色视频的软件_无卡无码高清中文字幕码2024_亚洲欧美日韩天堂网

百花齊放的前端框架

2007 年的時候我剛畢業(yè)，當時最火的前端框架是 jQuery 和 Ext JS，那時候大家糾結(jié)的問題是：我到底是用 jQuery 呢還是用 Ext JS 呢？

后來又出現(xiàn)了：Adobe Flex、Microsoft SilverLight、Dojo、Ember、Backbone、RequireJS…一大堆框架。

從 2008 年到現(xiàn)在，大家能在市面上看到的前端框架不下 10 種，真心讓人目不暇接。

在這個發(fā)展過程中，框架的規(guī)模和體積也在不斷的增大，最遠古的 prototype.js 和 mootools，都只有幾千行 JS 代碼，壓縮之后的體積也只有 10 K 左右。到 2006 年 jQuery 出現(xiàn)的時候，體積已經(jīng)擴大 10 倍到 100 K 左右，最龐大、最完善的是 Ext JS，目前的 6.x 版本中，光 JS 代碼就已經(jīng)高達 24 萬行代碼了（含注釋）！

Word 天！老子真的學不動了！

朋友，你還是太年輕，這里面實際上并沒有你想得辣么復雜，在紛繁繚亂的表象背后，隱藏著簡單的規(guī)律。實際上，市面上所有前端框架都在解決兩個大問題：組件化和模塊化。

共同問題一：如何實現(xiàn)組件化

組件化有兩個好處：

功能封裝

跨項目復用

所有框架，無論用什么語言來實現(xiàn)，都有一些基本的問題需要解決。

如何設(shè)計組件的生命周期？

如你所知，前端的特點是帶有 UI 界面的，是需要跟用戶直接交互的東西。

因此，你必須為這些 UI 組件設(shè)計完善的生命周期，從遠古的 Java Swing 到 QT，一直到 jQueryUI、Angular、React，大家都設(shè)計了自己的生命周期機制。雖然技術(shù)細節(jié)有差異，但是基本的結(jié)構(gòu)是類似的，都需要經(jīng)歷幾個基本的階段：初始化、渲染、存活期、銷毀。請看圖示：

請注意，所有 UI 組件幾乎都是這樣設(shè)計的，怎么樣，還需要去強記那些內(nèi)容嗎？哈哈哈。

組件之間如何通訊？

OK，無論什么 UI 框架，有了 UI 組件之后，緊接著就需要解決組件間通訊的問題。

你只要能解決以下 3 種情況就能解決絕大部分的問題了：父子間如何通訊？兄弟間如何通訊？遠房親戚之間如何通訊？

無論哪種框架，典型的解決方案有 3 種：父子之間通過事件或者直接調(diào)用進行通訊；兄弟、遠房親戚之間利用事件總線進行通訊；利用 cookie、localstorage、甚至服務(wù)端 session 進行通訊。

如何管理組件的狀態(tài)？

UI 組件不僅僅有外觀，外觀只是一張畫皮，里面要有數(shù)據(jù)才行，既然有數(shù)據(jù)，就要有狀態(tài)管理的問題。

在狀態(tài)管理這塊，需要仔細設(shè)計這些問題：是否需要雙向綁定？如何配合路由保持組件狀態(tài)？

組件樣式怎么做？

因為是前端框架，所以美觀的問題也不能放松。所幸的是，在移動互聯(lián)網(wǎng)時代，用戶都已經(jīng)習慣了“扁平化”、“極簡主義”這些設(shè)計風格，我們可以利用市面上現(xiàn)有的 CSS 樣式庫來給我們的組件“化妝”，常用的有這些：

共同問題二：如何實現(xiàn)模塊化

如你所知，在 Java 里面，我們有完善的 Class/Package/Jar/ClassLoader 這些機制的支持。當 JVM 發(fā)現(xiàn)所需要的 .class 文件沒有加載的時候，它自己會使用 ClassLoader 去加載，不需要程序員自己操心。

但是在 JS 里面不行，由于 JavaScript 這門語言本身的缺陷，它沒有提供完善的模塊化支持，這就導致了所有前端框架必須自己解決模塊化的問題。

但是，值得慶幸的是，我們有了 Node.js，有了 Webpack，再也不用像前幾年那樣自己搞 RequireJS 了！這就是為什么市面上主流的前端框架都使用 Webpack 來做自己的 CLI 的原因。

總結(jié)：無論你目前在使用什么前端框架，無論你以后想學哪些前端框架，只要緊緊扣住“組件化”和“模塊化”這兩條主線，心里就會有大方向了，絕對不會迷失在茫茫多的技術(shù)細節(jié)里面。

以上表述了學習前端框架的兩條主線，但具體應該怎么學呢？以 Angular 為例，我把我的經(jīng)驗分享給大家，希望大家學完這門課后，可以避開常見的開發(fā)誤區(qū)、快速上手實戰(zhàn)。

我為什么要看這個課程

有的朋友可能會問：Angular 相關(guān)的文章到處都有，我為什么要來學習這門課？

這是一個非常好的問題，說明你對閱讀內(nèi)容有質(zhì)量要求。

如果是我，我也會有這樣的疑惑。

整體上說，這門課的內(nèi)容有以下特色。

最近 5 年我一直在“玩”前端方面的東西，比如 jQuery、SVG、Ext JS、Adobe Flex、Angular；尤其在 2016 年，這一整年的時間我代表 Angular 項目組在中國進行技術(shù)推廣。因此，我會按照初學者一般的學習過程，用我自己的語言一步一步進行講解。

在這 5 年里，我在超過 50 家企業(yè)、開源組織、大學里面進行了大量演講，在網(wǎng)絡(luò)上發(fā)布了大量的視頻和文章。在到處奔波的過程中，認識了很多人，有經(jīng)驗豐富的后端開發(fā)者、也有新入行的初學者，他們跟我說過很多自己的困惑，我會把常見的一些疑問融入在內(nèi)容里面。

我也會掃平日常開發(fā)中常見的坑，這些坑大部分都是開發(fā)者們反饋給我的，或者是到我這里吐槽過的。舉幾個典型的例子：

很多開發(fā)者到我這里來抱怨說，在 Windows 平臺上安裝 @angular/cli 會報很多 error，那是因為 @angular/cli 在 Windows 平臺上面依賴 Python 和 Visual Studio 環(huán)境，而很多開發(fā)者的機器上并沒有安裝這些東西。為什么要依賴這些環(huán)境？因為某些 npm 包需要在你本地進行源碼編譯。

node-sass 模塊被墻的問題，強烈推薦使用 cnpm 進行安裝（點擊這里跳轉(zhuǎn)到安裝地址），可以非常有效地避免撞墻。

一些開發(fā)者來抱怨說 @angular/cli 在打包的時候加上 –prod 參數(shù)會報錯，無法編譯。這是一個很常見的問題，因為 @angular/cli 最新的版本經(jīng)常會有 bug，只要在項目的 package.json 里面降低一個小版本號就 OK 了。另外，加 –prod 參數(shù)之后，編譯器會進行更加嚴格的檢查，如果存在無用的組件或者配置錯誤，則編譯過不去。

@angular/cli 默認生成的 karma.conf.js 配置文件里面采用了一個有 bug 的 HTML 報告生成器，導致 ng test 運行報錯，我們需要把這個 reporter 改成 mocha（摩卡），具體的配置和實例請參考“第10課：自動化測試”中的講解。

還有的開發(fā)者說，本地開發(fā)的時候運行得很好，上線之后所有請求 404。這也是一個常見的坑，因為你需要給 Web 容器配置一下處理 HTTP 請求的規(guī)則，把前端路由扔回去交給 Angular 處理，可點擊這里查看具體的情況。

諸如此類的坑還有不少，我都是一個一個踩過來的。當然，我相信讀者也能踩過來，但是從節(jié)約時間的角度來看，跟著我的思路走一遍豈不是更快？

這門課全部聚焦在使用層面上，覆蓋日常開發(fā)中使用頻率最高的特性，除非迫不得已，盡量不扯原理。長期以來，我發(fā)現(xiàn)有很多讀者的學習方式存在誤區(qū)，比如，有一些人上來就去研究“變更檢測”的原理，還有 RxJS 的原理，這種方式除了打擊你自己的自信心之外得不到任何好處。因為你遲早會發(fā)現(xiàn)，在計算機領(lǐng)域，任何東西研究到最底層都和“算法”、“數(shù)據(jù)結(jié)構(gòu)”、“設(shè)計模式”有關(guān)。

據(jù)我所知，很多讀者平時并沒有去研究這些內(nèi)容的基礎(chǔ)知識，因此，我推薦采用更加務(wù)實一點的方案，首先學會如何使用，等用熟練了，有時間、有閑情的時候再去研究那些底層的原理。設(shè)計發(fā)動機很難，但是學會開車并不難，對吧？所以我寫這門課的目標很簡單，就是帶你學會開車，而不是教你設(shè)計發(fā)動機。

這門課非?？粗亍案拍钅Ｐ汀保∕ental Model）的構(gòu)建。我發(fā)現(xiàn)，很多開發(fā)者已經(jīng)做過非常多的項目了，但是當你跟他聊的時候，很快就會發(fā)現(xiàn)他并沒有掌握這門框架的精髓。打幾個比方：

當有人提到 Spring 的時候，你的大腦里面第一個想到的一定是 DI、IoC、AOP 等這些核心概念；

當有人提到 Hibernate、MyBatis、JPA 的時候，你的大腦里面立即會浮現(xiàn)出 ORM 等概念；

當有人提到 React 的時候，你想到的應該是 VDOM、JSX；

當有人提到 jQuery 的時候，你首先想到的應該是 $，對吧？

因此，可以看到，任何一個成功的框架都有自己獨創(chuàng)的“概念模型”，或者叫“核心價值”也可以，這是框架本身存在的價值，這些核心概念是掌握這個框架應該緊扣的主線，而不是上來就陷入到茫茫的技術(shù)細節(jié)里面去。

課程里面涉及到的例子總數(shù)量大約有 300 個，有少量例子來自官方文檔（大約 5 個），其他的例子都是我自己一點一點手動敲出來的。我把這些例子分成了 10 個開源項目，它們互相獨立，方便讀者進行參考和練習。

讀者反饋

一年以來，收到了很多讀者的反饋，謝謝你們。這里摘錄一些，供其他讀者參考。為了不打攪這些朋友，部分采用了匿名。

課程大綱

本課程是 Angular 基礎(chǔ)教程，目標是帶領(lǐng)讀者快速上手實戰(zhàn)。課程以 3 個核心概念作為主線（組件、路由和模塊）以及在業(yè)務(wù)開發(fā)過程中必須用到的特性（工具、指令、表單、RxJS、i18n、測試）來展開講解。

除了這 3 個核心概念具有很強的關(guān)聯(lián)性外，其他內(nèi)容都是完全獨立的，大家在用到的時候可以隨時翻閱。注射器部分的內(nèi)容稍微復雜一些，日常開發(fā)過程中用到的不多。

認真學完這門課程之后，將會深入理解新版本 Angular 的概念模型，具備使用 Angular 上手進行開發(fā)的基本能力。

詳細的大綱如下：

升級的內(nèi)容有哪些

Angular 這門達人課發(fā)布已經(jīng)整一年的時間，2018 年 10 月，Angular 7.0 如約而至。

我花了一些時間把課程相關(guān)的圖文內(nèi)容和實例代碼全部升級到了最新的版本，包括：

校對、增補圖文教程

教程相關(guān)聯(lián)的幾百個小例子

3 個綜合的項目，1 個 To C 型的門戶項目、1 個 To B 型的后臺管理項目、1 個移動端 PWA 項目

這次我刻意記錄了一下，升級、修改所有代碼主要體現(xiàn)在兩個地方：

核對各個 Node.js 模塊的版本兼容性（手動做有點繁瑣）

RxJS 升級導致的一些寫法改變

整個升級過程非常平滑，各位無需擔憂。

修改之后共有 46 篇文章。

所有相關(guān)項目的代碼都已經(jīng)升級到了當前最新的 Angular 7.0 版本，NiceFish、OpenWMS、learn-*系列，保證文字內(nèi)容和實例代碼同步。

綜合最新的版本 5.0、6.0、7.0，修訂、增補了一些文本，比如 Angular 5.0 新增的 8 個路由事件等。

修改了一些數(shù)據(jù)和圖表，使用當前最新的數(shù)據(jù)（2018 年 10 月 30 日）。

修改了一些配圖。

增加 3 個附錄，解釋 5.0、6.0、7.0 更新了哪些內(nèi)容。

作者介紹

大漠窮秋，10 年開發(fā)經(jīng)驗，其中 5 年后端、5 年前端。熟悉 Java 相關(guān)的技術(shù)體系：Spring MVC、MyBatis、Ehcache、ELK、MySQL 等。在前端技術(shù)方面尤其有深入的研究，先后使用并研究過 Flex、jQuery、Ext JS、Backbone、Bootstrap、Angular 等常見的前端技術(shù)體系。

2016 ~ 2017 年期間，擔任 Angular Developer PM，專門幫助 Google Angular 團隊在中國推廣 Angular 框架。

出版了《Ext 江湖》一本圖書，翻譯出版了《ActionScript 3.0 游戲設(shè)計基礎(chǔ)（第二版）》《用 AngularJS 開發(fā)下一代 Web 應用》《邁向 Angular 2》三本圖書。

更詳細的資料和演講照片，請點擊這里查看

搭建并維護的專業(yè) Angular 技術(shù)論壇，請點擊這里查看

曾經(jīng)在包括臺灣在內(nèi)的 50 多家央企、民企、外企、開源組織等表過大量演講，深受社區(qū)好評。2016 ~ 2017 年，曾經(jīng)擔任過 Google Angular 框架在中國的專職推廣工作，Title 是 Angular Developer PM。

掃描二維碼或點此試讀購買

---------------------