【spine.js】Spine.jsの基本 ~クラスの操作~
公開日:
:
最終更新日:2012/08/01
spine.js
このエントリでprivateなプロパティを宣言してクラスみたいなことをやっていたのだけれど、これだけだとコード量てきにそろそろ私の思考能力の限界になってきたので、何かオブジェクト志向的にクラスで構造化したりMVCフレームワークを使ったりしたいなということで、Spine.jsを使うことにしました。
本家サイト:Spine.js
ダウンロードしてscriptタグで参照します。
Hemとかcoffeescriptとかいろいろやり方はあるみたいですが、一番シンプルなjavascriptオンリーな環境でとりかかります。
必要なのはjqueryですが、jquery.tmplも併用が前提で考えた方がよさそうです。
//クラスを宣言 var SomeClass = Spine.Class.sub(); //クラスプロパティの拡張 SomeClass.extend({ property: false, find: function(){ } }); //インスタンスプロパティの拡張 SomeClass.include({ attributes: {} }); //宣言と実装を同時に var SomeClass = Spine.Class.sub( {//インスタンスプロパティ attributes: {}, save: function(){ /* ... */ } }, {//クラスプロパティ staticAttributes: {}, staticSave: function(){ /* ... */ } } ); //継承 var SomeClass = Spine.Class.sub({ attributes: {}, save: function(){ /* ... */ } }); var DifferentClass = SomeClass.sub({ destroy: function(){ /* ... */ }, // Override property: save: function(){ /* ... */ } }); //インスタンス化 var User = Spine.Class.sub({ init: function(name){ this.name = name; } }); var user = new User('hoge'); //モデルとコントローラのクラスを定義 var User = Spine.Model.sub(); User.configure('User', 'name', 'email'); var Users = Spine.Controller.sub({ init: function(){ User.bind('change refresh', this.proxy(this.render)) }, render: function(){ /* ... */ } }); //モジュールパターン (function(Spine, $, exports){ // Your code goes here... })(Spine, Spine.$, window) //モジュールからグローバルにエクスポート (function(Spine, $, exports){ var Contacts = Spine.Controller.sub({ init: function(){ // ... } }); exports.Contacts = Contacts; })(Spine, Spine.$, window); (function(Spine, $, exports){ var contacts = new Contacts({el: $('body')}); })(Spine, Spine.$, window);
関連記事
-
-
【spine.js】Spineの使い方
Spine.jsを使ってみようということで基本となる使い方をメモ。 詳しい話はAPIがあるしチュー
-
-
【spine.js】Spineのドキュメント翻訳 Models
元のドキュメントはこちら はじめに 状態が変化する中、クライアントサイドで実現したい
-
-
【spine.js】Spine.jsを使ってはまったポイント
Spine.jsでクラスの継承をさせようとしていくつかはまってしましました。 ※CoffeSc
-
-
【spine.js】Spineのドキュメント翻訳 Controllers
元記事はこちら はじめに controllerはSpineの三位一体の最後の1つ
-
-
【spine.js】Spineのドキュメント翻訳 Routing
元のドキュメントはこちら ↓↓↓ Routing - Documentation - Spi
-
-
【spine.js】Spineのドキュメント翻訳 Views & Templating using jQuery.tmpl
javascriptのテンプレートエンジンは他にMustacheというのが有力そうです。強みは様々な