ライブラリに入れる関数の選定

JavaScript

KEM.jsに入れるべき関数を選定する。

込み入った処理などはjQueryにやらせればいい（jQueryが使えない環境では込み入った処理はやらない）ので、jQueryを使うまでもないような処理ができれば。

例えば、画像のロールオーバー処理なんかはいちいちjQueryを使うまでもない気がしているので、それに必要そうな処理を考える。

タグ名やIDを指定しての要素取得

CSSセレクタを解釈させようとすると大変なので、要素名、クラス名、ID属性くらいに対応させる。一つの関数で引数に応じて処理を分けるようにして、戻り値は常にArrayとする。

さらに、引数末尾にFunctionを指定すると、取得できた要素についてeachみたいなことができるようにする。それと、親要素も指定できるように。

KEM.elements('#ID', function(e){});
KEM.elements('IMG', function(e){});
KEM.elements('IMG', 'rollover', function(e){});
KEM.elements(E, '#ID', function(e){});
KEM.elements(E, 'IMG', function(e){});
KEM.elements(E, 'IMG', 'rollover', function(e){});

子要素だけを取得することもできるように。

KEM.children(E, 'IMG', function(e){});
KEM.children(E, 'IMG', 'rollover', function(e){});

親要素も。これは戻り値は要素 or nullで、Functionもとらなくていいか。

KEM.parent(E);
KEM.parent(E, 'IMG');

イベントハンドラの設定

イベント名を指定するか、Objectリテラルを使えるようにする。

KEM.addEvent(E, 'click', function(){});
KEM.addEvent(E, {
  click: function(){},
  mousedown: function(){}
});

実装はaddEventListenerかattachEventで。イベントの解除とか順番とかは気にしない。

クラス（className）の操作

add/remove/hasがあれば十分。

KEM.addClass(E, 'foo var');
KEM.removeClass(E, 'foo var');
KEM.hasClass(E, 'foo var');

hasClassで複数指定の場合はANDで。

別のスクリプト・スタイルシートのローディング

面倒なので単にHTMLを出力する方法で。

KEM.loadScript('foo.js', {charset: 'UTF-8'});
KEM.loadStyle('foo.css', {charset: 'UTF-8', media: 'screen,tv'});

Functionかどうか

引数にFunctionを取るものが多いので、それがFunctionかどうかを判別出来る関数も作っておくのが良さそう。

KEM.isFunction(x);

実装はtypeofとconstructorで。

ところで、typeof /RegExp/がfunctionを返すのはなぜ？あとで調べる。

ロールオーバーの実装

で、上記の関数を使ってロールオーバーを実現するとこんな感じのコードに。仕様はとりあえずIMG.rolloverについて、マウスオーバーでIMG要素にhoverクラスを追加、マウスアウトでhoverクラスを削除、としておく。

まずはjQueryでやるとこんな感じ。

$('IMG.rollover').
  mouseover(function() { $(this).addClass('hover'); }).
  mouseout(function() { $(this).removeClass('hover'); });

KEM.jsだとこんな感じに。

KEM.elements('IMG', 'rollover', function(e) {
  KEM.addEvent(e, 'mouseover', function(){ KEM.addClass(e, 'hover'); });
  KEM.addEvent(e, 'mouseout', function(){ KEM.removeClass(e, 'hover'); });
});

この方向で関数についてまとめるのが次の作業。