{{angular.js 使用技巧}} - 實現計算列屬性

前端MV*框架如今有不少，其中某些框架有計算列（又叫監控屬性），好比：微軟推薦的 Knockout.js 和博客園司徒正美的 avalon.js 框架。

本人只使用過 Knockout.js，avalon.js 沒有時間研究，據做者介紹是款集合全部MV*框架優勢而打造的一款輕量級MVVM框架。

 

Avalon.js 實現計算列示例：

以前就有看過 avalon.js 關於計算列屬性的一個示例， http://rubylouvre.github.io/mvvm/

輸入First Name 或者 Last Name，Full Name時時變化，當你輸入Full Name的時候，時時監控並更新 First Name和 Last Name。

avalon的代碼以下：

<fieldset ms-controller="simple">
    <legend>例子</legend>
    <p>First name: <input ms-duplex="firstName" /></p>
    <p>Last name: <input ms-duplex="lastName"  /></p>
    <p>Hello,    <input ms-duplex="fullName"></p>
    <div>{{firstName +" | "+ lastName }}</div>
    <p>nick name: <input ms-duplex="nick.name"  /></p>
    <p>{{nick.name}}</p>
</fieldset>
avalon.define("simple", function(vm) {
    vm.firstName = "司徒"
    vm.lastName = "正美"
    vm.fullName = {//一個包含set或get的對象會被當成PropertyDescriptor，
        set: function(val) {//set, get裏面的this不能改爲vm
            var array = (val || "").split(" ");
            this.firstName = array[0] || "";
            this.lastName = array[1] || "";
        },
        get: function() {
            return this.firstName + " " + this.lastName;
        }
    },
    vm.nick = {
          name: "暗黑之民"
    }
});

　

看起來avalon框架還不錯，實現計算列的功能代碼量比較少。上面這個例子主要的難點應該是輸入Full Name時怎樣讓First Name和Last Name時時變化，雖然這種需求不是特別多，可是能夠做爲例子講解。

Angular.js 實現方式：

Angular.js 是沒有計算列屬性之說的，可是怎樣可以實現上述示例的功能呢？

主要思路：監控 First name 和 Last name 當有變化時更新Full name，同時Full name 改變的時候要根據空格切割 Full name更新First name 和Last name，廢話很少說，直接上代碼示例：

 

avalon的計算列展示形式更標準化一點，經過 get set來實現對Full Name的監控和設置，Angular.js 倒是經過$watch 監控屬性（或者函數）達到一樣的效果，這也許就是Angular.js做者以爲沒有必要加入計算列屬性的緣由吧（純屬我的猜想）。

本篇文章只是經過 比較的方式來展現下 Angular.js 監控屬性的功能！但願可以發散使用Angular的小夥伴的思惟方式。

擴散知識：

1. 上述示例是經過監控($watch)函數來達到想要的效果，其實$watch還能夠監控數組，如：

$scope.$watch("[firstName,lastName]",function(newValue){
      $scope.fullName = (newValue[0] || "") + " " + (newValue[1] || "")
    
  },true);

關於$watch的詳細介紹參考 官方文檔：http://docs.angularjs.org/api/ng.$rootScope.Scope ， 英文很差的請看：http://www.angularjs.cn/A0a6

2. 最後分享一個用Knockout.js 作的示例，達到一樣的效果，和 avalon.js 使用方式差很少，司徒正美應該也是參考了Knockout的吧，注：只要光標失去焦點才能觸發更新

 

做者： why520crazy 
新浪微博:  @why520crazy
出處： http://why520crazy.cnblogs.com 本文版權歸做者和博客園共有，歡迎轉載，但未經做者贊成必須保留此段聲明，且在文章頁面明顯位置給出原文鏈接，不然保留追究法律責任的權利。