计算属性,以下简称CP。简单概括来讲,就是在需要属性值的时候计算一个Function,并将Function返回的值保存在属性中,当第二次获取属性值时,如果发现属性并未改变则直接读取属性,如果属性依赖的事物发生改变,则重新计算该属性值。

下面用C#实现基本的CP原理(CP其实更复杂一些,但这样一个简单的例子有助于有一个基本的CP理解):

private object _myCar;                                    // 内部缓存变量
public bool IsDirty; // MyCar属性依赖的对象 public object MyCar {
get {
if(_isDirty) {
_myCar = 4S.BuyANewCar('Audio A4'); // 重新计算属性值并保存
}
return _myCar;
}
}

文章索引

JS前端框架之Ember.js系列

1. What is CP?

  In a nutshell, computed properties let you declare functions as properties. You create one by defining a computed property as a function, which Ember will automatically call when you ask for the property.

  简而言之,计算属性让你可以把函数方法声明为属性,你通过定义一个计算属性作为函数方法时,Ember将自动调用当访问属性时。

1. 第一种写法:

App.Person = Ember.Object.extend({
firstName: null,
lastName: null, fullName: function() {
return this.get('firstName') + ' ' + this.get('lastName');
}.property('firstName', 'lastName') // fullName是一个依赖属性,当firstName或者lastName发生改变时,并且当访问fullName是,重新执行function,否则返回已缓存的fullName值。
}); var ironMan = App.Person.create({
firstName: "Tony",
lastName: "Stark"
}); ironMan.get('fullName'); // "Tony Stark"

