计算属性,以下简称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. 关于实现Extjs动态加载类的方式实现

    Extjs4以前的版本没有动态加载类的方式,这样开发程序的时候加载很多的js会导致加载变慢,由于本人一直使用extjs3的版本进行开发,于是简单实现了一个动态加载类的管理器,使用方式与extjs4的方 ...

  2. Linux启动与登陆环境

    linux启动流程 参考:http://www.ruanyifeng.com/blog/2013/08/linux_boot_process.html 加载内核,首先读入/boot 目录下的内核文件. ...

  3. HMC V7.9.0升级至SP2版本

    补丁下载地址:http://www-933.ibm.com/support/fixcentral/ 选择补丁版本 MH01405是和ftp://ftp.software.ibm.com/softwar ...

  4. Android 图片添加水印图片或者文字

    给图片添加水印的基本思路都是载入原图,添加文字或者载入水印图片,保存图片这三个部分 添加水印图片: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 ...

  5. ngnix 502 bad gateway 的解决办法之空间满了

    网站一直运行都很正常,但某天登录后台却出现502 bad gateway,上网搜索都是一大堆解决办法,没可操作性.网站难道出现安全问题?这个应该很少概率.最后排查发现空间满了. 使用命令:df -hl ...

  6. silverLight--绑定数据dataGrid

    后台代码编写 ,为表格绑定数据: using System; using System.Collections.Generic; using System.Linq; using System.Net ...

  7. UIActivityIndicatorViewStyle

    UIActivityIndicatorView *indicatorV = [[UIActivityIndicatorView alloc] initWithActivityIndicatorStyl ...

  8. Linux的phpstudy mysql登录

    使用绝对路径登录 /phpStudy/mysql/bin/mysql -uroot -p; 设置远程登录密码 GRANT ALL PRIVILEGES ON *.* TO 'itoffice'@'%' ...

  9. 移动端H5页面的最佳终端适配之Flexible

    lib-flexible是什么? lib-flexible是一个制作H5适配的开源库,可以点击这里下载相关文件,获取需要的JavaScript和CSS文件. 当然你可以直接使用阿里CDN: <s ...

  10. NPOI创建DOCX常用操作【转】

    1.  创建文档 XWPFDocument m_Docx = new XWPFDocument();2.  页面设置 //1‘=1440twip=25.4mm=72pt(磅point)=96px(像素 ...