※スマホ対応はしてません。

タグ: Backbone.js

超軽量Model-ViewライブラリーOsteoporosis.jsを公開したよ。

カテゴリー: JavaScript

はい、しました。

Backbone.jsを念頭に、ごく一部のみの機能に絞って実装したものです。

実装コードは161行で3.5 KB、uglifyjsを通してコメント付けて、1.3 KBになります。さらにmin版は64文字を一行の最長として改行を加えておいたので、実装コードにコピペで利用できます。サンプルのJS参照。

冒頭のごちゃっとしてるところがライブラリー。

使いどころ

携帯版サイトでBackbone的な機能は欲しいけどもbackbone-min.jsの6.5 KBをケチりたい気分のときがあって、こういうのを利用してました。当然それなりの規模であればBackbone.jsなりを使った方が良いと思う。

コピペでファイルに貼り付けると通信オーバーヘッドを削れるという利点もあります。これまたそれなりの規模であれば、別々のファイルで開発してconcatするべきですね。

実装機能

詳細はREADMEのリファレンス参照。

  • extend
  • on, trigger
  • set, get (Model)
  • change event (Model)
  • el, $el, $(selector) (View)

on()があるのにoff()がないってのは割り切りです。実際、そんなに使わないでしょう? listenTo()は欲しい気もするけど、fn.bind()で十分間に合うので省略。

あとはextend、これ作ったは良いけどいらなかったかなーと思ってる。今後削るかもね。

っていう事も

READMEに書いておいた方が良いのだろうなあ。

というわけで

七月以来、久しぶりのgithub contribnutionでした。

驚きの白さ。

ひゃあー恥ずかしい。

Backbone.jsのサンプルアプリのコードを読んでみた。

カテゴリー: JavaScript

Backbone使ってみるメモ。まだあんまりよくわかってないんだなー。

よくわからないならコードを読めばいいじゃない、という事で、公式で提供されているTodoアプリのコードを読んでみました。

ソース

公式のサンプル。

いわゆるTodo管理ツールなんだけど、情報をHTML5のLocalStorageに持つようになっている。つまりブラウザを閉じても内容を記憶している。

JSファイル

HTMLから読み込んでいるのは以下。

  • json2.js
  • jquery-1.7.1.js
  • underscore-1.3.1.js
  • backbone.js
  • backbone-localstorage.js
  • todos.js

Backbone.jsはUnderscore.jsとjQueryないしZepto.jsが必須。またLocalStorageを使うためのBackbone拡張を読み込んでいる。

json2.jsは何に使っているのかわからないけど、たぶんLocalStorageのI/OでJSONのパースをしてる、とかかな。まああまり本編とは関係ない。

で、todo.jsがこのアプリの本体。

全体を見渡す

まずは詳細な実装を省略して、外側全体を見てみる。

(さらに…)