《Ember.js实战》——2.4　观察者模式

从概念上讲，单向绑定包含一个观察者与一个setter，双向绑定包含两个观察者与两个setter。观察者在不同语言和框架中有不同的称谓和实现。在Ember.js里，一个观察者就是一个JavaScript函数，无论其观察的变量何时更新，都会触发该函数的调用。

本节书摘来自异步社区《Ember.js实战》一书中的第2章，第2.4节，作者：【挪】Joachim Haagen Skeie（乔基姆•哈根•斯基）著，更多章节内容可以访问云栖社区“异步社区”公众号查看

2.4 观察者模式

从概念上讲，单向绑定包含一个观察者与一个setter，双向绑定包含两个观察者与两个setter。观察者在不同语言和框架中有不同的称谓和实现。在Ember.js里，一个观察者就是一个JavaScript函数，无论其观察的变量何时更新，都会触发该函数的调用。在绑定较难实现或希望在某个值发生改变时执行某个任务的场景中，比较适合使用观察者模式。

要实现一个观察者，请使用.addObserver()方法，或者使用内联的observes()方法后缀。代码清单2-6展示了观察者的一种使用方式。基于控制器的content数组的项数，启动并停止计时器。

代码清单2-6 观察控制器内容长度并控制计时器

观察者contentObserver是一个普通的JavaScript方法，其首先获取控制器的content数组。如果存在content数组项且计时器未启动，则创建一个新的计时器，时间间隔设为15 000 ms。计时器里将遍历每个数组项，并通过自定义的reload()方法来重新加载数组项数据。如果content数组为空，则停止已有计时器。

要让contentObserver函数成为一个观察者，我们添加了内联的observes()方法，并添加被观察属性。

可以使用替代的addObserver()方法来重构上面的观察者。函数的主体代码部分都是一样的，但声明稍有不同，如代码清单2-7所示。

代码清单2-7 通过.addObserver方法创建观察者

虽然这是一种创建观察者的可能方式，但我发现如代码清单2-6的内联方式更清晰并更具可读性。我也习惯为观察者函数添加Observer后缀，当然这不是必须的。

有时你可能想观察数组项的属性，在记事本应用里，Notes.NotesController有一个Ember对象组成的content数组，该对象有两个属性：name和value。为了观察每个对象的name属性，可以使用@each来遍历被观察属性，如代码清单2-8所示。

代码清单2-8 通过@each观察数组项的改变

有了Ember.js对象模型，本章的所有功能才可能得以实现，接下来具体了解Ember.js对象模型。

Vue.js的数据绑定原理 Vue.js是一款流行的前端框架，其数据绑定是其最大的特点之一。本文将介绍Vue.js的数据绑定原理，包括单向数据绑定和双向数据绑定。
框架简介之Vue.js vue官网说：Vue.js 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。 渐进式，我个人理解就是阶梯式向前。vue是轻量级的，它有很多独立的功能或库，我们会根据我们的项目来选用vue的一些功能。就像我们开发项目时如果只用到vue的声明式渲染，我就只用vue的声明渲染，而我们要用他的组件系统，我们可以引用它的组件系统。
Ember.js 项目开发之 Ember Data Ember.js 是一个基于MVVM模型的开源框架，该框架主要用于创建复杂的多页面应用程序。它最大的特点是：持续推出最新的特性，并不会丢弃任何旧功能。
React 必学SSR框架——next.js ​ 首先我们就回顾一下，我们到底是怎么告别了使用 php/jsp 做服务器端渲染，进入前后端分离的客户端渲染时代，又为什么重新回到了服务端渲染。
Vue.js中MVVM的原理和实现 MVVM拆开来即为Model-View-ViewModel，有View，ViewModel，Model三部分组成。View层代表的是视图、模版，负责将数据模型转化为UI展现出来。Model层代表的是模型、数据，可以在Model层中定义数据修改和操作的业务逻辑。
异步社区 异步社区(www.epubit.com)是人民邮电出版社旗下IT专业图书旗舰社区，也是国内领先的IT专业图书社区，致力于优质学习内容的出版和分享，实现了纸书电子书的同步上架，于2015年8月上线运营。公众号【异步图书】，每日赠送异步新书。