http://w.atwiki.jp/funnyjs/ funny.js ja 2017-05-16T19:13:34+09:00 1494929614 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/16.html wantsは、主語が変わると主体的意味が変わります。 -主語がオブジェクトである場合は、[[getPrototypeOf>https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/getPrototypeOf]]と[[setPrototypeOf>https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/setPrototypeOf]]へのアクセッサとなります。 Usage ({}).wants -主語が[[関数>https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Function]]である場合は、その関数のprototype属性を指します。 Usage ([[function]] () {}).wants.[[ride]]({ test () { alert('これは、プロトタイプチェーン内のtestメソッドです。'); } }) 2017-05-16T19:06:30+09:00 1494929190 https://w.atwiki.jp/funnyjs/pages/26.html margeは、主語が違うと挙動が変わります。 オブジェクトの場合、与えられたオブジェクトのプロパティを追加した新しいオブジェクトを作ります。 既存のプロパティは上書きされます。 Usage ({ foo: 0 }) .marge({ foo: 3, bar: 4 }); Result { foo: 3, bar: 4 } が得られます。 配列の場合、与えられたオブジェクトのプロパティを追加した新しいオブジェクトを作ります。 既存のプロパティは上書きされます。 Usage ([3, 4]).marge([5, 6]); result [3, 4, 5, 6] が得られます。 Return 統括後のオブジェクトを返答します。 メソッドチェインにご活用ください。 2016-12-30T16:38:17+09:00 1483083497 https://w.atwiki.jp/funnyjs/pages/2.html -[[ダウンロード>download]] -[[function>function]] --[[wants>wants]] -[[Object>Object]] --[[maker>maker]] --[[toArray>toArray]] --[[each(callback)>each]] --[[deep(callback)>deep]] --[[ride({})>ride]] --[[push({})>push]] --[[copy>copy]] --[[marge({})>marge]] --[[concat({}) ⇔ marge>marge]] --[[mix(callback)>mix]] --[[pick(callback)>pick]] --[[json>json]] --[[save(name)>webStorage]] --[[fix>fix]] --[[wants>wants]] --[[keys>keys]] --[[cue(array)>cue]] --[[swap>swap]] --[[values>values]] --[[prop(key)(definition)>prop]] --[[props(definition)>props]] --[[bind(value)>databind]] --[[explains>explains]] --[[owner>owner]] --[[has(key)>has]] --[[iterable(key)>iterable]] --[[$>databind]] --[[agent>watch]] --[[watch>watch]] &link_editmenu(text=ここを編集) 2016-12-08T00:22:59+09:00 1481124179 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/23.html この命令は、主語が変わると挙動が変わります。 この命令は、元のオブジェクトや配列を変更します（副作用があります。） 元のオブジェクトに、与えられたオブジェクトのプロパティを追加します。 この操作は、元のオブジェクトを変更します。 既存のプロパティは上書きされます。 Usage ({ foo: 0 }) .ride({ foo: 3, bar: 4 }); Result { foo: 3, bar: 4 } が得られます。 Arrayの場合は、[[Array.push>https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/push]]を実行します。 Usage ([3, 4]) .ride(5); Result [3, 4, 5] が得られます。 この際、rideは次のIDに対して与えられた「何か」を代入しようとすることに注意してください。 Usage ([3, 4]) .ride([5, 6]); Result [3, 4, [5, 6]] が得られます。 Return 変更済みのオブジェクトを返答します。 メソッドチェインにご活用ください。 2016-12-04T05:05:19+09:00 1480795519 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