KEM.js - Kumanote Essential Modules for JavaScript

配布情報

リビジョン:2
リリース日:2010-06-21T14:26:40Z
著作者:Kumanote kikaku corp.
配布元:http://code.google.com/p/kem/

概要

  • 機能を絞ったJavaScriptライブラリ
  • ブラウザをブラウザの種類ではなく機能で分けて処理できるようにする
    • ただしIEは特別扱いできるようにしておく

対応するブラウザ

グレードの確認

添付の demo/browser_check.html で表示される数値(グレード)から、ブラウザが対応しているかどうかを確認可能です。

何も表示されないか、エラーが発生した場合
まったく対応していない古いブラウザ、もしくは全く新しいブラウザです。KEM.jsを使ったコードを実行することはできません。
-1
そのブラウザはJavaScriptが有効になっていません。
0
とりあえずKEM.jsを読み込んでもエラーにはなりません。 KEM(handler) のみが使用できますが、実質何もできません。
1
KEM.jsのすべての機能を使用できます。
2
KEM.js以外にも、jQueryやprototype.jsといったモダンなライブラリも使用できる、比較的新しいブラウザです。

テストの実行

添付の test/runner.html を実行すると、KEM.js向けのUnitTestが実行されます。

実行完了後に、最下段の結果表示部分(all results)に 4 tests, 19 fixtures, 240 assertions, 0 failures. と表示されれば、そのブラウザはグレード1以上であることを表します。

結果が 4 tests, 19 fixtures, 12 assertions, 0 failures. と表示されれば、そのブラウザはグレード0であることを表します。

コード例

<div id="demo">Click Me !</div>
<script type="text/javascript" src="KEM.js"></script>
<script type="text/javascript"><!--
if (window.KEM) window.KEM(function() {
  KEM.element('#demo', function(e) {
    KEM.addEvent(e, 'click', function() {
      alert('Click !');
    });
  });
});
//--></script>

API

定数

