中規模向けJS設計
自己紹介
日記
日記
- 健康診断で身長伸びてました。
- 弁当生活始めました。
- 衣替えしました。
- 間食は大豆がメインです。
- 引っ越ししました。
- 最近ロフトで買った立体型のアイマスクが個人的にヒットでした。
- 週末料理をしていて足を切ってしまいました。
注意
注意
模索中のものも多いので、鋭い突っ込みが入るとスルーしたりします。
設計っている？
設計っている？
- 規模によって違う
- 規模が小さいなら不要
- 規模が大きいならあった方がいい
設計っている？
- 規模によって違う
- 規模が小さいなら不要
- 規模が大きいならあった方がいい
- 大小兼ねるようなのはまだ無いかも
小規模向け設計（あまり分業してないようなの）
jQuery使う
jQuery使う
jQueryはフレームワークに近いのでそれだけである程度の規模までは対応可能。
うまく使えばそれだけで十分。
中規模向け設計（サーバ、JS、cssで分業してるようなの）
何が必要？
何が必要？
- URL dispatcher
- form validater
何が必要？
- URL dispatcher
- form validater
- require
何が必要？
- URL dispatcher
- form validater
- require
- event handler
何が必要？
- URL dispatcher
- form validater
- require
- event handler
- CSS coding rule
何が必要？
- > URL dispatcher
- form validater
- require
- event handler
- CSS coding rule
URL dispatcher
そこそこ規模が大きくても何とかなるjavascriptの設計（URL dispatcherの薦め）
function dispatcher (path, func) {
dispatcher.path_func = dispatcher.path_func || []
if (func) return dispatcher.path_func.push([path, func]);
for(var i = 0, l = dispatcher.path_func.length; i < l; ++i) {
var func = dispatcher.path_func[i];
var match = path.match(func[0]);
match && func[1](match);
};
};
dispatcher(location.pathname);
URL dispatcher
そこそこ規模が大きくても何とかなるjavascriptの設計（URL dispatcherの薦め）
dispatcher('.', function () {
$(function () {
// 全URLで使う内容
});
});
dispatcher('^/hoge', function () {
$(function () {
// /hogeで使う内容
});
});
dispatcher('^/hoge|^/huga', function () {
$(function () {
// /hogeと、/hugaで使う内容
});
});
何が必要？
- URL dispatcher
- > form validater
- require
- event handler
- CSS coding rule
form validater
サーバサイドでvalidate用APIを用意して、formの内容を投げるのがいいかも。
（サーバサイドでも入力時に同じAPIを使う）
通信があるので遅くなるのが欠点。
validation ruleを正規表現とかでサーバサイドと共有するのは難しい。
（複数要素と関連するようなruleを表現するのが大変）
何が必要？
- URL dispatcher
- form validater
- > require
- event handler
- CSS coding rule
require
URL dispatcherあればそこまで重要じゃないかも。
index.jsとlib.jsくらいで分かれてればいいので。
jsとかcssのURL渡すと圧縮して一つにしてくれるGoogleのサービスとかあるよ。
（使ったこと無いけど）
Reducisaurus Shrinks CSS and JS
何が必要？
- URL dispatcher
- form validater
- require
- > event handler
- CSS coding rule
event handler
機能毎にevent namespaceで名前つける。
functionも名前つける。
$('a').bind('click.hoge', function huga () {});
（firequery使ったときにどのイベントハンドラか判別できる）
$().live()はくせがあるけど、うまく使うと待ちを減らせるのでおすすめ。
DOM Ready前にイベントを設定する方法（jQuery.liveの紹介）
何が必要？
- URL dispatcher
- form validater
- require
- event handler
- > CSS coding rule
CSS coding rule
.link:{cursor:pointer;} .hide:{display:none;} .error:{color:red;}
的なものは常に定義しといてもらえると楽。
もう少し大きな単位で共通化したい（Lightbox的なものとか）
form tagはセレクタに使用しない。
出来るだけ階層化する（フラットにしない）。
JSで使用する用の名前空間を作る（js*とかfn*とか）
その他
jQuery使うなら中規模まではクラス的構造そんなにいらない。
階層構造に関してはURLとPluginとカスタムイベントとかで結構表現できる。
テスト考えるならクラス的な方がいい。
クラス的にするかどうかはテストしたいかどうかで判断してもいいかも。
大規模なやつはDojoとかClosure Library使うと良いと思う。
以上 ご静聴ありがとうございました