大咖微课 | 直面Angular2系列课第二期开讲
近年來(lái),Web 開(kāi)發(fā)技術(shù)的發(fā)展日新月異,各種框架層出不窮。在這樣的大背景之下,2010年10月,Google 首次發(fā)布了自己的 Web 開(kāi)發(fā)框架,名為 AngularJS,也叫 Angular,或者簡(jiǎn)稱(chēng)為 ng。
Angular 剛一發(fā)布就引起了強(qiáng)烈的關(guān)注,它首次提出的“雙向數(shù)據(jù)綁定”的概念受到了眾多開(kāi)發(fā)者的喜愛(ài)。當(dāng)然,也有很多人對(duì)此持有保留意見(jiàn)。但是無(wú)論如何,Angular 所提出來(lái)的眾多獨(dú)創(chuàng)性的概念深深影響了 Web 技術(shù)的發(fā)展進(jìn)程。例如,當(dāng)前市面上相當(dāng)多的 Web 框架都已經(jīng)支持“數(shù)據(jù)綁定”的概念,有一些支持單向綁定,有一些支持雙向綁定,Angular 的影響力之強(qiáng)大可見(jiàn)一斑。
在 Google 內(nèi)部有非常多的產(chǎn)品都在使用 Angular,在國(guó)內(nèi),也有非常多的企業(yè)正在使用 Angular1.x 開(kāi)發(fā)自己的應(yīng)用,包括移動(dòng) APP,其中有很多行業(yè)巨頭。
2014年9月,Angular 團(tuán)隊(duì)在 ng-europe 會(huì)議上公開(kāi)宣布了第二個(gè)大版本的開(kāi)發(fā)計(jì)劃,也就是大家熟知的 Angular2,與此對(duì)應(yīng),之前的版本就稱(chēng)為 Angular 1.x了。
Angular2 依然保持了最初的核心設(shè)計(jì)理念,但是與 Angular 1.x 相比,在各種語(yǔ)法細(xì)節(jié)上發(fā)生了大幅度的修改。
詳細(xì)的情況在后面的第三小節(jié)“ Angular2 有哪些重要變化?”中解釋。從整體上看,Angular2 變得更加簡(jiǎn)潔,因?yàn)樗暮诵母拍钪挥幸粋€(gè),那就是追求徹底的“組件化(Component)”。
當(dāng)我們談?wù)?Spring 的時(shí)候,你腦海里一定會(huì)自動(dòng)跳出 IOC、DI 這樣的概念。顯然,“控制反轉(zhuǎn)”、“依賴(lài)注入”就是 Spring 的核心靈魂。
當(dāng)我們談?wù)?Hibernate 或者 Mybatis 的時(shí)候,你首先想到的一定是 ORM(實(shí)體關(guān)系映射),它解決了關(guān)系模型和 OO 模型之間的數(shù)據(jù)結(jié)構(gòu)映射問(wèn)題。
當(dāng)我們談?wù)?jQuery 的時(shí)候,你想到的一定是 DOM 操作以及網(wǎng)絡(luò)上無(wú)數(shù)的開(kāi)源控件。很顯然,DOM 操作就是 jQuery 的核心靈魂,它幫我們屏蔽了瀏覽器兼容性問(wèn)題,并且提供了業(yè)務(wù)開(kāi)發(fā)過(guò)程中所需要的各種UI控件。
當(dāng)我們談?wù)?Angular 1.x 的時(shí)候,你想到了什么?呃,等一等,想到的東西有點(diǎn)多,有時(shí)候什么都想不起來(lái)。概念龐雜而無(wú)法把握,這就是 Angular 1.x 存在的最大問(wèn)題。
每一個(gè)成功的框架都會(huì)有一個(gè)核心靈魂,這個(gè)核心靈魂必須能解決實(shí)際開(kāi)發(fā)中的一個(gè)痛點(diǎn)。既然是核心靈魂,最好有且只有一個(gè),否則就會(huì)給使用者帶來(lái)很大的學(xué)習(xí)壓力。在這一方面,Angular1.x 是一個(gè)反面教材。
因?yàn)樗奶匦员容^多,其中最核心的4大特性分別是:
模塊化
MVC
雙向數(shù)據(jù)綁定
指令
如果再加上一些瑣碎的細(xì)節(jié),如 $scope、臟值檢測(cè)、依賴(lài)注入、路由、表單校驗(yàn)等等,整體上給人的感覺(jué)就是過(guò)于瑣碎,沒(méi)有一個(gè)核心靈魂能統(tǒng)攝一切。
Angular 團(tuán)隊(duì)也意識(shí)到了這一點(diǎn),因此,Angular2 在設(shè)計(jì)之初就簡(jiǎn)化了整體的概念模型。Angular2 的核心靈魂只有一個(gè),那就是組件化(Component),而其它那些細(xì)碎的東西,比如 Service、Route、Pipe,都是 utils 而已。因此,在使用 Angular2 的時(shí)候,開(kāi)發(fā)者只要學(xué)會(huì)使用 Coponent 就解決了一大半問(wèn)題。
大道至簡(jiǎn),LESS is MORE。
3.Angular2 有哪些重要變化?
有了 Component 這個(gè)統(tǒng)攝全局的概念之后,我們來(lái)看看與 Angular 1.x 相比 Angular2 發(fā)生了什么變化。
?第一點(diǎn):Angular2 刪掉了 $scope 的概念
在 Angular 1.x 里面,$scope 是一個(gè)相當(dāng)強(qiáng)大又相當(dāng)可怕的東西,由于在很多需要回調(diào)的場(chǎng)景之下,臟值檢測(cè)機(jī)制無(wú)法感知到 $scope 上發(fā)生的變化,因此經(jīng)常需要開(kāi)發(fā)者自己手動(dòng)調(diào)用 $apply() 方法。典型的場(chǎng)景有:事件回調(diào)、setTimeout 回調(diào)、Ajax 回調(diào)等等。Angular2 響應(yīng)社區(qū)的強(qiáng)烈呼吁,刪除(或者說(shuō)隱藏)了 $scope 的概念,開(kāi)發(fā)者不再需要感知到它的存在。另外,Angular2 在底層引入了 zone.js,所以即使在各種回調(diào)函數(shù)中修改數(shù)據(jù)模型也不需要手動(dòng)調(diào)用 $apply() 方法了。
?第二點(diǎn):刪掉了 ng-controller 指令
這就意味著 Controller 不再是一個(gè)獨(dú)立的組件,它合并到了 Component 內(nèi)部。這是一個(gè)非常大的演進(jìn),因?yàn)閺拇罅康膶?shí)戰(zhàn)經(jīng)驗(yàn)來(lái)看,在復(fù)雜的業(yè)務(wù)邏輯中復(fù)用 Controller 幾乎是不可能的。在其它同類(lèi)的前端框架里面也有類(lèi)似的處理手法,例如 Backbone 雖然也強(qiáng)調(diào) MVC 的概念,但是它也沒(méi)有定義單獨(dú)的 Controller 類(lèi),Controller 也是合并在 View 里面編寫(xiě)的。
?第三點(diǎn):大幅度演進(jìn)了臟值檢測(cè)機(jī)制
眾所周知,“雙向數(shù)據(jù)綁定”之所以能運(yùn)行,是因?yàn)?Angular 底層有“臟值檢測(cè)”這么一個(gè)神奇的機(jī)制。而實(shí)際上 Angular 1.x 里面的臟值檢測(cè)機(jī)制的運(yùn)行效率非常差,這就是為什么大家一直在抱怨綁定的對(duì)象不能太多、太深的原因。Angular2 大幅度演進(jìn)了這一機(jī)制,不僅引入了單向綁定,還增加了各種檢測(cè)策略,例如:只檢測(cè)一次、利用 JIT 動(dòng)態(tài)生成臟值檢測(cè)代碼等等。毫無(wú)疑問(wèn),有了這些工具之后,數(shù)據(jù)綁定效率不再是問(wèn)題。
?第四點(diǎn):嵌套路由
Angular 1.x 里面有一個(gè)非常討厭的問(wèn)題,框架內(nèi)置的路由機(jī)制不支持嵌套使用,這就導(dǎo)致開(kāi)發(fā)者在日常的開(kāi)發(fā)過(guò)程中不得不依賴(lài)于第三方的 ui-router 庫(kù)。Angular2 沒(méi)有這個(gè)問(wèn)題了,因?yàn)?Angular2 的路由是基于 Component 的,天然支持嵌套。
?第五點(diǎn):依賴(lài)注入機(jī)制演進(jìn)
Angular2 中的依賴(lài)注入寫(xiě)法與 Java 中的注解(Annotation)非常類(lèi)似,如果你熟悉 Spring 注解的用法,那么使用 Angular2 的依賴(lài)注入幾乎沒(méi)有學(xué)習(xí)成本。當(dāng)然,概念上是有區(qū)別的,Angular2 中叫 Decorator(裝飾器),更加貼近 Python 里面的 Decorator 的概念。
?第六點(diǎn):框架整體上基于 TypeScript 開(kāi)發(fā)
這是最大的一個(gè)變更,有很多人擔(dān)憂這樣是否會(huì)帶來(lái)比較大的學(xué)習(xí)成本,實(shí)際的情況并非如此。因?yàn)?TypeScript 的語(yǔ)法與 Java 或者 C# 非常類(lèi)似,因此對(duì)于從后端轉(zhuǎn)過(guò)來(lái)的開(kāi)發(fā)者來(lái)說(shuō),學(xué)習(xí)這門(mén)語(yǔ)言幾乎是沒(méi)有難度的。
還有一個(gè)重要的方面需要大家注意:TypeScript 是 Microsoft 開(kāi)發(fā)的一門(mén)語(yǔ)言,Google+Microsoft 這樣的組合會(huì)產(chǎn)生多么強(qiáng)大的推動(dòng)力,大家可以想象。Google 和 Microsoft 本身都是重要的瀏覽器廠商,Chrome 和 IE 加起來(lái)的市場(chǎng)份額占據(jù)了一大半的市場(chǎng)份額,未來(lái)如果兩款瀏覽器內(nèi)建 TypeScript 引擎,很顯然 TypeScript 和 Angular 的前景將會(huì)一片光明。這一優(yōu)勢(shì)是大量的同類(lèi)技術(shù)框架根本無(wú)法企及的,因此大家在做技術(shù)選型的過(guò)程中需要綜合考慮這些情況作出理性的決策。
直面Angular2系列課第二期
“Hello,Angular 2”
開(kāi)課時(shí)間:12-20 20:00 | 時(shí)長(zhǎng):1小時(shí)
主講嘉賓
郝冠軍
微軟最有價(jià)值專(zhuān)家
畢業(yè)于北京航空航天大學(xué),軟件工程碩士學(xué)位
具有十年以上的開(kāi)發(fā)與培訓(xùn)經(jīng)驗(yàn)
對(duì)ASP.NET和Visual Studio Code有著深入的研究
多家著名企業(yè)培訓(xùn)講師,微軟招募組組長(zhǎng),博客園博主
著有暢銷(xiāo)書(shū)《ASP.NET本質(zhì)論》
內(nèi)容介紹
實(shí)現(xiàn) Hello, Angular 2 組件
使用 Module 組織模塊
獲取 Angular 2
使用Typing 獲取類(lèi)型定義
編譯 Angular 2 的三種方式
模塊加載器之一 System.js
模塊加載器之二 Webpack
使用 AOT 實(shí)現(xiàn)預(yù)編譯
課程總結(jié)
互動(dòng)問(wèn)答環(huán)節(jié)
報(bào)名入口
dotNET跨平臺(tái)粉絲的福利來(lái)了!
本期微課系付費(fèi)課程
點(diǎn)擊閱讀原文獲取課程優(yōu)惠券
使用優(yōu)惠券即可免費(fèi)聽(tīng)課
數(shù)量有限!先到先得!
.NET社區(qū)新聞,深度好文,微信中搜索dotNET跨平臺(tái)或掃描二維碼關(guān)注
總結(jié)
以上是生活随笔為你收集整理的大咖微课 | 直面Angular2系列课第二期开讲的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇: 《微软开源跨平台移动开发实践》团购通知
- 下一篇: .NET Core下使用gRpc公开服务