KEM.REVISION
KEM.jsのリビジョン番号
KEM.RELEASE_DATE
KEM.jsのリリース日
KEM.GRADE
0/1/2のうちのいずれか
KEM.IS_IE
IEであれば true
KEM.IS_IE6
IE 6であれば true
KEM.ROOT
KEM.jsのあるパス( http://example.com/js/KEM.js なら http://example.com/js )

KEM(handler)

KEM.GRADE が1以上で、、 handlerFunction である場合は、 handler を実行し、その結果を返します。そうでない場合は何もせずに undefined を返します。

この関数のみ、KEM.GRADEが0でも使用可能ですが、上記の通り handler は実行されません。

使用例
if (window.KEM) KEM(function() {
  KEM.addClass(document.body, 'js-only');
});

KEM.extend(target, source)

targetsource を浅くコピーし、 target を返します。

KEM.isFunction(target)

targetFunction オブジェクトであれば true 、そうでなければ false を返します。

KEM.isArray(target)

targetArray オブジェクトであれば true 、そうでなければ false を返します。

KEM.trim(str)

str を文字列に変換し、前後の空白を取り除いた結果を返します。 ただし、 strnull または undefined の場合は空文字列を返します。

KEM.escapeForHTML(str)

str を文字列に変換し、HTML向けのエスケープ処理を行った結果を返します。 ただし、 strnull または undefined の場合は空文字列を返します。

KEM.escapeForRegExp(str)

str を文字列に変換し、正規表現向けのエスケープ処理を行った結果を返します。 ただし、 strnull または undefined の場合は空文字列を返します。

KEM.loadScript(src, options=null)

src で指定されたパスをスクリプトとして読み込むような SCRIPT タグを出力します。

options に指定できるキーと値
charset
  • charset属性値
  • 省略時は特に出力しない
defer
  • defer属性の有無(真なら有)
  • 省略時は特に出力しない
type
  • type属性値
  • 省略時は text/javascript
使用例
<script type="text/javascript"><!--
if (window.KEM) window.KEM(function() {
  KEM.loadScript('jquery-1.4.2.min.js');
}, 'modern');
//--></script>
<script type="text/javascript"><!--
if (window.jQuery) $(function() {
  alert('jQuery loaded !');
});
//--></script>
注意点
単に SCRIPT タグを出力するだけなので、この関数を実行したあとすぐに、別のスクリプトに定義された関数などを使用することはできません。使用例にあるように、 SCRIPT タグを分けて書くなどして対応する必要があります。

KEM.loadStyle(href, options=null)

href で指定されたパスをスタイルシートとして読み込むような LINK タグを出力します。

options に指定できるキーと値
charset
  • charset属性値
  • 省略時は特に出力しない
media
  • media属性値
  • 省略時は特に出力しない
title
  • title属性値
  • 省略時は特に出力しない
type
  • type属性値
  • 省略時は text/css

KEM.addEvent(target, kind, handler)

targetkind で指定されたイベントで handler を実行するよう設定します。

kind には clickmouseover などを指定可能です( onclick のように on を前置する必要はありません)。

target がイベント登録できない場合、 handlerFunction でない場合は何もしません。

KEM.addEvent(target, handlers)

handlers に、 イベント種別をキー、 イベント処理を値としたオブジェクトを指定することで、複数のイベントをまとめて登録します。

使用例
KEM.addEvent(ELEMENT, {
  hover: function() { KEM.addClass(ELEMENT, 'hover'); },
  blur: function() { KEM.removeClass(ELEMENT, 'hover'); }
});

KEM.elements(name, handler=null)

name をタグ名とする要素の Array を返します。

name は文字列に変換されますが、このとき、先頭の文字が # である場合は、CSSの一意セレクタのように振舞います( #foo であれば、id属性値が foo である要素を抽出します)。

handlerFunction の場合は、得られた要素すべてについて handler が実行されます。このとき、 handler には引数として 要素, 得られた要素のうち何番目か, 要素のArray が渡されます(Array#forEachなどに似ています)。

使用例
KEM.elements('div', function(e, i, a) {
  KEM.addClass(e, 'foo');
});

KEM.elements('#bar', function(e, i, a) {
  KEM.addClass(e, (i & 1) ? 'odd' : 'even');
});

KEM.elements(tagName, klass, handler=null)

tagName をタグ名とし、クラス名に klass を含む要素の Array を返します。

klass が空白区切で複数指定された場合は、指定されたクラスすべてを持つ要素を抽出します(AND条件となる)。

handler については KEM.elements(name, handler=null) と同様です。

KEM.elements(target, tagName, handler=null)

target の子孫の内、 tagName をタグ名とする要素の Array を返します。

target がノードでない場合は空の Array を返します。

handler については KEM.elements(name, handler=null) と同様です。

KEM.elements(target, tagName, klass, handler=null)

target の子孫の内、 tagName をタグ名とし、クラス名に klass を含む要素の Array を返します。

target がノードでない場合は空の Array を返します。

klass が空白区切で複数指定された場合は、指定されたクラスすべてを持つ要素を抽出します(AND条件となる)。

handler については KEM.elements(name, handler=null) と同様です。

KEM.children(parent, tagName, handler=null)

parent の子の内、 tagName をタグ名とする要素の Array を返します。

parent がノードでない場合は空の Array を返します。

handler については KEM.elements(name, handler=null) と同様です。

KEM.children(parent, tagName, klass, handler=null)

parent の子の内、 tagName をタグ名とし、クラス名に klass を含む要素の Array を返します。

parent がノードでない場合は空の Array を返します。

klass が空白区切で複数指定された場合は、指定されたクラスすべてを持つ要素を抽出します(AND条件となる)。

handler については KEM.elements(name, handler=null) と同様です。

KEM.parent(target, tagName=null)

target が要素だった場合、その祖先から tagName と要素名が一致するものを返します。

target が要素でない場合、見つからない場合は null を返します。

tagName が文字列として無効か、空文字列の場合は単に親ノードを返します。

KEM.hasClass(target, klass)

target.classNameに klass が含まれていれば true 、そうでなければ false を返します。

targetnull および undefined の場合、 klass が文字列として無効か空文字列の場合は false を返します。

klass には複数のクラスを空白区切で指定可能で、その場合は複数のクラスを含むかどうかを判別します。

使用例
KEM.hasClass({className: 'apple banana'}, 'apple'); // true
KEM.hasClass({className: 'apple banana'}, 'banana'); // true
KEM.hasClass({className: 'apple banana'}, 'apple banana'); // true
KEM.hasClass({className: 'apple banana'}, 'apple banana cocoa'); // false

KEM.addClass(target, klass)

target.classNameに klass を重複がないように加えます。

targetnull および undefined の場合、 klass が文字列として無効か空文字列の場合は何もしません。

klass には複数のクラスを空白区切で指定可能で、その場合は複数のクラスを加えます。

KEM.removeClass(target, klass)

target.classNameから klass を取り除きます。

targetnull および undefined の場合、 klass が文字列として無効か空文字列の場合は何もしません。

klass には複数のクラスを空白区切で指定可能で、その場合は複数のクラスを取り除きます。

変更履歴

rev.1
  • 公開
rev.2