Your SlideShare is downloading. ×
プロパティディスクリプタとその拡張ライブラリ
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

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

410
views

Published on

Published in: Technology

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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