如何借助AngularJS寫優雅的代碼

本篇文章為大家展示了如何借助AngularJS寫優雅的代碼，內容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。

接觸AngularJS還真有點碰巧，在用JQuery寫數據綁定的時候，我被數據對象和DOM之間的同步整煩了，要寫一大堆方法綁定和取值/設值的代碼邏輯，丑得要死。簡單說來，就是：

1. 數據對象發生變更以后，要及時更新DOM樹；

2. 用戶操作改變DOM樹以后，要回頭更新數據對象

這個問題還是舉例來說清楚一些，比如我定義了這樣一個queryObj：

{name: "sally", price: 30}

現在有這樣的DOM對象：

<input type="text" value="sally" /> <label>sally</label>

1、queryObj發生變化的時候，這兩個DOM對象要及時更新，一個是value需要更新，一個則是標簽里面的文本需要更新。

我就得寫這樣的JQuery設值語句：

$("input").val(queryObj.name);  $("label").text(queryObj.name);

2、當用戶操作改變input里面的值的時候，我也需要同步更新label里面的值，以及queryObj里面的值：

$("input").keydown(function(){     var data = $(this).val();     $("label").text(data);     queryObj.name = data; });

可以想象在DOM對象很多的時候，這種綁定語句和設值語句惡心得令人發指。

就這個問題，第1條對象的變更需要及時刷新到DOM上，有好多辦法，underscore.js、mustache之類的，模板+數據綁定嘛，當 然，需要手動調用來更新；但是反過來的第2條，DOM變更需要及時刷新到其它DOM對象上，也要刷回數據對象，我找了一會兒，也沒有看見有什么現成的實 現，正火大地準備自己寫一個簡單的機制，這時Google到了AngularJS的“two way  binding”，哈哈，暗爽，這不正是我想要的東西么？

鑒于這不是AngularJS的教程。在此我假設你有AngularJS的基礎知識，否則，建議你先閱讀AngularJS簡單易懂的教程。

雙向綁定

不管是MVC還是MVVM，數據綁定的過程總是惹人厭煩的，這樣的事情做得越少越好；如果需要數據綁定的逆過程，這樣的問題是現有MVC框架所很少考慮到的。AngularJS不但把雙向綁定的事情替我做了，而且也避免了特定視圖類的定義，直接使用原始的數據對象就好。

還是就上面這個問題，在寫HTML標簽的時候，增加ng-app和一個ng-controller的屬性，至于占位符，和普通的模板機制沒有什么區別：

<div ng-app ng-controller="QueryController">     <input type="text" value="{{queryObj.name}}" />     <label>{{queryObj.name}}</label> </div>

并且定義一個和ng-controller同名的方法，參數名為$scope：

function QueryController($scope) {     $scope.queryObj = {name : "sally", price : 30}; }

完畢了，這以后label、input和$scope.queryObj這三者就同步了，DOM變化的時候，其它二者也會被及時更新。這就是AngularJS的雙向綁定。我覺得這大概是AngularJS最精華的部分。

AngularJS官網的教程上，還給了這樣的說明：

從上面的例子，控制器、模板、數據模型、視圖，這幾個概念和之間的關系應該已經明晰了。

AngularJS遵循的設計理念，是構建UI應當用聲明式的方式來（什么是聲明式編程，請參閱我關于編程范型的文章）。值得一提的是，AngularJS引入的directive確實方便擴展了標簽集，可以寫出DSL樣子的代碼，非常非常靈活，比如：

<Alert>   <p>Error occurs.</p> </Alert>

這其中的Alert就是通過directive實現的自定義的標簽，最終可以被解析成具備“警告”樣式的html，但是，在對于directive的定義上面，就連官網的例子都是，生寫html片段模板代碼字符串的，用起來確實讓我不夠舒服。

依賴注入

依賴注入（Dependency Injection，DI）對于使用過Spring的程序員來說實在是再熟悉不過了，所謂依賴注入，就是把某個過程中注入值的步驟交給外部框架、容器來完成。舉例來說，這樣的代碼：

function PhoneListCtrl($scope, $http) {   $http.get('phones/phones.json').success(function(data) {     $scope.phones = data;   });    $scope.orderProp = 'age'; }

$scope、$http都是需要AngularJS框架傳入的服務變量，在此，參數的名字不可隨意修改，因為AngularJS是根據它來判定需要依賴注入的。

服務可以自己定義，再利用依賴注入的方式加進來使用，這對于模塊化和重用是很有幫助的。

過濾器

AngularJS的表達式功能比較弱，不支持條件判斷和流程控制，不過好在支持過濾器，這就一定程度上彌補了這個缺憾。過濾器是個很有趣的特 性，讓人想起了管道編程。到這里，開個玩笑，你大概也發現AngularJS真是一個到處抄襲，哦不，是借鑒各種概念和范型的東西，比如依賴注入抄 Spring，標簽定義抄Flex，過濾器抄Linux的管道：

{{ "lower cap string" | uppercase }} {{ 1304375948024 | date:"MM/dd/yyyy @ h:mma" }}

既然是管道編程，那么肯定支持迭代地使用管道：

<li ng-repeat="phone in phones | filter:query | orderBy:orderProp" class="thumbnail">

事件處理

解耦一定是相對的，在我們使用各種綁定語句把onClick="javascript:xxx"從DOM上拿掉的時候，我們就已經想到，總有一天，寫那些DOM事件綁定的語句寫煩了，一定還會拿回來：

<img ng-src="{{img}}" ng-click="setImage(img)">

相應地，定義setImage：

$scope.setImage = function(imageUrl) {     $scope.mainImageUrl = imageUrl; }

無論是把這個綁定關系拿走還是拿回來，都是有道理的，選擇你最傾心的方式。就我而言，我傾向于把同一模塊的代碼放置在一起，增加可理解性，而不在乎它的組成是DOM聲明還是JavaScript解釋。

另外，值得一提的是不同controller之間的通信方式，AngularJS推薦的方式是采用事件，具體說，controller是可以嵌套 的，$broadcast會把事件廣播給所有子controller，而$emit則會將事件冒泡傳遞給父controller，$on則是 AngularJS的事件注冊函數：

$scope.$on("DataChange", function (event, msg) {     $scope.$broadcast("DataChange", msg); });

但是，這讓我頗為不爽，如果我的兩個視圖在不同的controller內，我還非得要通過事件機制來保持同步的話，如此啰嗦，我還需要AngularJS干嘛？

吐槽歸吐槽，AngularJS還是非常值得學習使用的，尤其是其中的雙向綁定，用起來真是太爽了。

上述內容就是如何借助AngularJS寫優雅的代碼，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注億速云行業資訊頻道。