Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(469)

Side by Side Diff: third_party/polymer/v0_8/components/observe-js/README.md

Issue 1140393002: Update more-routing for md-settings (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Created 5 years, 7 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
(Empty)
1 [![Build status](http://www.polymer-project.org/build/observe-js/status.png "Bui ld status")](http://build.chromium.org/p/client.polymer/waterfall) [![Analytics] (https://ga-beacon.appspot.com/UA-39334307-2/Polymer/observe-js/README)](https:/ /github.com/igrigorik/ga-beacon)
2
3 ## Learn the tech
4
5 ### Why observe-js?
6
7 observe-js is a library for observing changes in JavaScript data. It exposes a h igh-level API and uses [Object.observe](https://github.com/arv/ecmascript-object -observe) if available, and otherwise performs dirty-checking. observe-js requir es ECMAScript 5.
8
9 ### Observable
10
11 observe-js implements a set of observers (PathObserver, ArrayObserver, ObjectObs erver, CompoundObserver, ObserverTransform) which all implement the Observable i nterface:
12
13 ```JavaScript
14 {
15 // Begins observation. Value changes will be reported by invoking |changeFn| w ith |opt_receiver| as
16 // the target, if provided. Returns the initial value of the observation.
17 open: function(changeFn, opt_receiver) {},
18
19 // Report any changes now (does nothing if there are no changes to report).
20 deliver: function() {},
21
22 // If there are changes to report, ignore them. Returns the current value of t he observation.
23 discardChanges: function() {},
24
25 // Ends observation. Frees resources and drops references to observed objects.
26 close: function() {}
27 }
28 ```
29
30 ### PathObserver
31
32 PathObserver observes a "value-at-a-path" from a given object:
33
34 ```JavaScript
35 var obj = { foo: { bar: 'baz' } };
36 var observer = new PathObserver(obj, 'foo.bar');
37 observer.open(function(newValue, oldValue) {
38 // respond to obj.foo.bar having changed value.
39 });
40 ```
41
42 PathObserver will report a change whenever the value obtained by the correspondi ng path expression (e.g. `obj.foo.bar`) would return a different value.
43
44 PathObserver also exposes a `setValue` method which attempts to update the under lying value. Setting the value does not affect notification state (in other word s, a caller sets the value but does not `discardChanges`, the `changeFn` will be notified of the change).
45
46 ```JavaScript
47 observer.setValue('boo');
48 assert(obj.foo.bar == 'boo');
49 ```
50
51 Notes:
52 * If the path is ever unreachable, the value is considered to be `undefined`.
53 * If the path is empty (e.g. `''`), it is said to be the empty path and its val ue is its root object.
54 * PathObservation respects values on the prototype chain
55
56 ### ArrayObserver
57
58 ArrayObserver observes the index-positions of an Array and reports changes as th e minimal set of "splices" which would have had the same effect.
59
60 ```JavaScript
61 var arr = [0, 1, 2, 4];
62 var observer = new ArrayObserver(arr);
63 observer.open(function(splices) {
64 // respond to changes to the elements of arr.
65 splices.forEach(function(splice) {
66 splice.index; // index position that the change occurred.
67 splice.removed; // an array of values representing the sequence of elements which were removed
68 splice.addedCount; // the number of elements which were inserted.
69 });
70 });
71 ```
72
73 ArrayObserver also exposes a utility function: `applySplices`. The purpose of `a pplySplices` is to transform a copy of an old state of an array into a copy of i ts current state, given the current state and the splices reported from the Arra yObserver.
74
75 ```JavaScript
76 AraryObserver.applySplices = function(previous, current, splices) { }
77 ```
78
79 ### ObjectObserver
80
81 ObjectObserver observes the set of own-properties of an object and their values.
82
83 ```JavaScript
84 var myObj = { id: 1, foo: 'bar' };
85 var observer = new ObjectObserver(myObj);
86 observer.open(function(added, removed, changed, getOldValueFn) {
87 // respond to changes to the obj.
88 Object.keys(added).forEach(function(property) {
89 property; // a property which has been been added to obj
90 added[property]; // its value
91 });
92 Object.keys(removed).forEach(function(property) {
93 property; // a property which has been been removed from obj
94 getOldValueFn(property); // its old value
95 });
96 Object.keys(changed).forEach(function(property) {
97 property; // a property on obj which has changed value.
98 changed[property]; // its value
99 getOldValueFn(property); // its old value
100 });
101 });
102 ```
103
104 ### CompoundObserver
105
106 CompoundObserver allows simultaneous observation of multiple paths and/or Observ ables. It reports any and all changes in to the provided `changeFn` callback.
107
108 ```JavaScript
109 var obj = {
110 a: 1,
111 b: 2,
112 };
113
114 var otherObj = { c: 3 };
115
116 var observer = new CompoundObserver();
117 observer.addPath(obj, 'a');
118 observer.addObserver(new PathObserver(obj, 'b'));
119 observer.addPath(otherObj, 'c');
120 observer.open(function(newValues, oldValues) {
121 // Use for-in to iterte which values have changed.
122 for (var i in oldValues) {
123 console.log('The ' + i + 'th value changed from: ' + newValues[i] + ' to: ' + oldValues[i]);
124 }
125 });
126 ```
127
128
129 ### ObserverTransform
130
131 ObserverTransform is used to dynamically transform observed value(s).
132
133 ```JavaScript
134 var obj = { value: 10 };
135 var observer = new PathObserver(obj, 'value');
136 function getValue(value) { return value * 2 };
137 function setValue(value) { return value / 2 };
138
139 var transform = new ObserverTransform(observer, getValue, setValue);
140
141 // returns 20.
142 transform.open(function(newValue, oldValue) {
143 console.log('new: ' + newValue + ', old: ' + oldValue);
144 });
145
146 obj.value = 20;
147 transform.deliver(); // 'new: 40, old: 20'
148 transform.setValue(4); // obj.value === 2;
149 ```
150
151 ObserverTransform can also be used to reduce a set of observed values to a singl e value:
152
153 ```JavaScript
154 var obj = { a: 1, b: 2, c: 3 };
155 var observer = new CompoundObserver();
156 observer.addPath(obj, 'a');
157 observer.addPath(obj, 'b');
158 observer.addPath(obj, 'c');
159 var transform = new ObserverTransform(observer, function(values) {
160 var value = 0;
161 for (var i = 0; i < values.length; i++)
162 value += values[i]
163 return value;
164 });
165
166 // returns 6.
167 transform.open(function(newValue, oldValue) {
168 console.log('new: ' + newValue + ', old: ' + oldValue);
169 });
170
171 obj.a = 2;
172 obj.c = 10;
173 transform.deliver(); // 'new: 14, old: 6'
174 ```
175
176 ### Path objects
177
178 A path is an ECMAScript expression consisting only of identifiers (`myVal`), mem ber accesses (`foo.bar`) and key lookup with literal values (`arr[0]` `obj['str- value'].bar.baz`).
179
180 `Path.get('foo.bar.baz')` returns a Path object which represents the path. Path objects have the following API:
181
182 ```JavaScript
183 {
184 // Returns the current value of the path from the provided object. If eval() i s available, a compiled getter will be
185 // used for better performance.
186 getValueFrom: function(obj) { }
187
188
189 // Attempts to set the value of the path from the provided object. Returns tru e IFF the path was reachable and
190 // set.
191 setValueFrom: function(obj, newValue) { }
192 }
193 ```
194
195 Path objects are interned (e.g. `assert(Path.get('foo.bar.baz') === Path.get('fo o.bar.baz'));`) and are used internally to avoid excessive parsing of path strin gs. Observers which take path strings as arguments will also accept Path objects .
196
197 ## About delivery of changes
198
199 observe-js is intended for use in environments which implement Object.observe, b ut it supports use in environments which do not.
200
201 If `Object.observe` is present, and observers have changes to report, their call backs will be invoked at the end of the current turn (microtask). In a browser e nvironment, this is generally at the end of an event.
202
203 If `Object.observe` is absent, `Platform.performMicrotaskCheckpoint()` must be c alled to trigger delivery of changes. If `Object.observe` is implemented, `Platf orm.performMicrotaskCheckpoint()` has no effect.
OLDNEW
« no previous file with comments | « third_party/polymer/v0_8/components/observe-js/AUTHORS ('k') | third_party/polymer/v0_8/components/observe-js/bower.json » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698