From dc6437d0b2da4f52cb0950ceb61715a4ccbeab92 Mon Sep 17 00:00:00 2001 From: Ruan Yifeng Date: Thu, 20 Nov 2014 17:59:33 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9object.observe?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/object.md | 42 ++++++++++++++++++++++++++++++++++++++---- docs/reference.md | 3 ++- 2 files changed, 40 insertions(+), 5 deletions(-) diff --git a/docs/object.md b/docs/object.md index 9630cdd..61abb1b 100644 --- a/docs/object.md +++ b/docs/object.md @@ -391,6 +391,42 @@ Object.observe方法用来监听对象（以及数组）的变化。一旦监听 ```javascript +var user = {}; +Object.observe(user, function(changes){ + changes.forEach(function(change) { + user.fullName = user.firstName+" "+user.lastName; + }); +}); + +user.firstName = 'Michael'; +user.lastName = 'Jackson'; +user.fullName // 'Michael Jackson' + +``` + +上面代码中，Object.observer方法监听user对象。一旦该对象发生变化，就自动生成fullName属性。 + +一般情况下，Object.observe方法接受两个参数，第一个参数是监听的对象，第二个函数是一个回调函数。一旦监听对象发生变化（比如新增或删除一个属性），就会触发这个回调函数。很明显，利用这个方法可以做很多事情，比如自动更新DOM。 + +```javascript + +var div = $("#foo"); + +Object.observe(user, function(changes){ + changes.forEach(function(change) { + var fullName = user.firstName+" "+user.lastName; + div.text(fullName); + }); +}); + +``` + +上面代码中，只要user对象发生变化，就会自动更新DOM。如果配合jQuery的change方法，就可以实现数据对象与DOM对象的双向自动绑定。 + +回调函数的changes参数是一个数组，代表对象发生的变化。下面是一个更完整的例子。 + +```javascript + var o = {}; function observer(changes){ @@ -406,9 +442,7 @@ Object.observe(o, observer); ``` -上面代码中，Object.observe方法监听一个空对象o，一旦o发生变化（比如新增或删除一个属性），就会触发回调函数。 - -Object.observe方法指定的回调函数，接受一个数组（changes）作为参数。该数组的成员与对象的变化一一对应，也就是说，对象发生多少个变化，该数组就有多少个成员。每个成员是一个对象（change），它的name属性表示发生变化源对象的属性名，oldValue属性表示发生变化前的值，object属性指向变动后的源对象，type属性表示变化的种类。基本上，change对象是下面的样子。 +参照上面代码，Object.observe方法指定的回调函数，接受一个数组（changes）作为参数。该数组的成员与对象的变化一一对应，也就是说，对象发生多少个变化，该数组就有多少个成员。每个成员是一个对象（change），它的name属性表示发生变化源对象的属性名，oldValue属性表示发生变化前的值，object属性指向变动后的源对象，type属性表示变化的种类。基本上，change对象是下面的样子。 ```javascript @@ -448,4 +482,4 @@ Object.unobserve(o, observer); ``` -注意，Object.observe和Object.unobserve这两个方法不属于ES6，而是属于ES7的一部分，Chrome 36已经开始支持了。 +注意，Object.observe和Object.unobserve这两个方法不属于ES6，而是属于ES7的一部分。不过，Chrome浏览器从33版起就已经支持。 diff --git a/docs/reference.md b/docs/reference.md index 3e2e9ba..2cd53cf 100644 --- a/docs/reference.md +++ b/docs/reference.md @@ -28,7 +28,8 @@ - Axel Rauschmayer, [Handling required parameters in ECMAScript 6](http://www.2ality.com/2014/04/required-parameters-es6.html) - Axel Rauschmayer, [ECMAScript 6’s new array methods](http://www.2ality.com/2014/05/es6-array-methods.html): 对ES6新增的数组方法的全面介绍 - Nicholas C. Zakas, [Creating defensive objects with ES6 proxies](http://www.nczonline.net/blog/2014/04/22/creating-defensive-objects-with-es6-proxies/) -- Addy Osmani, [Data-binding Revolutions with Object.observe()](http://www.html5rocks.com/en/tutorials/es7/observe/): 介绍Object.observer()的概念 +- Addy Osmani, [Data-binding Revolutions with Object.observe()](http://www.html5rocks.com/en/tutorials/es7/observe/): 介绍Object.observe()的概念 +- Sella Rafaeli, [Native JavaScript Data-Binding](http://www.sellarafaeli.com/blog/native_javascript_data_binding): 如何使用Object.observe方法，实现数据对象与DOM对象的双向绑定 - Dmitry Soshnikov, [ES6 Notes: Default values of parameters](http://dmitrysoshnikov.com/ecmascript/es6-notes-default-values-of-parameters/): 介绍参数的默认值 - Mozilla Developer Network, [WeakSet](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakSet)：介绍WeakSet数据结构 - Mathias Bynens, [Unicode-aware regular expressions in ES6](https://mathiasbynens.be/notes/es6-unicode-regex): 详细介绍正则表达式的u修饰符