AngularJS是google設(shè)計(jì)和開(kāi)發(fā)的一套前端開(kāi)發(fā)框架，他能幫助開(kāi)發(fā)人員更便捷地進(jìn)行前端開(kāi)發(fā)。AngularJS是為了克服HTML在構(gòu)建應(yīng)用上的不足而設(shè)計(jì)的，它非常全面且簡(jiǎn)單易學(xué)習(xí)，因此AngularJS快速的成為了javascript的主流框架。

一、Amazing的Angular

AnguarJS的特性

方便的REST： RESTful逐漸成為了一種標(biāo)準(zhǔn)的服務(wù)器和客戶端溝通的方式。你只需使用一行javascript代碼，就可以快速的從服務(wù)器端得到數(shù)據(jù)。AugularJS將這些變成了JS對(duì)象，作為Model，遵循MVVM(modelview view-model)設(shè)計(jì)模式。

MVVM救星：Model將和ViewModel互動(dòng)（通過(guò)$scope對(duì)象），并監(jiān)聽(tīng)Model的變化?？梢酝ㄟ^(guò)View來(lái)發(fā)送和渲染，由HTML來(lái)展示代碼。View可以通過(guò)$routeProvider對(duì)象來(lái)支配，所以你可以深度的鏈接和組織你的View和Controller，將他們變成導(dǎo)航URL。AngualrJS同時(shí)提供了無(wú)狀態(tài)的Controller，可以用來(lái)初始化和控制$scope對(duì)象。

數(shù)據(jù)綁定和依賴注入：在MVVM設(shè)計(jì)模式中的任何東西無(wú)論發(fā)生任何事情都自動(dòng)的和UI通信。這幫助我們?nèi)コ藈rapper，getter/setter方法或者class定義。AngularJS將幫助我們處理所有的這些內(nèi)容，你可以處理數(shù)據(jù)像處理基本javascript數(shù)據(jù)類型般。當(dāng)然你也可以通過(guò)自定義處理復(fù)雜數(shù)據(jù)。正因?yàn)樗惺虑榈陌l(fā)生都是自動(dòng)的，所以你不必調(diào)用一個(gè)main()來(lái)執(zhí)行你的代碼，而是通過(guò)依賴關(guān)系來(lái)驅(qū)動(dòng)。

可擴(kuò)展的HTML：大多數(shù)網(wǎng)站都是使用非語(yǔ)義的<div>標(biāo)簽來(lái)搭建的。你需要自己在CSS的class中定義相關(guān)的DOM層次結(jié)構(gòu)。而使用AngularJS，你可以像操作XML一樣操作HTML，有無(wú)窮的方式來(lái)完成標(biāo)簽和屬性定義。AngularJS通過(guò)自己的編譯器和directives來(lái)完成相關(guān)的設(shè)置，而這也是組件實(shí)現(xiàn)的基石。

大家接觸jQuery的時(shí)候發(fā)現(xiàn)，要做事先綁定，取回?cái)?shù)據(jù)要塞回去，塞的過(guò)程都是要自己關(guān)心的。但是利用Angular，數(shù)據(jù)取回來(lái)只要注入變量自動(dòng)完成了，包括事件綁定。數(shù)據(jù)綁定，MVVM、依賴注入讓你覺(jué)得，原先要關(guān)心很多東西，現(xiàn)在都不需要關(guān)心了，只需更加關(guān)心數(shù)據(jù)結(jié)構(gòu)和業(yè)務(wù)層，它把我們從繁瑣DOM綁定中解脫出來(lái)。

二、組件化之路

組件是對(duì)數(shù)據(jù)和方法的簡(jiǎn)單封裝，在此樣式類，指令型等具備UI效果的組件，方法等統(tǒng)稱組件。在大型軟件中，組件化是一種共識(shí)，它一方面提高了開(kāi)發(fā)效率，另一方面降低了維護(hù)成本。

組件化及組件展現(xiàn)形式

組件化可以有很多事情可以做，比如模板化，現(xiàn)在模板化重任交到前端。第二個(gè)是公共樣式庫(kù)，第三公共函數(shù)庫(kù)，一些業(yè)務(wù)組件，模塊化特殊一點(diǎn)。

組件大概展現(xiàn)形式包括： 統(tǒng)一的樣式庫(kù)，具有一定HTML結(jié)構(gòu)的代碼片段，具有一部分JS控制的功能函數(shù)，具有一定數(shù)據(jù)輸入和輸出的控制。

三、揭開(kāi)云組件的面紗

云以及云組件概念

云是網(wǎng)絡(luò)和互聯(lián)網(wǎng)的一種比喻說(shuō)法。過(guò)去往往用云來(lái)表示電信網(wǎng)，后來(lái)也用來(lái)抽象地表示互聯(lián)網(wǎng)和底層基礎(chǔ)設(shè)施。

云服務(wù)指通過(guò)網(wǎng)絡(luò)以按需、易擴(kuò)展的方式獲得所需服務(wù)。這種服務(wù)可以是IT和軟件、互聯(lián)網(wǎng)相關(guān)，也可是其他服務(wù)。它意味著計(jì)算能力也可作為一種商品通過(guò)互聯(lián)網(wǎng)進(jìn)行流通。把云和組件二者結(jié)合則構(gòu)成了云組件。說(shuō)到底是希望通過(guò)一個(gè)統(tǒng)一的控制的東西，把N個(gè)項(xiàng)目全部控制在一起。

