Download as PDF, PPTX
Uploaded byKentaro Iizuka
PDF, PPTX10,321 views
Knockout を用いた大規模 JavaScript 開発
HTML5 Conference 2013 において発表したスライドです。Knockout.js について簡単に説明しています。
Recommended
More Related Content
What's hot
Viewers also liked
Similar to Knockout を用いた大規模 JavaScript 開発
Knockout を用いた大規模 JavaScript 開発
- 1.Knockout を用いた大規模 JavaScript開発iizukakHTML Conference 2013 LT大会
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.バベルの塔現在: 1563 年:2013 年
- 10.
- 11.
- 12.
- 13.MV* フレームワーク✤✤デザインパターンに従ってコードを良いかんじに書くためのサポートをしてくれるフレームワークデザインパターンはいろいろあり、フレームワーク自体もいろいろ種類があるBackboneMVC: Model-View-ControllerKnockoutMVVM: Model-View-ViewModelAngularMVW : Model-View-Whateverデザインパターンの例
- 14.
- 15.
- 16.スマホゲームの UI 開発をWebViewでやることに
- 17.UI の八割方を WebViewで実装✤数百の HTML ファイル✤数千行の SCSS✤ユーザーとのインタラクションが非常に多い✤数万行の JavaScript
- 18.
- 19.
- 20.
- 21.
- 22.
- 23.
- 24.MV* フレームワーク✤MV* フレームワークの多くが、データバインド機能を提供✤Angular: デフォルトである✤Knockout : デフォルトである✤Backbone : Epoxy.js とか使ってやる
- 25.
- 26.
- 27.
- 28.
- 29.特徴✤1, データバインドが読みやすい✤2, データバインドが書きやすい✤3,組み込みデータバインドでけっこういけている✤4, 拡張が用意✤5, 公式チュートリアルがいけている
- 30.
- 31.データバインドが読みやすいKnockout の data-bindの例<p>First name: <strong data-bind="text: firstName"></strong></p><p>Last name: <strong data-bind="text: lastName"></strong></p><p>First name: <input data-bind="value: firstName" /></p><p>Last name: <input data-bind="value: lastName" /></p>✤✤HTML を見ればどこの要素が Knockout で操作されるか一目瞭然data-* 属性は正当な HTML 属性のため、実装した HTML がvalidな HTML になり、気分がよい
- 32.
- 33.
- 34.
- 35.データバインドが書きやすい✤Knockout ではデータバインドは、かんじで記述ビュー<開始タグ data-bind="データバインドの種類:適用する変数名"></終了タグ>JavaScriptfunction コンストラクタ() {this.適用する変数 = ko.observable();}ko.applyBindings(new コンストラクタ());
- 36.
- 37.様々な種類のデータバインドがあらかじめ組み込まれているclick bindingクリックイベントをハンドリングcss bindingCSSを適用visible binding 表示・非表示切り替えif bindingif 文による分岐
- 38.
- 39.
- 40.
- 41.
- 42.
- 43.
- 44.
- 45.
- 46.
- 47.
- 48.@iizukak on Github,Twitter