Skip to content

Commit dc6437d

Browse files
committed
修改object.observe
1 parent 29c88ee commit dc6437d

File tree

2 files changed

+40
-5
lines changed

2 files changed

+40
-5
lines changed

docs/object.md

Lines changed: 38 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -391,6 +391,42 @@ Object.observe方法用来监听对象(以及数组)的变化。一旦监听
391391

392392
```javascript
393393

394+
var user = {};
395+
Object.observe(user, function(changes){
396+
changes.forEach(function(change) {
397+
user.fullName = user.firstName+" "+user.lastName;
398+
});
399+
});
400+
401+
user.firstName = 'Michael';
402+
user.lastName = 'Jackson';
403+
user.fullName // 'Michael Jackson'
404+
405+
```
406+
407+
上面代码中,Object.observer方法监听user对象。一旦该对象发生变化,就自动生成fullName属性。
408+
409+
一般情况下,Object.observe方法接受两个参数,第一个参数是监听的对象,第二个函数是一个回调函数。一旦监听对象发生变化(比如新增或删除一个属性),就会触发这个回调函数。很明显,利用这个方法可以做很多事情,比如自动更新DOM。
410+
411+
```javascript
412+
413+
var div = $("#foo");
414+
415+
Object.observe(user, function(changes){
416+
changes.forEach(function(change) {
417+
var fullName = user.firstName+" "+user.lastName;
418+
div.text(fullName);
419+
});
420+
});
421+
422+
```
423+
424+
上面代码中,只要user对象发生变化,就会自动更新DOM。如果配合jQuery的change方法,就可以实现数据对象与DOM对象的双向自动绑定。
425+
426+
回调函数的changes参数是一个数组,代表对象发生的变化。下面是一个更完整的例子。
427+
428+
```javascript
429+
394430
var o = {};
395431

396432
function observer(changes){
@@ -406,9 +442,7 @@ Object.observe(o, observer);
406442

407443
```
408444

409-
上面代码中,Object.observe方法监听一个空对象o,一旦o发生变化(比如新增或删除一个属性),就会触发回调函数。
410-
411-
Object.observe方法指定的回调函数,接受一个数组(changes)作为参数。该数组的成员与对象的变化一一对应,也就是说,对象发生多少个变化,该数组就有多少个成员。每个成员是一个对象(change),它的name属性表示发生变化源对象的属性名,oldValue属性表示发生变化前的值,object属性指向变动后的源对象,type属性表示变化的种类。基本上,change对象是下面的样子。
445+
参照上面代码,Object.observe方法指定的回调函数,接受一个数组(changes)作为参数。该数组的成员与对象的变化一一对应,也就是说,对象发生多少个变化,该数组就有多少个成员。每个成员是一个对象(change),它的name属性表示发生变化源对象的属性名,oldValue属性表示发生变化前的值,object属性指向变动后的源对象,type属性表示变化的种类。基本上,change对象是下面的样子。
412446

413447
```javascript
414448

@@ -448,4 +482,4 @@ Object.unobserve(o, observer);
448482

449483
```
450484

451-
注意,Object.observe和Object.unobserve这两个方法不属于ES6,而是属于ES7的一部分,Chrome 36已经开始支持了
485+
注意,Object.observe和Object.unobserve这两个方法不属于ES6,而是属于ES7的一部分。不过,Chrome浏览器从33版起就已经支持

docs/reference.md

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,8 @@
2828
- Axel Rauschmayer, [Handling required parameters in ECMAScript 6](http://www.2ality.com/2014/04/required-parameters-es6.html)
2929
- Axel Rauschmayer, [ECMAScript 6’s new array methods](http://www.2ality.com/2014/05/es6-array-methods.html): 对ES6新增的数组方法的全面介绍
3030
- Nicholas C. Zakas, [Creating defensive objects with ES6 proxies](http://www.nczonline.net/blog/2014/04/22/creating-defensive-objects-with-es6-proxies/)
31-
- Addy Osmani, [Data-binding Revolutions with Object.observe()](http://www.html5rocks.com/en/tutorials/es7/observe/): 介绍Object.observer()的概念
31+
- Addy Osmani, [Data-binding Revolutions with Object.observe()](http://www.html5rocks.com/en/tutorials/es7/observe/): 介绍Object.observe()的概念
32+
- Sella Rafaeli, [Native JavaScript Data-Binding](http://www.sellarafaeli.com/blog/native_javascript_data_binding): 如何使用Object.observe方法,实现数据对象与DOM对象的双向绑定
3233
- Dmitry Soshnikov, [ES6 Notes: Default values of parameters](http://dmitrysoshnikov.com/ecmascript/es6-notes-default-values-of-parameters/): 介绍参数的默认值
3334
- Mozilla Developer Network, [WeakSet](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakSet):介绍WeakSet数据结构
3435
- Mathias Bynens, [Unicode-aware regular expressions in ES6](https://mathiasbynens.be/notes/es6-unicode-regex): 详细介绍正则表达式的u修饰符

0 commit comments

Comments
 (0)