MochiKit をさわってみた

Naoya Nakazawa

, Inc.

MochiKit とは？

makes JavaScript suck a bit less
JavaScript ライブラリ
http://www.mochikit.com
1.4 系の開発版をさわってみた
ドキュメント、テストがかなり充実
使い方は、lib/MochiKit/MochiKit.js をロードするだけ

MochiKit.Async

非同期タスクを管理
非同期タスクを登録して、登録したタスクが失敗したときの処理を簡単に記述できる

var url = 'js/META.json';
var d = loadJSONDoc(url);
var gotData = function (data) {
  alert('MochiKit.Async version is ' + MochiKit.Async.VERSION);
};
var dataFetchFailed = function (err) {
  alert("The data could not be fetched");
};
d.addCallbacks(gotData, dataFetchFailed);

MochiKit.Base

拡張可能な比較関数、JSONなどの関数群がたくさん
compare: 配列やオブジェクトを比較

ex) if (compare([1, 3], [1, 3]) { ...

map: 関数や配列をセットにして、呼び出す

ex) map(function(obj) { alert(obj); }, [1, 2, 3, 4]);

MochiKit.DOM

DOM 操作を簡単にする
HTML 要素がたくさん定義されている (A, UL, LI, TABLE, TBODY ...)

クラスtestをulで書き換える

ここが置換される

    var list = UL(null, LI("item1"), LI("item2"), LI("item3"));
    swapDOM("demo_dom", list);

MochiKit.DragAndDrop

要素をドラッグ＆ドロップ
1.4 からドラッグ＆ドロップしたときのオプションが指定可能になった

デモ（コードは長いので省略）

MochiKit.Color

CSS3 でサポートされる色抽象概念
文字から RGB 値を取得したりすることができる

デモ 1: alert(Color.whiteColor());
デモ 2: alert(Color.fromString("white"));

MochiKit.DateTime

日時を取り扱う

ex) toISOTimestamp(new Date());

MochiKit.Format

書式フォーマッター

alert(truncToFixed(0.159, 2));
alert(roundToFixed(0.159, 2));
alert(percentForamt(1.59));
alert(numberFormatter("##,###%")(159));

MochiKit.Iter

イテレータ for JavaScript
Python の iteration protocol からインスパイヤ

ex) var i = count(); alert(i.next()); ...
ex) sum([1, 2, 3, 4, 5]);

MochiKit.Logging

alert に疲れたときに ... ロギング
ロギングフレームワーク (log4j) と同様の機能が用意
ログは、Firefox ではコンソールに表示される

ex) log("logging...");
ex) logError("logging error...");

MochiKit.LoggingPane

インタラクティブなロギングパネル

ex) createLoggingPane(true);

MochiKit.Selector(new!)

CSS セレクタの文法で要素を選択
$$ 記法で、HTML の要素を選択

ex) MochiKit.Base.map(MochiKit.Visual.fade, $$('p.selector'));

<p class="selector">この要素を選択<p>

MochiKit.Signal

シンプルなイベントハンドリング
マウス、キーボードイベントを簡単にハンドリングできる

ex) connect('demo_signal', 'onclick', obj, 'demo_signal');

MochiKit.Style(new!)

要素の状態を簡単に変える
要素を移動させたり、非表示にしたりできる

ex) 要素を移動させるデモ

これを動かす

    var pos = getElementPosition('demo_style');
    var size = getElementDimensions('demo_style');
    var new_pos = new Coordinates(pos.x + size.w + 5, pos.y + size.h + 5);
    setElementPosition('demo_style', new_pos);