JavaScript/参考メモ/Data Binding, ObserverパターンとVue.js(2015-03時点)

• [ Prev ]
• [ Next ]
• [ JavaScript ]

JavaScriptでのData Bindingってどうしてるのか、軽くググってみたところObserverパターンの応用であり、JSでのライブラリの代表例としてVue.jsというのがありましたので、2015-03時点で参考URLをメモ。

• 技術/ソフトウェア設計/MVVM(Model View ViewModel)デザインパターンとData Bindingの参考URLメモ(2015-03時点) でもWPFの世界の参考記事をいくつかググって並べたが、One Way / Two Way / Once の3種類位あるらしい。
• One-Way は単方向。Two-Wayが双方向。Onceは最初の一度きり、という具合に使い分けされてるらしい。
• 実装としては、Observerパターンを使って、オブジェクトの変更イベントを購読(subscribe)して、データの変更やViewの変更イベントをお互いに伝え合う形。
• JSで開発する場合は、Two-Wayの利用頻度が高めなのかも。

JavaScriptとObserverパターン

JavaScriptでObserverパターンはどう作るか？いくつか、実際にサンプルコードで例示してくれてる記事が見つかった。

• 【JS】オブザーバパターンの実装 | kotazi.com
  • http://kotazi.com/archives/1039
• JavaScriptデザインパターン – 第3部：プロキシ、オブザーバー、コマンド | Adobe Developer Connection
  • http://www.adobe.com/jp/devnet/html5/articles/javascript-design-patterns-pt3-proxy-observer-command.html
• Observer JavaScript Design Pattern with examples- dofactory.com
  • http://www.dofactory.com/javascript/observer-design-pattern

JavaScriptでのData Bindingのサンプル

参考：

• Two-Way Data Binding
  • http://n12v.com/2-way-data-binding/
  • PureJSやBackbone, React, Angular, Meteor のそれぞれでData Bindingのサンプルを書いて解説してくれてる
• Easy Two-Way Data Binding in JavaScript - Luca Ongaro
  • http://www.lucaongaro.eu/blog/2012/12/02/easy-two-way-data-binding-in-javascript/
  • 自力でTwo-Way Data Bindingを実装、jQueryで楽してる記事
• Data-binding Revolutions with Object.observe() - HTML5 Rocks
  • http://www.html5rocks.com/en/tutorials/es7/observe/
  • Chrome36から使えるようになった Object.observe()を使ったData Bindingのサンプル

その他、Stack Overflowより：

• javascript - What is two way binding? - Stack Overflow
  • http://stackoverflow.com/questions/13504906/what-is-two-way-binding
• html - How to Implement DOM Data Binding in JavaScript - Stack Overflow
  • http://stackoverflow.com/questions/16483560/how-to-implement-dom-data-binding-in-javascript

Vue.jsの参考URL

2015-03現在、Observerを基盤としたDataBindingと、さらに一部ではReactなどのパラダイムを取り入れたライブラリ・フレームワークが百花繚乱なのがJavaScript界隈のホットな現状。
その中で、Vue.jsを使ったMVVMとData Bindingのサンプルがいくつか見つかったので、メモ。

• クライアントサイドMVVMアーキテクチャとVue.jsをまとめたよ
  • http://www.slideshare.net/sekiyousuke/mvvm-vuejs
• はじめよう　Vue.js - Qiita
  • http://qiita.com/kitfactory/items/9c9b9312ace03e731b33
• Getting Started - vue.js
  • http://vuejs.org/guide/

• [ Prev ]
• [ Next ]
• [ JavaScript ]