基於AngularJS的個推前端雲組件探祕

AngularJS是google設計和開發的一套前端開發框架，幫助開發人員簡化前端開發的負擔。AngularJS將幫助標準化的開發web應用結構並且提供了針對client應用的將來開發使用的模板。AngularJS很全面且簡單易學習，AngularJS高速的成爲了javascript的主流框架，幫助開發人員專業的從事web開發。

1、Amazing的Angular

AnguarJS的一些特性

（1）方便的REST： RESTful逐漸成爲了標準的server和client溝通的方式。使用一行javascript代碼，你就可以高速的從server端獲得數據。AugularJS將這些變成了JS對象，做爲Model，遵循MVVM(model view view-model)設計模式。

（2）MVVM救星：這是一個技術，更是一個思想。Model將和ViewModel互動（經過$scope對象）。將監聽Model的變化。這些可以經過View來發送和渲染。由HTML來展現你的代碼。View可以經過$routeProvider對象來支配，因此你可以深度的連接和組織你的View和Controller，將他們變成導航URL。AngualrJS同一時候提供了無狀態的Controller，可以用來初始化和控制$scope對象。

（3）數據綁定和依賴注入：在MVVM設計模式中的不論什麼東西無論發生不論什麼事情都本身主動的和UI通訊。這幫助咱們去除了wrapper，getter/setter方法或者class定義。AngularJS將幫助咱們處理所有的這些內容。因此你可以處理數據像處理基本javascript數據類型。

固然你也可以經過本身定義處理複雜數據。正因爲所有事情的發生都是本身主動的，因此你沒必要調用一個main()來運行你的代碼，而是經過依賴關係來驅動。

（4）可擴展的HTML：大多數的站點都是使用非語義的<div>標籤來搭建的。

你需要本身在CSS的class中定義相關的DOM層次結構。

而使用AngularJS。你可以操做XML同樣操做HTML，給你無窮的方式來完畢標籤和屬性定義。

AngularJS經過本身的編譯器和directives來完畢相關的設置。而這也是組件實現的基石。

你們接觸jQuery的時候發現。要作事先綁定。取回數據要塞回去，塞的過程都是要本身關心的。但是Angular，數據取回來僅僅要注入變量本身主動完畢了，包含事件綁定。

數據綁定，MVVM、依賴注入讓你認爲。原先要關心很是多東西，現在都不需要關心了，僅僅需更加關心數據結構和業務層，把咱們從繁瑣DOM綁定中解脫出來。（可在附錄——AnguarJS使用先後對照——中查看到早期我用jQuery作的帳號模塊和後來用ng模式下的差異）

2、組件化之路

組件是對數據和方法的簡單封裝，在此樣式類。指令型等具有UI效果的組件。方法等統稱組件。在大型軟件中，組件化是一種共識。它一方面提升了開發效率。還有一方面減小了維護成本。

組件化及組件展示形式

組件化可以有很是多事情可以作。比方模板化，現在模板化重任交到前端。

第二個是公共樣式庫，第三公共函數庫。一些業務組件，模塊化特殊一點。

 

所以可以得出組件大概展示形式包含： 統一的樣式庫。具備必定HTML結構的代碼片斷，具備一部分JS控制的功能函數。具備必定數據輸入和輸出的控制。

 

3、揭開雲組件的面紗

什麼是雲以及雲組件

雲服務是基於互聯網的相關服務的添加、使用和交付模式，一般涉及經過互聯網來提供動態易擴展且經常是虛擬化的資源。雲是網絡、互聯網的一種比喻說法。

過去在圖中每每用雲來表示電信網。後來也用來表示互聯網和底層基礎設施的抽象。

雲服務指經過網絡以按需、易擴展的方式得到所需服務。這樣的服務可以是IT和軟件、互聯網相關，也可是其它服務。它意味着計算能力也可做爲一種商品經過互聯網進行流通。把雲和組件兩者結合則構成了雲組件。

