超シンプルなJavaScriptクラスを作った。
いずれライブラリとして公開しようと思っているけど、
ドキュメントを書くのが面倒なので、ひとまずプレビューしてみる。
» JavaScript on Dolly
» Download
概要
JavaScript on Dolly(dolly.js)は、
手っ取り早くクラスを作るための基盤クラス。
昨今のJavaScriptフレームワークはオールインワンで強力だけど、
肥大化しすぎていて、個人的にシンプルなやつが欲しかった。
初心者向けの機能は無い。エフェクトなんてもちろん無い。
ports.jsとの棲み分けを考えてるけど、
ports.jsはJavaScriptフレームワークを読込むためのライブラリで、
こちらは、むしろ肥大化傾向にあるかな〜。
ECMAScript 4のimportやunitが気になるので、
リモートロードとか、互換性のある構文を取り入れようかと考えている(未定)
反対に今回のdolly.jsは、
削れるものは極力削って、シンプルにしていく予定。
最低限の機能だけあれば良い。
使い方
<script src="dolly.js" type="text/javascript"></script> <script type="text/javascript"> myclass = new dolly(); </script>
基本的にこれだけ。
普通は拡張したいので、
myclass.extend({
init: function () {
this.flag = false;
return this;
},
standby: function () {
this.myFunc(this.flag);
},
myFunc: function (flag) {
...
}
});
みたいにdolly.extendにオブジェクトを渡せばOK。
2つの特別なメソッド名があって、
initは拡張される前に実行される。
initがある場合は、initの戻り値を渡すオブジェクトとみなすので通常はthisを返しておく。
standbyはDOMツリーの読込みが完了した(DOMContentLoaded)タイミングで実行される。
dolly.$
いわゆる$関数。単純なCSSセレクタだけ対応。
ID(getElementByID)の場合は単体で、
タグ(getElementsByTagName)やクラス(getElementsByClassName)は配列で返す。
存在しない場合はnullを返す。
myclass.$('div#box ul.list a.on');
myclass.$('#box .list .on');
myclass.$('div ul a');
dolly.$a
NodeListなどを配列化するだけ。
lengthが無い単体で渡した場合は0番目に格納した配列を返す。
myclass.$a(rss.getElementsByTagName('item'));
dolly.$c
Cookieの保存と取得。
第1引数がキー、第2引数が値、第3引数が有効日数(省略時はTemporary Cookie)
有効日数を-1以下にすればCookieを消せるはず。
第1引数のみの場合は取得、存在しない場合はnullを返す。
myclass.$c('mycookie', 'test', 365);
myclass.$c('mycookie'); // test
dolly.$x
特に芸の無いAjax。
第1引数がURL、第2引数がリスナー関数、第3引数は各種オプション(詳細は省略)
リスナー関数の第1引数に結果を渡すだけ。
myclass.$x('example.xml', function (r) { ... }, {
method: 'POST',
query : { mode: 'rss', count: 10 }
});
dolly.isset
引数がundefinedかの真偽を返すだけ。
myclass.isset(myval);
dolly.isown
第1引数のオブジェクトの第2引数のキーのプロパティやメソッドが、
prototypeで拡張されたものでは無いかの真偽を返すだけ。
myclass.isset(myobj, key);
dolly.any
引数を順番にチェックして最初にundefinedではないものを返すだけ。
myclass.any(myval1, maval2, myval3);
dolly.bind
関数内スコープの固定。
第1引数が固定したい関数、
第2引数がthisにしたいオブジェクト(省略時はdolly)
本来のthisは関数の第1引数に渡されて、
本来の引数は第2引数以降に繰り上げられる。
myclass.bind(function (el) { ... });
dolly.each
繰り返し。
第1引数が繰り返したいオブジェクトや配列、
第2引数が処理関数。処理関数の引数でキーと値(ひとつの場合は値)を指定。
第3引数が処理関数の中でthisにしたいオブジェクト(省略時はdolly)
myclass.each(myobj, function (key, val) { ... });
うわ、結局長くなっちゃった。