http://w.atwiki.jp/funnyjs/ funny.js ja 2016-12-08T00:22:16+09:00 1481124136 https://w.atwiki.jp/funnyjs/pages/46.html [[Proxy>https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Proxy]]をバインドデータへ紐付けして、 バインドされたデータへの変更を監視出来ます。 Usage let test = ({}) test.bind({ foo: 0, bar: 1 }) .watch({ get (t, k, h) { alert(k + '　が参照されました！'); return t[k]; }, set (t, k, v, h) { alert(k + '　が　' + t[k] + '　から　' + v + '　へ変更されました。'); t[k] = v; return true; } }); Result バインドされたオブジェクトのプロパティを参照した場合、変更した場合、 それぞれで警告を表示します。 Return そのオブジェクトを返します。 メソッドチェーンにご活用ください。 2016-12-08T00:22:16+09:00 1481124136 https://w.atwiki.jp/funnyjs/pages/44.html [[Object.propertyIsEnumerable>https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/propertyIsEnumerable]]をオブジェクトからアクセスできるようにしました。 funny.jsでは、この機能を使う代わりに[[.cue()>cue]]を使うことを推奨します。 また、funny.jsでは　[[keys>keys]]　でオブジェクトのキーのみを勝手に設定することも出来ます。 この機能を覚える必要はありません。 2016-12-04T04:28:44+09:00 1480793324 https://w.atwiki.jp/funnyjs/pages/43.html [[Object.hasOwnProperty>https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty]]をオブジェクトからアクセスできるようにしました。 funny.jsでは、この機能を使う代わりに[[.cue()>cue]]を使うことを推奨します。 2016-12-04T04:22:50+09:00 1480792970 https://w.atwiki.jp/funnyjs/pages/42.html [[Object.getOwnPropertyNames>https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames]]と[[Object.getOwnPropertySymbols>https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertySymbols]]をオブジェクトからアクセスできるようにしました。 funny.jsでは、この機能を使う代わりに[[.cue()>cue]]を使うことを推奨します。 この機能は将来的な実装を希望しています。 今はこの機能を覚える必要はありません。 2016-12-04T04:21:21+09:00 1480792881 https://w.atwiki.jp/funnyjs/pages/41.html [[Object.getOwnPropertyDescriptor>https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyDescriptor]]をオブジェクトからアクセスできるようにしました。 オブジェクトの詳細なプロパティリストをオブジェクトとして取得します。 （この機能を明示的に利用する可能性は極めて低いです。） （funny.js自体を使いたい場合は、この機能を使う必要はありません。） 2016-12-04T04:10:37+09:00 1480792237 https://w.atwiki.jp/funnyjs/pages/40.html funny.js最大の特徴の一つ、databindについて説明します。 funny.jsでは、あるオブジェクトの$プロパティを使うことで、オブジェクトと対を成す自由なデータを埋め込むことができます。 これにより、レキシカルなthisの環境を提供します。 このデータバインドが最大の効果を発揮するのは、クライアントサイド上のjavascriptに元からある機能を阻害することなく、データへのアクセスを可能にするということです。 これにより、グローバルに定義されるものを最小限にしながら変数名を考え直す必要もなく…　というような小難しいことは飛ばして下の例を見てください。　もっと直感的です。 let myButton = $d.make('button')({ clicking (evt) { alert(this.$); }, }); myButton .bind('ここを呼び出すのは普通のjavascriptでは難しいけれども、funny.jsなら簡単なのです！') .in('test') .on('click')(myButton.clicking)(false); こんなアラート文がこの行数で、オブジェクト指向を阻害することなくかけてしまいます。 ぇ？　ボタンじゃ嫌だ？　わかりました。 let myImage = $d.make('img')({ clicking (evt) { alert(this.$); }, }) myImage .bind('ここを呼び出すのは普通のjavascriptでは難しいけれども、funny.jsなら簡単なのです！') .on('click')(myButton.clicking)(false); このように、発行したimgタグを使うこともできます。 バインドするデータは、どのようなデータでも紐付けることができます。 2017-05-16T19:13:34+09:00 1494929614 https://w.atwiki.jp/funnyjs/pages/39.html [[Object.defineProperties>https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperties]]をオブジェクトからアクセスできるようにしました。 Usage let testObj = ({ foo: 0, bar: 1 }).props({ baz: { get () { return bar + this.static4; }, set (v) { this.bar = v - this.static4; } }, static4: { value: 4 } }); Result この例では、bazはアクセサーとして機能するように設定しています。 testObj.baz; // 5 testObj.bar = 6; testObj.baz; // 10 test0bj.baz = 3; testObj.bar; //-1 というように挙動します。 ※この機能は上級者向けであり、理解できない方は飛ばして構いません。 2016-11-18T12:22:20+09:00 1479439340 https://w.atwiki.jp/funnyjs/pages/38.html [[Object.defineProperty>https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty]]をオブジェクトからアクセスできるようにしました。 Usage 1 let testObj = ({ foo: 0, bar: 1 }).prop('baz')({ get () { return bar + 4; }, set (v) { this.bar = v - 4; } }); Result この例では、bazはアクセサーとして機能するように設定しています。 testObj.baz; // 5 testObj.bar = 6; testObj.baz; // 10 test0bj.baz = 3; testObj.bar; //-1 というように挙動します。 ※この機能は上級者向けであり、理解できない方は飛ばして構いません。 2016-11-18T12:18:12+09:00 1479439092 https://w.atwiki.jp/funnyjs/pages/37.html [[Object.values>https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/values]]をオブジェクトからアクセスできるようにしました。 オブジェクトの値を取得します。 Usage 1 ({ foo: 0, bar: 1 }).values Result [0, 1] を取得します。 ※現段階では、この機能はPollyfill（代替した状態）です。 ※v8での本実装が確認され次第、本実装のソースに移行します。 2016-11-18T08:17:07+09:00 1479424627 https://w.atwiki.jp/funnyjs/pages/36.html Array-like オブジェクトをArrayに変換します。 ただし、lengthプロパティを所持している必要はありません。 Usage ({ 0: 1, 1: 2, 2: 3 }) .toArray; Result [1, 2, 3] が得られます。 2016-11-16T13:28:37+09:00 1479270517