因此雲組件，經過線上的資源。結合這個概念把這兩個概念合在了一塊兒就產生了這個概念。

說到底是但願經過一個統一的控制的東西，把N個項目全部控制在一塊兒。

個推的組件

個推的組件類型就包含了樣式類組件、指令型組件、服務型組件、公共過濾器、公共函數庫等。

 

從組件分類裏可以發現專屬CSS是樣式類組件，加上模板就是很easy的組件。再把加控制器放進去，就是前面講的具備必定JS。具備必定邏輯的組件。把link加進去。帶了動畫。數據層加進去就具有必定的輸出輸入。這個數據層可能包括多種。有多是你跟你的頁面控制器交互，也有可能這個組件很強，本身直接與服務端通訊獲取數據和傳遞數據（固然實際實踐中可能前者更合適當前咱們的環境，後者對統一的接口要求會更高）。

 

這是個推雲組件的技術方案。基於前端三大件和一些其它庫。比方會有一些地理圍欄的組件。需要讓百度地圖給咱們整個項目對接起來，還有可視化的項目。比方G20那邊人流怎麼樣。可視化項目會用到第三方庫。咱們用的是LESS寫CSS。基於這些之上開發雲組件。

 

依據雲組件的一些狀況咱們得出它的最佳實踐對象就是從具備必定通用交互的表格表單類的管理型系統出發。逐漸包括複雜交互的系統應用，並對響應式具備必定的支持。個推是從作推送服務開始，以後有很是多產品線。

推送服務就會有很是多2B、2C的平臺，這就是管理型的。

上圖是個推雲組件採用的目錄結構。用的是gulp打包，CSS裏面有wd目錄。主要放了一些第三方的庫。更關鍵主要仍是如下。JS也是同樣，wd是基礎庫。

第五個是最重要的，所有組件都放在這個目錄下，右邊圖就說明了每個組件包括本身專屬的三大件——模板、邏輯、交互、效果和樣式。

基於gulp的打包

雲組件展現網站

雲組件的使用人員主要分爲三大類，第一類是前端使用者（包含泛前端人員），他們需要學習怎樣使用，高速用組件（須知道Angular的一些基本概念和使用方法）。第二類是UI設計師、項目和產品等。他們需要觀察效果是不是適合的，依據庫去設計新的此類系統。第三類是遊客和其它人員。

關於雲組件的新的思考

基於雲的理念是正向的牽一髮而動全身，但實際上這個機制運用很差（比方一個老的組件更新出了個bug），便會打開了負面的牽一髮動全身了。這時該怎麼辦？

回到雲的初始之處咱們不難發現。當資源隔絕便不會產生這樣的影響了（雲組件正是利用其反向思惟達到的便捷）。那麼咱們相對將雲組件資源封閉便可以減小這個影響了。這即是版本號控制。

不一樣項目引用對應的雲，以達到剛纔講的二者之間的平衡，從而成效最優化。

因此，僅僅有合理控制住才幹真正發揮雲組件的優點。

多個版本號下，咱們的開發模式即是就某個項目的雲組件升級由該項目決定。因爲假設雲組件一發版，所有的項目都升級雲組件那這個回測的代價就很是高了，何況原有的雲組件版本號也是夠以前已經上線的項目的當前版本號用了。

個推的項目體系圖

實際使用中的問題

雲組件的發版有必定的週期性，但實際項目中的需求要高速響應，這時需要採用雲組件擴展模塊（模式）開發：基於雲組件開發本項目的組件級別的模塊。對雲組件進行擴展或者項目化定製。

4、經驗之談

第1、模塊化：隨時準備模塊化抽象，這是一個動態的過程。 第2、多想一想周邊的，超過所止的部分 —— 換位思考。方便下游，倒推上游。 第3、沒有實現不了的效果，僅僅有承受不了的代價。

第4、方法有很是多。時間贊成的話都可以試試。