*

【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);

関連記事

no image

【spine.js】Spineのドキュメント翻訳 Views & Templating using jQuery.tmpl

javascriptのテンプレートエンジンは他にMustacheというのが有力そうです。強みは様々な

記事を読む

no image

【spine.js】Spineのドキュメント翻訳 Routing

元のドキュメントはこちら ↓↓↓ Routing - Documentation - Spi

記事を読む

no image

【spine.js】Spineのドキュメント翻訳 Models

元のドキュメントはこちら はじめに 状態が変化する中、クライアントサイドで実現したい

記事を読む

no image

【spine.js】Spineのドキュメント翻訳 Controllers

元記事はこちら はじめに controllerはSpineの三位一体の最後の1つ

記事を読む

no image

【spine.js】Spineの使い方

Spine.jsを使ってみようということで基本となる使い方をメモ。 詳しい話はAPIがあるしチュー

記事を読む

no image

【spine.js】Spine.jsを使ってはまったポイント

Spine.jsでクラスの継承をさせようとしていくつかはまってしましました。 ※CoffeSc

記事を読む

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

no image
知らないと損をする6つのライセンスまとめ

オープンソースやフリーウェア、フリー素材などが巷に溢れ、それらを利用す

no image
ガリレオ:ニュースブラウザをリリースしました。

概要 ガリレオはニュースを読んだり、検索する機能に特化したブラウザア

no image
【android】Activityとプロセスのライフサイクル

またもやライフサイクル周りでハマったのですが、Androidのライフサ

→もっと見る

PAGE TOP ↑