Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

プロパティディスクリプタとその拡張ライブラリ

Related Books

Free with a 30 day trial from Scribd

See all
  • Be the first to comment

プロパティディスクリプタとその拡張ライブラリ

  1. 1. プロパティディスクリプ タとその拡張ライブラリ Gunma.web #14 発表
  2. 2. お前誰よ? • 村岡友介 • @jbking • Python! • Python!! • Python!!! • JavaScript • jQuery使い
  3. 3. ECMA-262 5.1 ECMAScript Property Descriptor
  4. 4. Property Descriptor? • オブジェクトごとの プロパティの挙動を 記述 • value • writable • enumerable • configurable • setter/getter foo.bar オブジェクト プロパティ
  5. 5. 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
  6. 6. ここまでが基本
  7. 7. BeautifulProperties.js Hookable LazyInitializable Events Observable Versionizable https://github.com/monjudoh/BeautifulProperties.js/
  8. 8. BeautifulProperties.LazyInitializable.define( object, ‘key’, { init: function () { console.log(‘initialized’); return 1; } } ); object.key initialized // console.log 1 LazyInitializable • 初期化を遅延させる
  9. 9. 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.key beforeGet // console.log afterGet undefined // console.log undefined object.key = 10 beforeSet 10 undefined // console.log afterSet 10 undefined // console.log 10 Hookable • getter/setterの直前 と直後にそれぞれ フックを仕込める • 値の変更も
  10. 10. BeautifulProperties.Events.on(object, ‘event1’, object, ‘event1’, function () { console.log(‘event1 called’); } ); BeautifulProperties.Events.trigger(object, ‘event1’) event1 called // console.log undefined Events • オブジェクトに対し てイベントをはれる • jQ.on/jQ.triggerのよ うなもの • プロトタイ プへ伝播
  11. 11. 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 • プロパティの変更で イベントを発行でき る
  12. 12. 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 • プロパティの変更を 履歴として保存でき る • 履歴改変もできる
  13. 13. 一つのプロパティに対して 組み合わせられます Hookable LazyInitializable Events Observable Versionizable
  14. 14. 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 } ] 組み合わせ例 • プロパティの変更を 履歴取りながらイベ ント発行する
  15. 15. 以上。

×