Backbone model implement which support observe features via Object.observe or Object.prototype.watch etc.
npm install backbone-observe[![NPM version][npm-version-image]][npm-url] [![NPM downloads][npm-downloads-image]][npm-url] [![MIT License][license-image]][license-url] 
------
Backbone-observe is a Backbone extension component which make Backbone framework to support Object.observe feature. This component can be used at browser and node-js environment.
You can get more information in this [article][1].
npm install backbone-observe -g
And then require the package in your code.
var BackboneObserve = require("backbone-observe");
var om = new BackboneObserve.model({id: 'id', foo: 1, bar: 2, baz: 3});
require(["backbone-observe"], function(BackboneObserve){
var ooModel = BackboneObserve.model;
//...code...
});
set or unset function.change events will not triggered in order because the Object.observe feature.Here is an example:
var a = new Backbone.Observe.model({id: 'id', foo: 1, bar: 2, baz: 3});
a.on("change:foo", function(model, val) {
console.log(a.get('foo')); //2
});
a.set({'foo': 2});
console.log(a.get('foo')); //1
We print the value of foo after set the value immediately. As you see, the value not be changed in this time but will come into effect at the callback of change event.So, the modify functiuon is totally an asynchronous operation.
In fact, the attributes of model will be observed by your browser and invoke the callback function for a period of time.
Another example can help you to understand the mechanism of this action.
var changed = 0;
var obj = new Backbone.Observe.model();
obj.on('change', function() {
changed += 1;
console.log("Trigger change!");
});
obj.set({id: 1, label: 'c'});
setTimeout(function(){
//output after the callback of change
console.log(changed); //1
}, 0);
As you see, the callback of change will be executed before the timeout callback. This example reveals that the Object.observe will deliver the modify event and insert it to the event queue as soon as possible and excute it on the nearest timer tick.
If you not understand the event queue and the non-block I/O, you can see the follow documents.
> * [Javascript event loop explained][2]
> * [Events and timing in-depth][3]
Benchmark test recommend to expose Java’s nanosecond timer or enable Chrome’s microsecond timer, please [read the documents of benchmarkjs][6] for more information.
The follow is one test result in our computer:
CPU: Intel Core i7
RAM: 4GB
Chrome version: 39.0.2171.95
Backbone.set#test x 76,170 ops/sec ±11.36% (79 runs sampled)
Backbone.observe.set#test x 140,429 ops/sec ±2.66% (74 runs sampled)
Backbone.unset#test x 74,966 ops/sec ±1.95% (80 runs sampled)
Backbone.observe.set#test x 90,667 ops/sec ±2.77% (75 runs sampled)
Fastest is Backbone.observe.set#test
Fastest is Backbone.observe.unset#test
You can run the node-benchmark.js in test directory if you want to run benchmark in node.js.
[1]: http://www.html5rocks.com/en/tutorials/es7/observe/?redirect_from_locale=zh
[2]: http://blog.carbonfive.com/2013/10/27/the-javascript-event-loop-explained
[3]: http://javascript.info/tutorial/events-and-timing-depth#javascript-is-single-threaded
[4]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/observe
[5]: http://www.jonecasper.com/Backbone.Observe/test/benchmark.html
[6]: http://benchmarkjs.com/
[license-image]: http://img.shields.io/badge/license-MIT-blue.svg?style=flat
[license-url]: LICENSE
[npm-url]: https://www.npmjs.com/package/backbone-observe
[npm-version-image]: http://img.shields.io/npm/v/backbone-observe.svg?style=flat
[npm-downloads-image]: http://img.shields.io/npm/dm/backbone-observe.svg?style=flat