{{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
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。