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月16日 19:13