2. 第二种写法:(推荐写法

  CP也可以这样写,建议如下写法,避免“禁用”function的property扩展带来的问题。

  [Prototype Extensions](http://emberjs.com/guides/configuring-ember/disabling-prototype-extensions/)
 fullName: Ember.computed('firstName', 'lastName', function() {
return this.get('firstName') + ' ' + this.get('lastName');
})

  Ember.js v1.12 更新带有Set和get方法的CP:

  fullName: Ember.computed("firstName", "lastName", {
get: function() {
return this.get("firstName") + " " + this.get("lastName");
},
set: function(key, newName) {
var parts = newName.split(" ");
this.setProperties({ firstName: parts[0], lastName: parts[1] });
return newName;
}
});

3. 第三种写法:

  // An array of Ember.Table.Row computed based on `content`
bodyContent: Ember.computed(function() {
return RowArrayController.create({
target: this,
parentController: this,
container: this.get('container'),
itemController: Row,
content: this.get('content')
});
}).property('content.[]', '_reloadBody'),

2. CP中名词描述定义

2.1 CP:Computed Property

2.2 CP属性:上文例子中的‘fullName’。

2.3 CP所依赖的源属性:上文例子中的‘firstName’、‘lastName’。

2.4 CP的回调方法:上文例子中的function(){......}方法。

2.5 CP属性的Setter/Getter

3. CP重要原则(特性)

3.1 只有当获取或设置CP属性时,才可能会触发CP的回调方法,也就是说CP属性是属于‘懒加载’的方式(使用时计算行为)。

3.2 当CP属性依赖于.property('person.name', 'person.age')时,当person.name、person.age或person本身发生改变时改变(链式依赖)。

3.3 当CP属性依赖于.property('columns.@each.isLoaded')时:

  • columns里面任何一个元素的isLoaded属性发生变化。
  • columns增加元素或者删除子元素。
  • columns数组本身被重新赋值。
  • 不能依赖@each.owner.@each.name

3.4 当CP属性依赖于.property('columns.@each')时:

  • 当columns增加或删除元素。
  • 当columns自身被替换或重新赋值。

3.5 当CP属性依赖于.property('columns.[]')时:

  与3.4 绑定.property('columns.@each') 行为相同。

3.6 当通过set方法设置CP属性时,然后调用get方法获取CP属性,则不调用CP回调,set时值被缓存。(CP属性被覆盖)

3.7 当存在两个互相依赖的CP属性时,仅仅发生三次属性变更。

3.8 原则上不要将CP的依赖属性附着在另一个CP属性上。

3.9 当CP属性依赖于对象列表时,例如.property('a.b.c.d')上时,节点上任意对象发生变化时,均会重新计算属性。(链式依赖

4. CP宏定义

Ember.computed.empty: empty(属性名)返回bool

Ember.computed.not: not(属性名)返回bool

Ember.computed.alias:alias(属性名),双向绑定, alias不要依赖于一个CP.

Ember.computed.defaultTo: 如果CP属性为null,则读取依赖属性值一次

Ember.computed.match(属性名, 匹配字符串)

Ember.computed.gt(属性名,数字),大于返回bool

Ember.computed.gte(属性名,数字),大于或等于bool

Ember.computed.and(属性名,属性名), 并集

Ember.computed.or(属性名, 属性名), 交集

Ember.computed.collect( 数组 ) ,匹配所有项,没有相则为null

Ember.computed.oneWay(属性名) ,单方向从源到PC属性. CP可以被设置,但不会影响到CP依赖的属性。

Ember.computed.readOnly(属性名) ,CP属性不允许被设置,但CP所依赖的源属性更新CP值。

更多宏定义请参考这里:http://emberjs.com/api/classes/Ember.computed.html#method_alias

5. CP使用场景

5.1 在我们使用的对象上,希望使用一个属性值监听一个或多个属性的变更,或者CP属性强依赖于某些属性,而且还能缓存CP属性值,减少性能损耗。(CP特性请参考3.1)

5.2 CP可以依赖在一个对象的多个属性上, 特别是绑定在集合元素上甚至监听集合元素内部某一属性,但层次有限制。例如.property('person{name,age}')或.property('pencilBox.[]', penBox.@each.color', penBox.@each)。(CP特性请参考3.2、3.3、3.4)

5.3 Ember.computed.alias作用于两个强关联对象的双向绑定,并提供缓存机制。

5.4 通过CP来组合属性,CP属性回调中不能有边界效应等循环、异步方法。

6. Q & A

6.1 当计算属性(CP)设置为getter和setter时,其CP回调函数触发的场景:

  • 设置(set)CP属性时,无论何时都触发CP回调方法。
  • 当获取CP属性时,若CP依赖属性未发生变化,则不执行CP回调方法。

6.2 Ember.Computed(function(){}).property('xxxx') 与 function(){}.property('xxxx')区别:

  • 前者可以用{get:function(){}, set: function(key, newName){}}的方式,不必在判断Argument.length,实现了get、set的语法糖。
  fullName: Ember.computed("firstName", "lastName", {
get: function() {
return this.get("firstName") + " " + this.get("lastName");
},
set: function(key, newName) {
var parts = newName.split(" ");
this.setProperties({ firstName: parts[0], lastName: parts[1] });
return newName;
}
});

6.3 CP之间的依赖行为(cp1->cp2->x):

  • cp2重新计算后,并不会主动触发cp1计算。
  • 如果x更新后,直接获取cp1属性,则cp2也被触发计算。

6.4 Person.get('firstName')和Person.firstName之间的区别:

  当firstName为(非计算属性)普通属性时,行为相同。

  当firstName为CP属性时,前者能触发CP回调方法,后者不能。

7. 示例代码

[github示例代码](https://github.com/Cuiyansong/ember-table-learnning/tree/master/ember-test/tests/unit)

Ember更新日志:http://emberjs.com/deprecations/v1.x/#toc_deprecate-using-the-same-function-as-getter-and-setter-in-computed-properties

Ember-Data: http://guides.emberjs.com/v1.13.0/object-model/computed-properties-and-aggregate-data/

Emberjs之ComputedProperty的更多相关文章

  1. Ember.js系列文章

    JS前端框架之Ember.js系列文章 本文为文章索引,主要是罗列Ember.js的相关文章便于阅读. 相关演示代码:github for free. 基础篇 1. EmberJs之What|Why| ...

  2. EmberJs之数组绑定@each&[]

    写在前面 好长时间没有写博客了,昨天花了些时间又整理了下之前发布过的<Ember.js之computed Property>文章,并创建了一个测试代码库,花了些时间,希望能使用测试代码的方 ...

  3. emberjs学习二(ember-data和localstorage_adapter)

    emberjs学习二(ember-data和localstorage_adapter) 准备工作 首先我们加入ember-data和ember-localstorage-adapter两个依赖项,使用 ...

  4. emberjs学习一(环境和第一个例子)

    code { margin: 0; padding: 0; white-space: pre; border: none; background: transparent; } code, pre t ...

  5. EmberJs之使用Ember-Data

    写在前面 最近比较忙,换了新工作还要学习很多全新的技术栈,并给自己找了很多借口来不去坚持写博客.常常具有讽刺意味的是,更多剩下的时间并没有利用而更多的是白白浪费,也许这就是青春吧,挥霍吧,这不是我想要 ...

  6. EmberJs之3W

    写在前面 最近比较忙,换了新工作还要学习很多全新的技术栈,并给自己找了很多借口来不去坚持写博客.常常具有讽刺意味的是,更多剩下的时间并没有利用而更多的是白白浪费,也许这就是青春吧,挥霍吧,这不是我想要 ...

  7. emberjs初学记要

    code { margin: 0; padding: 0; white-space: pre; border: none; background: transparent; } code, pre t ...

  8. emberJS

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  9. quora 中有关angular与emberjs的精彩辩论

    原贴地址,要注册才能看,这里只有国人翻译的一部分内容 本文源自于Quora网站的一个问题,作者称最近一直在为一个新的Rails项目寻找一个JavaScript框架,通过筛选,最终纠结于Angular. ...

随机推荐

  1. JavaScript基础知识整理(2)

    15.处理图像 注意:(1)在写js文件时,尽量将函数的声明往后写,将函数调用写在前面,这样能够使代码结构很清晰. (2)一个网页中翻转器一般超过3个,所以使用for循环减少重复使用翻转器代码的次数. ...

  2. easyui datagird 列宽自适应

    代码如下: onLoadSuccess: function (data) { var rows = data.rows; //得到行数据 var columnMaxCharacter = new Ar ...

  3. WinCE下读取注册表获得SD路径

    WinCE下读取注册表获得SD路径 [要点]WinCE注册表中[HKEY_LOCAL_MACHINE\System\StorageManager\Profiles\SDMemory\] 下键Folde ...

  4. awk 的一些用法

    awk,我觉得是Linux里面处理文本最精妙的命令,它是一个行处理的命令,它最初级的用法是:给定一些简单的pattern,然后按照这个pattern 去搜索匹配的行.它的高级用法是用awk来编程,除了 ...

  5. 三大基础排序算法BubbleSort、SelectSort、InsertSort

    public class Strategy { public static void main(String[] args) { int [] array=new int[]{26,25,15,42, ...

  6. 蓄水池算法(Reservoir Sampling)

    蓄水池算法是一种随机算法,可以形象的描述为从一个n维的list中选取k个元素,其中n是一个很大的数或者n是一个未知的数,而且一般n很大使得不会将list存在主存中. 解法: i = 0 while m ...

  7. 一些比较常用的Linux命令

    我有一些是我是参考别人的,忘记是谁了,在这里要感谢一下ta. #命令格式就是就是由命令+空格+一些命令用法的选项(可以选择多个用法)+空格+/+目录名或者文件名,有些是直接打命令就可以了,比如ls - ...

  8. 安卓奇葩问题之:运行OK,打包安装崩溃(原因是:代码不规范导致编译出错)

    咳咳,还是那句话,真是日了狗了 这个问题真的很难找,废话不多少,上酸菜. 报错信息是这个方法返回的图片找不到 public static int getImgID(boolean isBig, int ...

  9. Debian 8下vsftpd安装与配置

    Debian 8下vsftpd安装与配置 0.环境 root@remote:/# uname -r 3.16.0-4-amd64 root@remote:/e# lsb_release No LSB ...

  10. android调用系统相机并获取图片

    如果不是特别的要求,通过拍照的方式取得图片的话,我们一般调用系统的拍照来完成这项工作,而没必要再自己去实现一个拍照功能.调用系统相机很简单,只需要一个intent就可以跳转到相几界面,然后再通过onA ...