プロパティディスクリプタとその拡張ライブラリGunma.web #14 発表

お前誰よ？• 村岡友介• @jbking• Python!• Python!!• Python!!!• JavaScript• jQuery使い

ECMA-262 5.1

ECMAScript

Property Descriptor

Property Descriptor?• オブジェクトごとのプロパティの挙動を記述

• value• writable• enumerable• configurable• setter/getter foo.bar

オブジェクト プロパティ

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

ここまでが基本

BeautifulProperties.js

Hookable

LazyInitializable

Events

Observable

Versionizable

https://github.com/monjudoh/BeautifulProperties.js/

BeautifulProperties.LazyInitializable.define( object, ‘key’, { init: function () { console.log(‘initialized’); return 1; } });

object.key initialized // console.log 1

LazyInitializable• 初期化を遅延させる

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の直前と直後にそれぞれフックを仕込める

• 値の変更も

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のようなもの

• プロトタイプへ伝播

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• プロパティの変更でイベントを発行できる

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• プロパティの変更を履歴として保存できる

• 履歴改変もできる

一つのプロパティに対して組み合わせられます

Hookable

LazyInitializable

Events

Observable

Versionizable

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 } ]

組み合わせ例• プロパティの変更を履歴取りながらイベント発行する

以上。