快捷導(dǎo)航

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

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

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

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

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

假如我們有一個(gè)學(xué)生信息列表，包含學(xué)生的姓名、地址和年齡信息。假如這個(gè)數(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)在要求實(shí)現(xiàn)以下功能：

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

效果圖如下：

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

<!--ng-app和ng-controller都是angularJS框架的語(yǔ)法-->
<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)無(wú)條件,用空字符表示)
      $scope.queryProp = '';
      // 排序字段(默認(rèn)無(wú)排序,用空字符表示)
      $scope.orderProp = '';
    }
    </script>
  </head>
  <body>
    <!--ng-model實(shí)現(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,對(duì)每個(gè)項(xiàng)stu，進(jìn)行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>

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

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

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

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

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

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

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

我當(dāng)時(shí)想，兩周的時(shí)間并不會(huì)給我們?cè)斐商蟮挠绊?，同時(shí)我們也接受了Misko 努力構(gòu)建一些東西的想法。然而Misko 最終還是估算錯(cuò)了時(shí)間，他用了三個(gè)星期。但是，我們所有人還是被他深深地震撼了，更讓我們感到震撼的是，他所開(kāi)發(fā)的新應(yīng)用的代碼量從原來(lái)的17000 行壓縮到了1500 行?？雌饋?lái)，Misko 的東西值得深入推廣。Misko 和我決定，圍繞他所提倡的理念組建一個(gè)團(tuán)隊(duì)，這個(gè)簡(jiǎn)單的理念就是：簡(jiǎn)化對(duì)web 開(kāi)發(fā)者的經(jīng)驗(yàn)要求?！?/p>

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

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

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

您可能感興趣的文章: