プロパティディスクリプ
タとその拡張ライブラリ
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
‘b...
ここまでが基本
BeautifulProperties.js
Hookable
LazyInitializable
Events
Observable
Versionizable
https://github.com/monjudoh/BeautifulPro...
BeautifulProperties.LazyInitializable.define(
object,
‘key’,
{
init: function () {
console.log(‘initialized’);
return 1;
}...
BeautifulProperties.Hookable.define(
object,
‘key’,
{
beforeGet: function () { console.log(‘beforeGet’); },
afterGet: func...
BeautifulProperties.Events.on(object, ‘event1’,
object,
‘event1’,
function () {
console.log(‘event1 called’);
}
);
Beautif...
BeautifulProperties.Observable.define(
object,
‘key’
);
BeautifulProperties.Events.on(
object,
‘change:key’,
function (_ev...
BeautifulProperties.Versionizable.define(
object,
‘key’
);
object.key = ‘foo’
‘foo’
object.key = ‘bar’
‘bar’
BeautifulProp...
一つのプロパティに対して
組み合わせられます
Hookable
LazyInitializable
Events
Observable
Versionizable
BeautifulProperties.Observable.define(
object,
‘key’
);
BeautifulProperties.Versionizable.define(
object,
‘key’
);
Beautif...
以上。
Upcoming SlideShare
Loading in...5
×

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

511

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
511
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
1
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

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

  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. 以上。
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×