【spine.js】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);