uupaa.js 基礎知識なんちゃってマスター
uupaa.js 0.7 の概要を、1分でざざーっと分かるように書きました。
これ自体10分で書いてるので、ノープラン・ノーチェックでお届けします。
uupaa.js のビルド
uupaa.js というファイルはありません。
必要な機能を組み合わせ、ユーザがビルドして作ります。
ビルドコマンド
ビルド方法を説明したスライド: http://handsout.jp/slide/1909
b.php がビルドコマンドになります(要PHP)。パッケージ名のほかに、-m -y -g -j などのオプションを指定できます。
build/b.php パッケージ名 -m
ビルドに成功すると、
uupaa.js と build/mini.パッケージ名.コンパイラ名.js ファイルが生成されます。
以下の初期パッケージがあります。パッケージは簡単に自作することができます。
uupaa.js の読み込み
<script src="uupaa.js"></script>
uupaa.js のネームスペース
uupaa.js を読み込みと、window.uu が定義されます。uu で始まる名前は 基本的に uupaa.js の予約語になります。
window.uu 以下に各種機能が用意されています。
uupaa.js の実行
以下のグローバル関数を定義すると、条件成立でライブラリから呼び出します。
// DOMContentLoaded または window.onload のタイミングで呼び出す
function xboot(uu) {
}
// window.onload のタイミングで呼び出す
function xwin(uu) {
}
// canvas が利用可能になったタイミングで呼び出す
function xcanvas(uu, canvasNodeList) {
}
// Web Storage 相当の機能が利用可能になったタイミングで呼び出す
function xlocal(uu, backend) {
}
// ノードビルダー機能が、ノード生成時に呼び出す
function xtag(uu, node, buildid, nodeid) {
}
初めの一歩
uupaa.js には、纏めて処理する(短い記述,遅い)記述方法と、１つの事を処理する(長い記述,速い)記述方法があります。
以下は、リストをまとめてゼブラカラーにします。 uu() と css() がチェインしています。
uu("div>ul>li:nth-child(even)").css("bgcolor", "gray");以下も、リストをまとめてゼブラカラーにします。 uu.query と uu.css を組み合わせて利用しています。
uu.query("div>ul>li:nth-child(even)").forEach(function(v) {
uu.css(v, "bgcolor", "gray");
});"bgcolor" は "backgroundColor" の略語です。他には
- o → opacity
- pos → position
- w → width
- h → height
- x → left
- y → top
- bg → background
- bgimg → backgroundImage
- bgrpt → backgroundRepeat
- bgpos → backgroundPosition
が使えます。
CSSプロパティの指定には、"text-align" や "textAlign" が利用可能です。
ノードビルダー
ノードをとても簡単に作成/追加できます。
uu.exp(); // window.uu.* を window.* にエクスポート body( div("id,a,title,div1", "positon,absolute", ul( li(":list1"), li(":list2"), li(text("list3")) ) ) );
上記のコードは、以下のHTMLと等価です。
<body> <div id="a" title="div1" style="position:absolute"> <ul> <li>list1</li> <li>list2</li> <li>list3</li> </ul> </div> </body>
div("id,a,title,div1", "positon:absolute") の最初の文字列で Attrの設定、次の文字列が CSS の設定になります。 文字列の先頭が ":" で始まっている場合はテキストノードを作成します。
テキストノードの作成は、uu.text("テキストノード") でも可能です。
OOPのサポート
uupaa.js は大規模開発用の機能として、基本的なOOP機能を提供します。
クラスの作成
三階層までの継承構造を持つクラスを作成できます。
uu.Class("A", {
init: function() {}
});
uu.Class("B < A", {
init: function() {}
});
uu.Class("C < B", {
init: function() {}
});
メッセージポンプのサポート
インスタンス間のメッセージング機能が使えます。
uu.Class.singleton("MsgA", {
init: function() {
this.msgB = uu.factory("MsgB");
},
msgbox: function(msg, param) {
alert(msg); // Hello
}
});
uu.Class.singleton("MsgB", {
init: function() {
this.msgA = uu.factory("MsgA");
},
msgbox: function(msg, param) {
uu.msg.post(this.msgA, "Hello");
}
});メッセージの送信先の指定には、ユニキャスト, マルチキャスト, ブロードキャストが使えます。
また、同期(send)と非同期(post)によるやり取りもできます。
postは戻り値を返さず、sendは戻り値を返すことができます。
ノードの操作
複数のノードを纏めて操作するには、uu(セレクタ).* を使います。
セレクタで指定した要素内のテキストを変更します。
uu("E>F").text("iPad");セレクタで指定した要素内のHTMLを変更します。
uu("E>F").html("<div>iPad</div>");セレクタで指定した各要素の先頭に要素を追加します。
uu("E>F").first("<div>iPad</div>");セレクタで指定した各要素の末尾に子要素を追加します。add の代わりに lastChild でも同じ意味になります。
uu("E>F").add("<div>iPad</div>");この他に、prev, next, last, firstChild, remove, attr, css, klass などがあります。
単体のノードを操作するには、uu.text(), uu.node() や uu.node.* を使います。
イベントハンドラ
uu.ev と uu.ev.unbind でイベントの設定/解除を行います。
uu("セレクタ").bind と unbind で纏めて設定/解除することもできます。
このほかにも、uu.click や uu.unclick など、およそ見慣れたイベントが利用できます。
また、uu.live() による動的に追加された要素に対するイベントの設定も可能です。
クラスでイベントをサポート
クラスにhandleEventメソッドを定義すると、シンプルなイベントハンドラを作成できます。
// uu.factory はインスタンスの生成だけではなく、 // 同時にクラスの定義も可能です var obj = uu.factory("MyEvent", { init: function() { }, handleEvent(evt) { uu.ev.stop(evt); // バブリングの停止とデフォルト動作のキャンセル // イベントソース, ページ座標, オフセット座標, イベントコードの表示 uu.puff("src=%s, pageX=%d, pageY=%d, " + "offfsetX=%d, offsetY=%d, event code=%d", evt.src.tagName, evt.px, evt.py, evt.ox, evt.oy, evt.code); } }); // 関数で受けることもできる function otherEvent(evt) { uu.ev.stop(evt); } // click, mousedown, mousemove, mouseup イベントが発生すると // obj.handleEvent が呼ばれる // "my." はネームスペース // "+" はイベントキャプチャーの指定 // 複数のイベントを１つのイベントハンドラで処理可能 uu.ev(document.body, "my.click,my.mousedown+,my.mousemove+,my.mouseup", obj); // mouseenter, mouseleave イベント発生で otherEvent を呼び出す uu.ev(uu.body(), "mouseenter,mouseleave", otherEvent);
CSSのサポート
CSS3を間接的にサポートし、CSS3が使えないブラウザでも角丸やbox-shdow,グラデーション機能を提供します。
-uu-border-radius: 4px 0 10px 1em; -uu-box-shadow: navy 5px 5px 10px;
複数の画像を任意の位置に配置するマルチプルバックグラウンドなどもサポートしています。
-uu-background: url(a.png), url(b.png);
uu.css.js を組み込むと、基本的なCSSのマニピュレーション機能が追加されます。
- uu.off() 要素のオフセット
- uu.size() 要素のサイズ(w,h)
- uu.rect() 要素の矩形(x,y,w,h)
- uu.margin()
- uu.border()
- uu.padding()
- uu.px() - 単位をpxに変換
- uu.show(), uu.hide()
- uu.toStatic(), toAbsolute(), toRelative()
- uu.selectable(), unselectable()
- uu.textShadow()
- uu.create() - スタイルシートの管理
アニメーション
uu.tween(node) や uu(セレクタ).tween でアニメーションを行います。
Ajaxのサポート
uu.ajax() でAjax が uu.jsonp で JSONP による通信をサポートします。
uu.ajax.queue() を使うと、ファイルロードの待ち合わせができます。
JavaScript2.0 (ECMAScript262-5th Edition)のサポート
以下の組み込みオブジェクトに対し機能拡張を行います。
- Array.isArray
- Array.prototype.indexOf, lastIndexOf, every, some, forEach, map, filter, reduce, reduceRight
- Boolean.prototype.toJSON
- Date.prototype.toISOString, toJSON
- Number.prototype.toJSON
- String.prototype.trim, toJSON
また、Firefoxで innerText, outerHTML が利用可能になります。
色辞書の提供
uu.color.js を組み込むと "pink", "tomato" などの W3C Named Color が利用可能になります。
また、グレー, セピア, 補色, HSV色空間によるカラーアレンジ, RGBA⇔HSVA, RGBA⇔HSLA の相互変換
ファミコン(R)カラーパレット、色弱者向けカラーパレットなどもサポートします。
Flash,VMLのサポート
uu.flash は SWFObjectのコンパクトな実装を提供します。
uu.canvas.js を組み込むと VML によるベクターグラフィックを動かすための基本的な環境が整備されます。
Canvasのサポート
IEで<canvas>を利用可能にします。
また、IE以外のブラウザに対しても、Canvas TextAPI やシャドウなどの実装されていない機能を補完し、クロスブラウザで使えるようにします。
えーと
全ての機能は、書ききれないので、残りは名前だけ並べます。
最後に
まだ、作ってる最中です。
