计算属性,以下简称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. linux环境下配置solr5.3详细步骤

    本人上周五刚刚配置了一遍centos下配置solr5.3版本,综合借鉴并改进了一些教程,贴出如下 单位使用内网,本教程暂无截图,抱歉 另,本人是使用.net编程调用solr的使用的是solrnet,在 ...

  2. 九月二十八JS验证

    js表单验证 js可用发来在数据被送往服务器前对HTML表单中的这些输入数据进行验证 被js验证的这些典型的表单数据有: >用户是否已填写表单中的必填项目: >用户输入的邮件地址是否是合法 ...

  3. VS2012开发工具BUG

    发现VS2012开发工具 新建立项目名称长度限制的一个bug, 向导方式名称长度限制56个,但建立好的项目名称长度是可以改的很长很长. 也有想是不是生成程序集的名称会有限制,同样这里生成程序集名称,及 ...

  4. H5学习系列之Communication API

    1 .postMessage API 首先介绍一下什么是iframe? 百度百科里这样写道:IFRAME,HTML标签,作用是文档中的文档,或者浮动的框架(FRAME). 我的理解就是网页中的网页. ...

  5. 证书过期-->app审核提示90034证书错误

    1.证书过期问题,去钥匙串中删除过期证书,然后新下载一个证书,重新添加,注:一定要把所有过期证书全部删除,如果不显示则点击钥匙串-->显示过期证书 然后下载新证书:https://develop ...

  6. Log

    Public Shared Sub WriteLog(ByVal FormID As String, ByVal ex1 As Exception) 'log信息 Dim loginfo As Str ...

  7. mysql:添加索引

    ALTER TABLE tb_user_type ADD INDEX user_type_index3 (report_type_id) ALTER TABLE tb_user_type ADD IN ...

  8. 数据存储--沙盒sandBox

    默认情况下,每个沙盒必含有3个文件夹:Documents, Library 和 tmp 一.沙盒(sandbox)出于安全的目的,应用程序只能将自己的数据和偏好设置写入到几个特定的位置上.当应用程序被 ...

  9. 1032: [JSOI2007]祖码Zuma

    链接:http://www.lydsy.com/JudgeOnline/problem.php?id=1032 Description 这是一个流行在Jsoi的游戏,名称为祖玛.精致细腻的背景,外加神 ...

  10. load与initialize

    NSObject类有两种初始化方式load和initialize load + (void)load; 对于加入运行期系统的类及分类,必定会调用此方法,且仅调用一次. iOS会在应用程序启动的时候调用 ...