プロパティディスクリプタとその拡張ライブラリ
-
Upload
yusuke-muraoka -
Category
Technology
-
view
658 -
download
2
description
Transcript of プロパティディスクリプタとその拡張ライブラリ
![Page 1: プロパティディスクリプタとその拡張ライブラリ](https://reader036.fdocuments.net/reader036/viewer/2022082803/5453303aaf7959bd2b8b7b8c/html5/thumbnails/1.jpg)
プロパティディスクリプタとその拡張ライブラリGunma.web #14 発表
![Page 2: プロパティディスクリプタとその拡張ライブラリ](https://reader036.fdocuments.net/reader036/viewer/2022082803/5453303aaf7959bd2b8b7b8c/html5/thumbnails/2.jpg)
お前誰よ?• 村岡友介• @jbking• Python!• Python!!• Python!!!• JavaScript• jQuery使い
![Page 3: プロパティディスクリプタとその拡張ライブラリ](https://reader036.fdocuments.net/reader036/viewer/2022082803/5453303aaf7959bd2b8b7b8c/html5/thumbnails/3.jpg)
ECMA-262 5.1
ECMAScript
Property Descriptor
![Page 4: プロパティディスクリプタとその拡張ライブラリ](https://reader036.fdocuments.net/reader036/viewer/2022082803/5453303aaf7959bd2b8b7b8c/html5/thumbnails/4.jpg)
Property Descriptor?• オブジェクトごとのプロパティの挙動を記述
• value• writable• enumerable• configurable• setter/getter foo.bar
オブジェクト プロパティ
![Page 5: プロパティディスクリプタとその拡張ライブラリ](https://reader036.fdocuments.net/reader036/viewer/2022082803/5453303aaf7959bd2b8b7b8c/html5/thumbnails/5.jpg)
Object.defineProperty(foo, ‘bar’, { get: function() { return ‘baz’; }, set: function(v) { console.log(v); }});
foo.bar ‘baz’foo.bar = ‘qux’ qux // console.log ‘qux’foo.bar ‘baz’
Property Descriptor?• オブジェクトごとのプロパティの挙動を記述
• value• writable• enumerable• configurable• setter/getter
![Page 6: プロパティディスクリプタとその拡張ライブラリ](https://reader036.fdocuments.net/reader036/viewer/2022082803/5453303aaf7959bd2b8b7b8c/html5/thumbnails/6.jpg)
ここまでが基本
![Page 7: プロパティディスクリプタとその拡張ライブラリ](https://reader036.fdocuments.net/reader036/viewer/2022082803/5453303aaf7959bd2b8b7b8c/html5/thumbnails/7.jpg)
BeautifulProperties.js
Hookable
LazyInitializable
Events
Observable
Versionizable
https://github.com/monjudoh/BeautifulProperties.js/
![Page 8: プロパティディスクリプタとその拡張ライブラリ](https://reader036.fdocuments.net/reader036/viewer/2022082803/5453303aaf7959bd2b8b7b8c/html5/thumbnails/8.jpg)
BeautifulProperties.LazyInitializable.define( object, ‘key’, { init: function () { console.log(‘initialized’); return 1; } });
object.key initialized // console.log 1
LazyInitializable• 初期化を遅延させる
![Page 9: プロパティディスクリプタとその拡張ライブラリ](https://reader036.fdocuments.net/reader036/viewer/2022082803/5453303aaf7959bd2b8b7b8c/html5/thumbnails/9.jpg)
BeautifulProperties.Hookable.define( object, ‘key’, { beforeGet: function () { console.log(‘beforeGet’); }, afterGet: function (v) { console.log(‘afterGet’, v); }, beforeSet: function (v, p) { console.log(‘beforeSet’, v, p); }, afterSet: function (v, p) { console.log(‘afterSet’, v, p); } });
object.keybeforeGet // console.logafterGet undefined // console.logundefined object.key = 10beforeSet 10 undefined // console.logafterSet 10 undefined // console.log10
Hookable• getter/setterの直前と直後にそれぞれフックを仕込める
• 値の変更も
![Page 10: プロパティディスクリプタとその拡張ライブラリ](https://reader036.fdocuments.net/reader036/viewer/2022082803/5453303aaf7959bd2b8b7b8c/html5/thumbnails/10.jpg)
BeautifulProperties.Events.on(object, ‘event1’, object, ‘event1’, function () { console.log(‘event1 called’); });
BeautifulProperties.Events.trigger(object, ‘event1’)event1 called // console.logundefined
Events• オブジェクトに対してイベントをはれる
• jQ.on/jQ.triggerのようなもの
• プロトタイプへ伝播
![Page 11: プロパティディスクリプタとその拡張ライブラリ](https://reader036.fdocuments.net/reader036/viewer/2022082803/5453303aaf7959bd2b8b7b8c/html5/thumbnails/11.jpg)
BeautifulProperties.Observable.define( object, ‘key’);BeautifulProperties.Events.on( object, ‘change:key’, function (_ev, v, p) { console.log(‘key is changed’, v, ‘from’, p); });
object.key = ‘foo’key is change foo from undefined // console.log‘foo’
Observable• プロパティの変更でイベントを発行できる
![Page 12: プロパティディスクリプタとその拡張ライブラリ](https://reader036.fdocuments.net/reader036/viewer/2022082803/5453303aaf7959bd2b8b7b8c/html5/thumbnails/12.jpg)
BeautifulProperties.Versionizable.define( object, ‘key’);
object.key = ‘foo’‘foo’ object.key = ‘bar’‘bar’ BeautifulProperties.Versionizable.getVersions( object, ‘key’)[ { value: ‘bar’, timestamp: 1379121665980 }, { value: ‘foo’, timestamp: 1379121662234 } ]
Versionizable• プロパティの変更を履歴として保存できる
• 履歴改変もできる
![Page 13: プロパティディスクリプタとその拡張ライブラリ](https://reader036.fdocuments.net/reader036/viewer/2022082803/5453303aaf7959bd2b8b7b8c/html5/thumbnails/13.jpg)
一つのプロパティに対して組み合わせられます
Hookable
LazyInitializable
Events
Observable
Versionizable
![Page 14: プロパティディスクリプタとその拡張ライブラリ](https://reader036.fdocuments.net/reader036/viewer/2022082803/5453303aaf7959bd2b8b7b8c/html5/thumbnails/14.jpg)
BeautifulProperties.Observable.define( object, ‘key’);BeautifulProperties.Versionizable.define( object, ‘key’);BeautifulProperties.Events.on( object, ‘change:key’, function () { console.log(‘key is change’); });
object.key = ‘foo’key is changed // console.log‘foo’ BeautifulProperties.Versionizable.getVersions( object, ‘key’)[ { value: ‘foo’, timestamp: 1379121662234 } ]
組み合わせ例• プロパティの変更を履歴取りながらイベント発行する
![Page 15: プロパティディスクリプタとその拡張ライブラリ](https://reader036.fdocuments.net/reader036/viewer/2022082803/5453303aaf7959bd2b8b7b8c/html5/thumbnails/15.jpg)
以上。