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

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

3. ECMA-262 5.1
ECMAScript
Property Descriptor

4. Property
Descriptor?
• オブジェクトごとの
プロパティの挙動を
記述
• value
• writable
• enumerable
• configurable
• setter/getter foo.bar
オブジェクト プロパティ

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. ここまでが基本

7. BeautifulProperties.js
Hookable
LazyInitializable
Events
Observable
Versionizable
https://github.com/monjudoh/BeautifulProperties.js/

8. BeautifulProperties.LazyInitializable.define(
object,
‘key’,
{
init: function () {
console.log(‘initialized’);
return 1;
}
}
);
object.key
initialized // console.log
1
LazyInitializable
• 初期化を遅延させる

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. 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. 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. 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. 一つのプロパティに対して
組み合わせられます
Hookable
LazyInitializable
Events
Observable
Versionizable

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. 以上。