個(gè)推的組件類型

個(gè)推的組件類型包括樣式類組件、指令型組件、服務(wù)型組件、公共過(guò)濾器、公共函數(shù)庫(kù)等。

從組件分類里可以發(fā)現(xiàn)專屬CSS是樣式類組件，加上模板就是非常簡(jiǎn)單的組件，再把加控制器放進(jìn)去，就是前面講的具有一定JS和一定邏輯的組件，把link加進(jìn)去，帶了動(dòng)畫(huà)，數(shù)據(jù)層加進(jìn)去就具備一定的輸入輸出能力。這個(gè)數(shù)據(jù)層可能包含多種，有可能是跟你的頁(yè)面控制器交互，也有可能這個(gè)組件非常強(qiáng)，自己直接與服務(wù)端通信獲取數(shù)據(jù)和傳遞數(shù)據(jù)（當(dāng)然實(shí)際實(shí)踐中可能前者更合適當(dāng)前我們的環(huán)境，后者對(duì)統(tǒng)一的接口要求會(huì)更高）。

上圖是個(gè)推云組件的技術(shù)方案?；谇岸巳蠹鸵恍┢渌麕?kù)比如地理圍欄的組件（需要讓百度地圖給我們整個(gè)項(xiàng)目對(duì)接起來(lái)），還有可視化的項(xiàng)目，比如G20期間杭州某景區(qū)人流情況，可視化項(xiàng)目會(huì)用到第三方庫(kù)。個(gè)推利用LESS寫(xiě)CSS，基于這些開(kāi)發(fā)云組件。

根據(jù)云組件的一些情況個(gè)推得出它的最佳實(shí)踐對(duì)象就是從具有一定通用交互的表格表單類的管理型系統(tǒng)出發(fā)，逐漸包含復(fù)雜交互的系統(tǒng)應(yīng)用，并對(duì)響應(yīng)式具有一定的支持。個(gè)推是從做推送服務(wù)開(kāi)始，之后有很多產(chǎn)品線。推送服務(wù)就會(huì)有很多2B、2C的平臺(tái)，這就是管理型的。

上圖是個(gè)推云組件采用的目錄結(jié)構(gòu)，用的是gulp打包，CSS里面有wd文件夾，主要放了一些第三方的庫(kù)。更關(guān)鍵主要還是下面，JS也是一樣，wd是基礎(chǔ)庫(kù)。第五個(gè)是最重要的，所有組件都放在這個(gè)文件夾下，每個(gè)組件包含自己專屬的三大件——模板、邏輯、交互、效果和樣式。

基于gulp的打包

云組件展示站點(diǎn)

云組件的使用人員主要分為三大類，第一類是前端使用者（包括泛前端人員），他們需要學(xué)習(xí)如何使用，快速用組件（須知道Angular的一些基本概念和用法）。第二類是UI設(shè)計(jì)師、項(xiàng)目和產(chǎn)品等，他們需要觀察效果是否是適合的，根據(jù)庫(kù)去設(shè)計(jì)新的此類系統(tǒng)。第三類是游客和其他人員。

關(guān)于云組件的新的思考

云組件牽一發(fā)會(huì)動(dòng)全身，如果云組件機(jī)制運(yùn)用不好比如一個(gè)老的組件更新出了個(gè)bug，會(huì)產(chǎn)生很多負(fù)面影響，這時(shí)該怎么辦？

回到云的初始之處我們不難發(fā)現(xiàn)，當(dāng)資源隔絕便不會(huì)產(chǎn)生這種影響了（云組件正是利用其反向思維達(dá)到的便捷），那么我們相對(duì)將云組件資源封閉便可以降低這個(gè)影響了。這便是版本控制，不同項(xiàng)目引用相應(yīng)的云，以達(dá)到剛才講的兩者之間的平衡，從而成效最優(yōu)化。

所以，只有合理控制住才能真正發(fā)揮云組件的優(yōu)勢(shì)。

多個(gè)版本下，我們的開(kāi)發(fā)模式便是就某個(gè)項(xiàng)目的云組件升級(jí)由該項(xiàng)目決定。因?yàn)槿绻平M件一發(fā)版，所有的項(xiàng)目都升級(jí)云組件那這個(gè)回測(cè)的代價(jià)就很高了，況且原有的云組件版本也是夠之前已經(jīng)上線的項(xiàng)目的當(dāng)前版本用了。

個(gè)推的項(xiàng)目體系圖

實(shí)際使用中的問(wèn)題

云組件的發(fā)版有一定的周期性，但實(shí)際項(xiàng)目中的需求要快速響應(yīng)，這時(shí)需要采用云組件擴(kuò)展模塊（模式）開(kāi)發(fā)：基于云組件開(kāi)發(fā)本項(xiàng)目的組件級(jí)別的模塊，對(duì)云組件進(jìn)行擴(kuò)展或者項(xiàng)目化定制。

四、關(guān)于AngularJS的經(jīng)驗(yàn)與總結(jié)

第一、模塊化：隨時(shí)準(zhǔn)備模塊化抽象，這是一個(gè)動(dòng)態(tài)的過(guò)程。

第二、多想想周邊的，超過(guò)所止的部分 —— 換位思考，方便下游，倒推上游。

第三、沒(méi)有實(shí)現(xiàn)不了的效果，只有承受不了的代價(jià)。

第四、方法有很多，時(shí)間允許的話都可以試試。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論