快捷導(dǎo)航

AngularJS框架中的雙向數(shù)據(jù)綁定機制詳解【減少需要重復(fù)的開發(fā)代碼量】

更新時間：2017年01月19日 11:37:00 作者：aitangyong

這篇文章主要介紹了AngularJS框架中的雙向數(shù)據(jù)綁定機制,結(jié)合實例形式分析了AngularJS雙向數(shù)據(jù)綁定機制的原理及實現(xiàn)方法,以及減少需要重復(fù)開發(fā)代碼量的優(yōu)勢,需要的朋友可以參考下

本文實例講述了AngularJS框架雙向數(shù)據(jù)綁定機制。分享給大家供大家參考，具體如下：

之前寫的一篇《AngularJS入門示例之Hello World詳解》，介紹ng-model的時候提到：使用AngularJS的雙向數(shù)據(jù)綁定機制，不需要我們編寫繁瑣的代碼來實現(xiàn)同樣的功能。現(xiàn)在我們看一個比較震撼的例子，看看angularJS是如何減少我們在前端開發(fā)中的繁瑣勞動的。越是感受到框架功能的強大，越是能夠激發(fā)學(xué)習(xí)的興趣和動力。

假如我們有一個學(xué)生信息列表，包含學(xué)生的姓名、地址和年齡信息。假如這個數(shù)據(jù)源信息保存在data.js文件中。

var g_phones = [
  <span style="white-space:pre"> </span>{
  "name": "wang xx",
  "address": "shanghai",
  "age": 20
},
{
  "name": "li xx",
  "address": "beijing & shanghai",
  "age": 10
},
{
  "name": "qian xx",
  "address": "xian",
  "age": 30
},
];

現(xiàn)在要求實現(xiàn)以下功能：

1、學(xué)生信息列表，默認(rèn)全部顯示，顯示順序跟數(shù)組順序一致。
2、提供一個搜索框，能夠進行模糊搜索。只要某個學(xué)生的name、address、age有一個符號搜索條件，就可以顯示。
3、提供一個選擇框，能夠按照name或者age對學(xué)生信息進行排序。

效果圖如下：

使用angularJS實現(xiàn)上述效果的代碼如下：

<!--ng-app和ng-controller都是angularJS框架的語法-->
<html ng-app ng-controller="RootController">
  <head>
    <!-- 加載數(shù)據(jù)文件-->
    <script src="data.js"></script>
    <script src="angular-1.2.25.js"></script>
    <script>
    // angular中的控制器,即MVC模式中的C角色
    function RootController($scope)
    {
      //讀取數(shù)據(jù)源,保存到angular的scope中
      $scope.students = g_students;
      // 搜索字段(默認(rèn)無條件,用空字符表示)
      $scope.queryProp = '';
      // 排序字段(默認(rèn)無排序,用空字符表示)
      $scope.orderProp = '';
    }
    </script>
  </head>
  <body>
    <!--ng-model實現(xiàn)數(shù)據(jù)的雙向綁定-->
    Search: <input ng-model="queryProp">
    Sort by:
    <select ng-model="orderProp">
      <option value="name">name</option>
      <option value="age">age</option>
    </select>
    <!--遍歷students,對每個項stu，進行filter和orderBy-->
    <ul>
      <li ng-repeat="stu in students | filter:queryProp | orderBy:orderProp">
        <p>{{stu.name}}</p>
        <p>{{stu.address}}</p>
        <p>{{stu.age}}</p>
      </li>
    </ul>
  </body>
</html>

可以看到，實現(xiàn)上述功能，需要的所有HTML/JS代碼加起來不到40行，代碼是很簡潔的，很清晰。

如果不使用angularJS，我們使用JavaScript和jQuery來完成上述功能，我們必須要做的事情如下：

1、給search和sort 這2個控件，綁定事件處理函數(shù)。當(dāng)搜索條件或者排序改變的時候，能夠?qū)崟r刷新學(xué)生信息列表。

2、由于有排序，所以必須要編寫選擇排序或冒泡等排序算法，需要考慮字符串比較和數(shù)字比較這2種情況。

3、在JS中，通過字符串拼接的方式將<li>插入到DOM中。寫過這種代碼的都知道，JS中進行HTML字符串的拼接，非常的復(fù)雜。

可以看到使用傳統(tǒng)的JS開發(fā)方式，有很多重復(fù)繁瑣的勞動，如事件處理函數(shù)的綁定、復(fù)雜的html字符串拼接等。通過這個例子，很明顯可以看到使用angularJS開發(fā)效率遠遠高于JQuery和javascript這種傳統(tǒng)的開發(fā)方式。如果你還沒有感受到angularJS的強大和吸引力，那么我們再看一下關(guān)于angular的產(chǎn)生背景。下面是來自大漠窮秋譯作《用AngularJS開發(fā)下一代Web應(yīng)用》的前言。

“關(guān)于Angular 的起源，我可以追溯到2009 年的Google Feedback 項目。當(dāng)時，對于項目的開發(fā)速度以及如何編寫可測試代碼的問題，我們已經(jīng)經(jīng)受了幾個月的折磨。6 個月時，我們開發(fā)了差不多17000 行前端代碼。這時候，團隊中的一個成員Misko Hevery 做出了一個大膽的宣言：利用他自己業(yè)余時間所開發(fā)的一個開源庫，他可以在兩周之內(nèi)把目前所有東西重寫一遍。

我當(dāng)時想，兩周的時間并不會給我們造成太大的影響，同時我們也接受了Misko 努力構(gòu)建一些東西的想法。然而Misko 最終還是估算錯了時間，他用了三個星期。但是，我們所有人還是被他深深地震撼了，更讓我們感到震撼的是，他所開發(fā)的新應(yīng)用的代碼量從原來的17000 行壓縮到了1500 行?？雌饋恚琈isko 的東西值得深入推廣。Misko 和我決定，圍繞他所提倡的理念組建一個團隊，這個簡單的理念就是：簡化對web 開發(fā)者的經(jīng)驗要求?！?/p>

通過上面的背景介紹，可以看到angular確實能夠極大的減少代碼量，提高開發(fā)效率。行文至此，如果還是沒有激起您對angularJS的興趣和好奇，那么是我語言組織和表達能力不行，不是angular不行。

更多關(guān)于AngularJS相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《AngularJS入門與進階教程》及《AngularJS MVC架構(gòu)總結(jié)》

希望本文所述對大家AngularJS程序設(shè)計有所幫助。

您可能感興趣的文章: