用友UAP講堂 最懂企業的WEB框架AngularJS

2014/11/18 來源：京華網

關鍵詞：用友UAP，WEB框架，AngularJS

摘 要：目前企業級應用已經不能只考慮PC端的開發，很多業務功能已經移植到了移動端。用友UAP目前在前端這個已經利用AngularJS做下一代的企業開發的預研和使用，UAP在WEB框架上做出新的調整，在未來幾年一定可以使企業級WEB應用得到快速發展。

作者：用友UAP 馬太航

資訊時代發展到今天，尤其移動網際網路的發展突飛猛進，筆記本、台式機不再是網絡終端的主體，手機、平板電腦、可穿戴設備、高清設備紛紛湧現。在網際網路快速發展的催生下，WEB前端框架得到快速的發展和變革。AngularJs框架在這場變革中經受住了考驗最終脫穎而出被前端開發者們所喜愛。

AngularJS是Google開源的一款JavaScript MVC框架，嚴格意義上說AngularJS屬於MVC框架的子集MVVM框架 。AngularJS繼承MVVM框架低耦合、視圖模型可重用、獨立開發、可測試的優勢。還有一些概念是AngularJS根據前端項目發展的需要提出並實現，有些是AngurlarJS對已有的概念進行的升級，下邊介紹幾個特性：

指令：AngularJS給HTML元素增加了指令集，一條指令是特定的邏輯行為，AngularJS將這些指令綁定到了DOM元素上，這些指令集將原本靜態的HTML結構代碼轉換成具有特殊邏輯的功能代碼，比如：ng-repeat(重複本段代碼)，ng-show(有條件顯示)。雖然AngularJS已經提供了相當數目的指令集，但是在實際開發中還是會不夠用，AngularJS的高明之處在於它提供了自定指令集的擴展功能。可以更好的幫助開發者開發出富有個性的、更為強大的前端應用。

模板：常見的模板機制主要是提供帶有占位符的HTML字符串，模板引擎將數據變量替換占位符之後，生成HTML字符串，控制器將HTML字符串用innerHTML方法插入到頁面後，頁面進行重構得到視圖。而AngularJS將模板直接生成DOM文檔，然後將DOM作為參數傳遞給模板引擎，模板引擎通過讀取指令，監視模型變化將數據同步到DOM中。同時AngularJS模板本身是在HTML代碼中添加命令，那麼模板本身就是HTML代碼，可以在編輯器中編輯。

👁 Image
...

雙向綁定：所謂雙向綁定指的是不僅當模型數據發生改變時，控制器自動將信息更新到視圖層的單向數據綁定，而且在視圖層發生改變時，將信息自動更新到模型層。這樣實現雙向綁定簡化了在開發中繁瑣的視圖層和模型層的數據通信邏輯。在開發簡潔程度雙向綁定明顯優於單項數據綁定，對比如圖1所示：

圖1

依賴注入：這個功能在後台常常被用到，但是在前端開發中還是比較新的概念。依賴注入也被列為AngularJS的核心功能。AngularJS是MVC模式的一個實例，那他同時支持模塊化開發，WEB應用抽象出來的通用服務，將會被AngularJS自動注入到應用控制器當中。依賴注入服務可以使你的Web應用良好構建(比如分離表現層、數據和控制三者的部件)並且鬆散耦合(一個部件自己不需要解決部件之間的依賴問題，它們都被DI子系統所處理)。

路由與多視圖：在前端中不管是數據、還是模板、媒體都是通過URL來進行連結的，AngularJS提供了路由功能管理URL。當同一個功能需要不同的視圖的時候，我們可以簡單的根據參數邏輯輕鬆的配置出多視圖。可以簡化跨站點和換膚的工作量。

上述介紹了是AngularJS推陳出新的一些功能，還有一些基礎功能比如端到端的測試、過濾器、控制器、執行期等基礎概念，都是在MVC中已經給出概念的功能。AngularJS如何將這些功能整合來使用的哪?AngularJS引入了作用域，作用域像一條管道，連接指定的模型和視圖。

通過對AngularJS的技術類型的了解可以看出其非常適合企業級WEB應用的開發。AngularJS可以為企業級應用提供怎麼的支持哪?那麼企業級應用的特點是怎樣的，企業級應用需要什麼?

企業級的WEB應用的特點是偏重的是數據存取，沒有花哨的界面，所以常見的界面控制項也是可枚舉的，如何讓開發界面的工作能更快完成，甚至由不擅長編寫代碼的業務設計人員來做，與界面原型的工作合二為一，能提高不少開發效率。在企業級WEB應用中常常出現大量的表單數據，而AngularJS的雙向綁定技術可以自動實現表單到模型的同步，從根本上減少工作量。

構建一個大型企業應用，最重要的是搭建成套組件體系。一般針對某行業的軟體，長期下來都會形成很多固定的產品模式，可以提煉成組件和規則，從前端來看，體現為控制項庫和前端邏輯。控制項庫這個是老生常談話題，在很多框架里都有這個概念，只是各自的實現規則不同。

從界面的角度來講，最為便利的方式是基於標籤的聲明式代碼，比如我們常見的HTML，還有微軟的XAML，Flex中的MXML等，都很直接高效的手段，設想一下在沒有可視化IDE的情況用類似Java Swing和微軟WinForm這樣的方式編寫界面，毫無疑問寫XML的方式更容易被接受。所以，可以得出初步的結論，界面的部分應該標籤化。很遺憾，HTML自帶的標籤是不足的，它有基本表單輸入控制項，但是缺乏Grid，Tree，Menu，Window之類更富有表現性的控制項。在這個點上，Angular帶來的好處是可擴展的標籤體系，這也就是標籤的語義化。AngularJS的主打功能之一是指令，使用這種方式，可以很容易擴展HTML標籤或者屬性，同時AngularJS將這種標籤指令連同HTML代碼一起寫，能更直觀的體現邏輯，將固有邏輯放到HTML模板中進行配置，可以減少javascript代碼邏輯的維護量。

目前企業級應用已經不能只考慮PC端的開發，很多業務功能已經移植到了移動端。Ionic高級移動APP開發框架是基於AngularJS框架專為移動端打造的HTML5框架。因為AngularJS是一個MVVM框架，使用Ionic開發的好處就是可以引用PC端已有的業務邏輯，在移動端只需要稍微調整視圖層。這樣獨立的業務邏輯可以減少單元測試、集成測試、打樁的維護成本。

用友UAP目前在前端這個已經利用AngularJS做下一代的企業開發的預研和使用，UAP在WEB框架上做出新的調整，在未來幾年一定可以使企業級WEB應用得到快速發展。

免責聲明：本文內容來源于京華網，文章觀點不代表壹讀立場，如若侵犯到您的權益，或涉不實謠言，敬請向我們提出檢舉。