uupaa.js と jQuery を機能を中心にざっくりと比較
Classの継承についてサンプルを追記しました。
jQuery の特徴的な構文を uupaa.js で表現する方法を追記しました。
デバッグ支援機能について追記しました。
特徴
uupaa.js | jQuery | ||
初版 | version 0.1 (2008-06-07) | version 1.0 (2006-10-27) | |
最新版 | version 0.8 (2010年末を予定) | version 1.4.2 (2010-02-19) | |
ライブラリの目標 | WebOSのフロントエンド | 不明 | |
本来の用途 | WebOS / WebApp | DOMの操作とサイトの装飾 | |
使われ方 | 導入実績なし | 小〜中規模サイト / ポータルサイト等 | |
想定されるコアユーザ層 | エンジニア | デザイナー / コーダー / エンジニア | |
名前空間 | uu (1つ) | jQuery と $ (2つ) | |
ライブラリによる識別子プリフィクスの予約 | uu または data-uu で始まる識別子を予約 | jQueryで始まる識別子を予約 | |
他のライブラリとの併用 | 基本的に可能 | 問題あり(機能衝突) | |
プラグインによる機能の拡張 | あり | あり | |
プラグイン同士の機能連携サポート | あり (メッセージング) | なし | |
デバッグ支援機能 | あり | なし | |
ユニバーサルデザインの取り込み | WAI-ARIA, CUD, TTS (まだまだ不十分) | なし | |
ライセンス | MIT (好きにしたらええねん) | MIT / GPL Lv2 | |
ブラウザサポート | Aグレード IE 8+ Firefox 3.5+ Safari 4+ Opera 10.50+ Google Chrome 4+ iPhone 3+ Bグレード IE 6+ Firefox 3.0+ Safari 3.1+ Opera 9.5+ |
IE 6+ Firefox 2+ Safari 3+ Opera 9+ Google Chrome |
|
モバイルサポート | あり ( MobileWebKitビルドモード ) | なし | |
ビルドツール | 付属 ( 不要機能の除去, AutoInclude, 分割ビルド, モバイル特化) |
なし | |
ソースコードステップ数 | 約8800行 | 約6200行 | |
ライブラリコアサイズ (通常/Minify/zip) |
350KB / 85KB / 36KB | 165KB / 70KB / 24KB | |
最小構成時ビルドサイズ (通常/Minify/zip) |
350KB / 22KB / 10KB | --- / --- / --- |
ライブラリの機能比較
いくつかの機能についてはドキュメントがあります → http://code.google.com/p/uupaa-js/w/list
uupaa.js | jQuery | |
ネイティブオブジェクトの拡張 | document.html, document.head (WebKit由来 → HTML5で検討中) |
なし |
ECMAScript-262 5th対応 | Array.isArray(), Array#map(), some(), every(), Array#filter(), forEach(), Array#indexOf(), lastIndexOf(), Array#reduce(), reduceRight() Boolean#toJSON(), Date#toISOString(), toJSON() Number#toJSON(), String#toJSON(), trim() |
なし |
CSSOM / IE由来API対応 | HTMLElement.innerText, outerHTML (Gecko でも利用可能に) | なし |
コンフィグレーション | window.uuconfig | なし |
環境と機能の判別 | uu.env.*, uu.ready.*, uu.ie, uu.gecko, uu.webkit, uu.opera |
$.support.*, $.browser.* |
簡易テンプレート / コードスニペット | uu.snippet() | なし |
クラスファクトリ | uu("ClassName") | なし |
ノードセットファクトリ | uu(Node / NodeArray) | $(Node / NodeArray) |
Ajax | uu.ajax(), uu.ajax.binary() | $.ajax |
JSONP | uu.jsonp() | $.ajax |
JavaScriptの非同期ロード | uu.js() | $.getScript |
ファイルの存在確認(stat) | uu.stat() | なし |
ファイルの同期読み込み | uu.require() | $.ajax({ async: false }) |
型の判別 | Array.isArray(), uu.type(), uu.isNumber(), uu.isString(), uu.isFunction() |
$.isArray, $.isFunction |
似ているか(類似検出) / deep matching | uu.like() | なし |
オプショナル引数の補完 | uu.arg() | なし |
Mixin と オーバーライド | uu.mix() | $.extend |
要素Aが要素Bを含んでいるか | uu.has() | なし |
N番目の要素を取得 | uu.nth(), uu().nth() | $().get(), $().eq() |
イテレート | uu.each(), uu().each(), Array#forEach(), Array#map() など |
$.each, $().each(), $.map() |
プロパティ名(key)の列挙 | uu.keys() | なし |
値(value)の列挙 | uu.values() | なし |
Key/ValueからHashを生成 | uu.pair() | なし |
要素数の取得 | uu.size(), uu().size() | $().size(), $().length |
配列化された関数の呼び出し | uu.calls() | なし |
要素を検索 | uu.indexOf() | $.inArray(), $().index() |
Hashの生成 | uu.hash() | なし |
Arrayの生成 | uu.array() | なし |
FakeArrayのArray化 | uu.array() | $.makeArray() |
ByteArrayのHexDump | uu.array.dump() | なし |
Arrayのソート(数値/文字/A→Z/Z→A) | uu.array.sort() | なし |
Arrayのクリーニング(null,undefined,欠落要素の除去) | uu.array.clean() | なし |
ArrayからHashを生成 | uu.array.toHash() | なし |
Arrayから重複要素を除去 | uu.array.unique() | $.unique() |
Attrにアクセス | uu.attr(), uu().attr() | $().attr() |
Nodeの不可視データへのアクセス node["data-***"] |
uu.data(), uu().data() | $().data() |
CSS/スタイル属性へのアクセス | uu.css(), uu().css() | $().css() |
スタイル名(css-prop→cssProp)の変換ポリシー | 初期化時にまとめて一度だけ(高速,低コスト) | 毎回動的に変換(低速,高コスト) |
IEでwindow.getComputedStyle相当の機能を実装 (スタイルの計算結果を"px"単位で取得) |
uu.css(node, "px") | なし |
CSS単位系をpxに変換 ("1em" → "16px", "auto" → "12px") |
uu.css.unit() | なし |
CSS Box Model(margin, border, paddin)値をpxで取得 | uu.css.box() | なし |
CSS Rect(ノード間のオフセットと大きさ)を取得 | uu.css.rect() | $().offset(), $().width(), $().height() |
CSS Position(absolute/relative/static)を設定 絶対⇔相対座標のケア |
uu.css.position() | $().css("position"), $().position() |
CSS BackgroundColorを探索 | uu.css.bgcolor() | なし |
CSS3 opacity | uu.css.opacity() | $().css("opacity") |
CSS3 transform(移動/回転/ズーム/変形) | uu.css.transform() | なし |
CSS3 user select | uu.css.userSelect() | なし |
StyleSheetへのアクセス | uu.ss() | なし |
Viewport情報へのアクセス (ウインドウサイズ/スクロールオフセット/Landscape/Retina) |
uu.viewport() | なし |
非表示状態要素の生成をサポート | uu.backyard | なし |
仮想タイマー | uu.interval() | なし |
アニメーション / エフェクト | uu.fx() | $().animate() |
アニメーションの実装方式 | 1. inline展開済みの文字列を構築 2. 文字列から関数を生成 3. ループでキューを処理 |
ループでキューを処理 |
リバースアニメーション | あり | なし |
カラーアニメーション | あり | なし |
Easing | 19種類 | liner と swing (要easingプラグイン) |
CubicBezier | あり | なし |
showアニメーション | uu.fx.show(), uu().show() | $().show() |
hideアニメーション | uu.fx.hide(), uu().hide() | $().hide() |
fadeアニメーション | uu.fx.fade(), uu().fade() | $().fadeIn(), $().fadeOut() |
puffアニメーション | uu.fx.puff(), uu().puff() | なし |
flareアニメーション | uu.fx.flare(), uu().flare() | なし |
shrinkアニメーション | uu.fx.shrink(), uu().shrink() | なし |
movein(画面外から登場)アニメーション | uu.fx.movein(), uu().movein() | なし |
moveout(画面外へ消える)アニメーション | uu.fx.moveout(), uu().moveout() | なし |
highlightアニメーション | uu.fx.highlight(), uu().highlight() | なし |
slideアニメーション | uu.fx.slide(), uu().slide() | $().slideDown(), $().slideUp() |
idで要素を検索 | uu.id("id"), uu.ids("id1,id2"), uu("#id") | $("#id") |
tagで要素を検索 | uu.tag("tag"), uu("tag") | $("tag") |
classNameで要素を検索 | uu.klass("class"), uu(".class") | $(".class") |
CSSセレクタで要素を検索 | uu.query("div>p"), uu("div>p") | $("div>p") |
CSSセレクタ式のパース方法 | 前から検索 | 後ろから検索 |
CSSセレクタ式のパースとキャッシュ | キャッシュし再利用(Tokenizer + Selector) | 毎回パース |
CSSセレクタLv3への準拠 | 93〜95%のテストをパス | 60〜70%のテストをパス |
CSSセレクタにマッチする要素を検索 | uu.match("div>p") | なし |
classNameへのアクセス | uu.klass(node, "class") (+classと等価) uu.klass(node, "+class") uu.klass(node, "-class") uu.klass(node, "!class") uu.klass.has(node, "class"), uu().klass("class") (+classと等価) uu().klass("+class") uu().klass("-class") uu().klass("!class") |
$().addClass() $().removeClass() $().toggleClass() |
OOP - クラスの定義 | uu.Class("Class") | なし |
OOP - クラスの継承(最大1段) (継承よりも移譲を使ってほしいので段数を制限) |
uu.Class("Class<Super") uu.Class("Class:Super") |
なし |
OOP - 親メソッドの呼び出し | superMethod() | なし |
OOP - シングルトンクラス | uu.Class.singleton("Class") | なし |
メッセージング | uu.msg.post(), uu.msg.send() | なし |
クラス間メッセージングのサポート | あり | なし |
イベントサポート | uu.event(), uu.event.unbind(), uu.bind(), uu.unbind() uu.event.attach(), uu.event.detach() |
$().bind(), $().unbind() |
イベントデリバリー先 | 関数 または クラスインスタンス | 関数のみ, $.proxy() でオブジェクトにデリバリー可能に |
イベントショートカット | uu.click(), uu.mousedown(), ... | $().click(), $().mousedown(), ... |
イベントハンドリングポリシー | Eventに便利なプロパティを追加 IEで遅くならないように 速度 >> 互換性で最適化 |
擬似Eventオブジェクトでラップ IEで遅くなるが 互換性 >> 速度で最適化 |
イベントオブジェクトのクロスブラウズ化 | あり (環境を見て不足している値や便利なプロパテイをEventに追加する) event.node, event.code, event.at, event.currentTarget |
あり (Eventの内容をコピーし、DOMLv2互換に仕立てた擬似Eventオブジェクトを毎回生成) |
コンテキストメニューイベントのサポート | あり | なし |
キーイベントのサポート | uu.event.key() | event.which |
Event.offsetX/Yのクロスブラウザ化 | uu.event.edge() | なし |
マウスイベントのサポート | event.mouse, event.pageX, event.pageY | event.which, event.pageX, event.pageY |
マウスホイールイベントのサポート | event.wheel | なし |
タッチイベントのサポート | event.touch | なし |
ジェスチャーイベントのサポート | event.gesture | なし |
イベント名前空間のサポート | "MyNameSpace.type" | "type.MyNameSpace" |
キャプチャーフェーズのサポート | あり "click+,mousedown+" | なし |
IEでキャプチャーフェーズのサポート | 一部あり "mousemove+" | なし |
リサイズイベントのサポート | uu.event.resize(), uu.event.unresize() | あり |
リサイズイベントの無限ループ対策 | あり | なし |
独自イベントの発火と待機 | あり | あり |
hoverイベントのサポート | uu.event.hover(), uu.event.unhover() | $().hover() |
cyclicイベントのサポート | uu.event.cyclic(), uu.event.uncyclic() | $().one(), $().toggle() |
非同期に発生する複数の事象/イベントを待ち合わせ | uu.junction | なし |
Liveイベントのサポート | uu.live(), uu.unlive() | $().live(), $().die() |
Nodeビルダー | uu.div(uu.a()) | $("<div/>").append($("<a/>")) |
Nodeビルダーで属性値の設定 | uu.div("class,A", "color,red") | $("<div/>", { "class": "A", css: { color: "red" }}) |
Nodeビルダーでイベントの設定 | uu.click(uu.div(), callback) | $("<div/>", { click: callback }) |
Nodeの追加 | uu.add(Node), uu.body(Node), uu.head(Node), uu.node.add(Node, context, position) |
$().add(), $().append(), $().appendTo() |
兄弟ノードの列挙 | uu.node.bros(Node) | $().siblings() |
文字列からNodeを作成 | uu("<br />"), uu.node.bulk("<br />") この場合は uu.br() でも同じ結果に |
$("<br />") |
NodeパスをCSSセレクタ文字列で取得 | uu.node.path(Node) | なし |
NodeArrayをドキュメントオーダーでソート | uu.node.sort(NodeArray) | $.unique() |
NodeArrayの重複Nodeを検出 | uu.node.sort(NodeArray) | なし |
Nodeの入替 | uu.node.swap() | $().replaceWith() など |
Nodeのラップ | uu.div(uu.div(Node)), uu.node.wrap() | $().wrap() など |
子Nodeの削除 | uu.node.clear() | $().empty() |
Nodeのクローン | uu.node.clone() | $().clone() |
クローン時に属性,Data,イベントもクローン | する | する |
DOMツリーから要素を切り離す | uu.node.remove() | $().remove() |
DOMツリーから再帰的に空要素やコメントノードを除去する | uu.node.normalize() | なし |
NodeのユニークなID(NodeID)を取得する | uu.nodeid() | $.data(Node) |
NodeIDからNodeを取得する | uu.nodeid() | なし |
NodeIDの削除 | uu.nodeid.remove() | なし |
Textノードの生成 | uu.text("hello") | なし |
フォーマットされたTextノードの生成 | uu.text("@ @", arg1, arg2) | なし |
テキストの設定と取得 | uu.text(Node. value) | $().text() |
フォーム要素の値の取得と設定 | uu.value(Node, value) | $().val() |
JSONエンコード | uu.json() | なし |
JSONデコード | uu.json.decode() | $.parseJSON() |
拡張JSONエンコード | uu.json() | なし |
ブラウザ依存識別子の正規化 | uu.fix("float") → cssFloat | なし |
文字列から両端(内部)の空白文字を除去 | String#trim(), uu.trim() | $.trim() |
文字列からタグを除去 " <h1>A</h1> B <p>C</p> "→"A B C" |
uu.trim.tag() | なし |
CSS Functionの除去 url("http://...") を http://... に |
uu.trim.func() | なし |
"hoge" 'hoge' を hoge に | uu.trim.quote() | なし |
フォーマット文字列の作成 | uu.f("@ @", 1, 2), uu.foramt() | なし |
高度なフォーマット文字列の作成 | uu.sprintf("%d", 1) | なし |
HTMLエンティティエンコード | uu.entity() | なし |
HTMLエンティティデコード | uu.entity.decode() | なし |
Base64エンコード | uu.base64() | なし |
Base64デコード | uu.base64.decode() | なし |
UTF-8エンコード | uu.utf8() | なし |
UTF-8デコード | uu.utf8.decode() | なし |
MD5エンコード | uu.md5() | なし |
SHA-1エンコード | uu.sha1() | なし |
日付文字列と日時のハンドリング | uu.date() | なし |
GUID(ユニークな連続した数値)の生成 | uu.number() | なし |
最小値/最大値で値を丸める | uu.number.range() | なし |
数値/数値文字列(相対値)の展開 | uu.number.expand(10, "*1.5") → 15 | なし |
利用可能な機能(Features)に関する情報の提供 | uu.ready | jQuery.support |
機能利用可能タイミングでの通知 | uu.ready() | $(function()) |
〃通知範囲 | DOMReady,WindowReady,CanvasReady, StorageReady,AudioReady,SVGReady,ユーザ独自機能の初期化待ち |
DOMContentLoaded |
色と色辞書 | uu.color() | なし |
色フォーマットの相互変換とアクセス性 W3CNamedColor ⇔ #FFF ⇔ num ⇔ rgba ⇔ hsla |
uu.color().r, g, b, a, hex, num, argb, hsla() | なし |
グレイ | uu.color().gray() | なし |
セピア | uu.color().sepia() | なし |
補色 | uu.color().comple() | なし |
HSLA空間でカラーアレンジ Hue, Saturation, Lightness |
uu.color().arrange() | なし |
ユーザ独自カラーの追加 | uu.color.add() | なし |
ファミコンカラー | あり (misc/famicom.js) | なし |
CUD Named Color (カラーユニバーサルデザイン カラーセット) |
あり (misc/cud.js) | なし |
ランダムカラーの取得 | uu.color.random() | なし |
画像の非同期読み込みと読み込み完了のハンドリング | uu.image() | なし |
画像の本来の大きさを取得 | uu.image.size() | なし |
CSSフォント文字列のパース | uu.font() | なし |
利用可能なフォントリストの取得 | uu.font.list() | なし |
レンダリングに利用できるフォントか判別 | uu.font.detect() | なし |
レンダリング時の文字列の大きさを取得 | uu.font.metric() | なし |
URLのパースとビルド | uu.url() | なし |
絶対URLの取得 | uu.url.abs() | なし |
ディレクトリパスとファイルパスの分離 | uu.url.dir(), uu.url.split() | なし |
QueryStringのパースとビルド | uu.qs() | なし |
フォームのシリアライズ | uu.form.serialize() | $().serialize(), $().serializeArray() |
デバッグ/ロギング機能 | uu.log(), uu.puff(), uu.glow() | なし |
ASSERT | uu.ng() | なし |
グリッドパターン(ハッチ)の描画 | uu.hatch() | なし |
UNIT TEST | uu.ok(), uu.ng() | なし(Qunit) |
SVGのハンドリング (<svg>/Flash/Silverlight/VML) |
uu.svg.svg(), uu.svg.g(), ... (開発中) | なし |
Canvasのハンドリング (<canvas>/Flash/Silverlight/VML) |
uu.canvas() | なし |
Audioのハンドリング (<audio>/Flash) |
uu.audio(), uu.Class.Audio() | なし |
Flashの埋め込み | uu.flash() | なし |
Cookieのハンドリング | uu.cookie(), uu.cookie.save() | なし |
Storageのハンドリング (window.localStorage/Flash SharedObject/IE UserData/Cookie/OnMemory) |
uu.storage() | なし |
UI | uu.ui() (開発中) | なし (jQuery UI) |
ドラッグ & ドロップのサポート | あり (misc/drag.js など) | なし (jQuery UI) |
タッチドラッグ & ピンチのサポート | あり (misc/drag.js など) | なし |
HTML5 Forms互換コントロール | <input type="range"> (他は開発中) | なし |
機能制限の少ない透過pngサポート | uuAltCSS.js | なし |
IE6, IE7 のレンダリング改善(Acid2スコアの向上) | uuAltCSS.js | なし |
CSS3 互換機能 | uuAltCSS.js | なし |
MultipleBG, BorderRadius, TextShadow, BoxShadow, Reflection, Gradation ... | uuAltCSS.js | なし |
プラグイン
uupaa.js には jQuery のプラグインを動かすためのクロスプラグインが存在します。
http://d.hatena.ne.jp/uupaa/20091129/1259491129
uupaa.js で Hello World
このような構造をもつ HTML は…
<html><head> <style> li.first { color: lime } li.next { color: red } </style> </head><body> <div> <ul> <li class="first">Hello</li> <li class="next">World</li> </ul> </div> </body></html>
(↓)これで作れます…
<script src="src/uupaa.js"></script> <script> uu.ready(function(uu) { // Create User StyleSheet uu.ss().add({ "li.first": "color: lime", "li.next": "color: red" }); // use NodeBuilder uu.body( uu.div( uu.ul( uu.li("class,first", "Hello"), uu.li("class,next", "World")))); }); </script>
また、uu.snippet() を使っても(↓)やれますし…
<script src="src/uupaa.js"></script> <script> uu.ready(function(uu) { // use snippet uu.body(uu.snippet("demo")); }); </script> <script id="demo" type="text/html"> return <> <style> li.first { color: lime } li.next { color: red } </style> <div> <ul> <li class="first">Hello</li> <li class="next">World</li> </ul> </div> </> </script>
これ(↓)でも同じ結果になります。
uu.ready(function() { // use uu.node.bulk + uu.node.add uu.add('<style>li.first{color:lime} li.next{color:red}</style>' + '<div><ul><li class="first">Hello</li><li class="next">World</li></ul></div>'); });
jQuery → uupaa.js
jQueryのトップページにある、jQueryを特徴付けるコード(↓)を…
$("p.neat").addClass("ohmy").show("slow");
uupaa.js ナイズ(↓)すると…
uu("p.neat").klass("ohmy").show(2000); // klass("+ohmy") でも一緒です
または、これ(↓)でも良いですが…
uu.each(uu.query("p.neat"), function(node) { uu.fx.show(uu.klass(node, "ohmy"), 2000); });
モバイルデバイス的にはこう(↓)書くのがベストです。
var ary = uu.query("p.neat"), i = 0, iz = ary.length; for (; i < iz; ++i) { uu.fx.show(uu.klass(ary[i], "ohmy"), 2000); }
NodeArray は truly な要素の集合なので、これ(↓)でもいいですね。
var ary = uu.query("p.neat"), i = 0, node; for (; node = ary[i++]; ) { uu.fx.show(uu.klass(node, "ohmy"), 2000); }
uupaa.js で OOP
uu.Class("Programmer", { // プログラマークラス init: function(msg) { // コンストラクタ this.msg = msg; this.living = true; }, msgbox: function(msg, param) {}, // メッセージハンドラ handleEvent: function(evt) {}, // イベントハンドラ eat: function() { uu.puff("くうぜー"); }, sleep: function() {}, cording: function() { uu.puff(this.msg); } }); uu.Class("ZombieProgrammer < Programmer", { // プログラマークラスを継承したゾンビプログラマークラス init: function(msg) { // コンストラクタ this.msg = msg; this.living = false; }, eat: function() { // オーバーライド uu.puff("くわせろー"); }, deadWalk: function() { uu.puff("@ (@)", this.msg, this.living ? "living" : "dead"); } }); // -------------------------- // -------------------------- var zombie = uu("ZombieProgrammer", "かゆいうま"); // インスタンス化 zombie.deadWalk(); // かゆいうま (dead) zombie.cording(); // かゆいうま zombie.eat(); // くわせろー var programmer = uu("Programmer", "js ヒャッハー"); // インスタンス化 programmer.cording(); // js ヒャッハー uu.click(uu.add(uu.div()), programmer); // programmerクラスのインスタンスにclickイベントをデリバリー uu.msg.post(programmer, "hello", "world"); // programmerクラスのインスタンスにメッセージ("hello")をポスト
デバッグ支援機能
uu.log
uu.log(arg:Mix) や uu.log(format:String, var_args...) は様々な引数を受け取り、JSONで表現できないはずのもの(関数やNode, FakeArrayなど)も、JSON風味の形式に変換し画面に表示します。第一引数がformat文字列なら、uu.format で整形した結果を表示します。
var div = uu.div(); uu.body(div); // body 要素の末尾に div 要素を追加 uu.log(div); // 1. uu.log(uu.env); // 2. uu.log("color=@, date=@", uu.color("skyblue"), uu.date()); // 3.
画面にはこのように表示されます(改行しています)。
1. "body>div:nth-child(2)" 2. {"library":0.8, "ie":false, "ie6":false, "ie7":false, "ie8":false, "ie9":false, "opera":false, "gecko":false, "webkit":true, "chrome":true, "safari":false, "mobile":false, "jit":true, "touch":false, "flash":10.1, "silverlight":4, "render":534.3, "browser":6, "valueOf": { "function": "" }, "iphone":false, "retina":false, "android":false, "os":"windows"} 3. color=rgba(135,206,235,1), date=2010-09-09T02:07:43.01919Z
表示は一定数(デフォルトでは30行)でラウンドアップします。
uu.puff
uu.log は 画面に表示しますが、 uu.puff は alert() で表示します。
uu.glow
uu.glow(node:Node/NodeArray/NodeList/NodeSet/CSSSelectorExpressionString) は、uu.fx.highlight のように、特定のノードの背景色を赤くフラッシュします。デバッガが貧弱な環境やデバッグコンソールしか頼れない環境で、Nodeの位置と大きさを手軽に確認できます。
様々な型を受け取ることができるのも特徴です。
uu.glow(document.body); // <body> をフラッシュ uu.glow(document.links); // <a href="..."> をフラッシュ uu.glow(uu("div,li")); // <div> と <li> をフラッシュ uu.glow("div,li")); // <div> と <li> をフラッシュ
uu.ok
uu.ok は簡易 UNIT TEST 機能です。
uu.ok(title:String) でセパレート用の文字列やコメントを出力します。
uu.ok(title:String, lval:Mix, operator:String, rval:Mix = void, more:String = void) で lval と rval を operator で比較します。operator は大小文字を同一視し空白文字を無視します。
uu.ok() は、溜め込んだ結果を画面に出力し、同時に スコアと経過時間を { ok, ng, ms, total } の Hash で返します。
uu.ok("uu.nth(first)"); // セパレータ uu.ok("{ key: 1, key2: 2 } から先頭のpairを配列['key', 1]で取得する", uu.nth({ key: 1, key2: 2 }), "==", ["key", 1]); uu.ok("[1, 2] から先頭のpairを配列[0, 1]で取得する", uu.nth([1, 2]), "==", [0, 1]); uu.ok("uu.nth(last)"); // セパレータ uu.ok("{ key: 1, key2: 2 } から末尾のpairを配列['key2', 2]で取得する", uu.nth({ key: 1, key2: 2 }, -1), "==", ["key2", 2]); uu.ok("[1, 2] から末尾のpairを配列[1, 2]で取得する", uu.nth([1, 2], -1), "==", [1, 2]); var score = uu.ok(); // 結果を画面に出力 uu.puff(score); // スコアを alert で表示
operator 一覧
operator | テスト内容 | |
== or is | uu.like(lval, rval) をテスト。lval と rval が似ていれば true | |
!= | !uu.like(lval, rval) をテスト。lval と rval が似ていなければ true | |
> | lval > rval をテスト | |
< | lval < rval をテスト | |
>= | lval >= rval をテスト | |
<= | lval <= rval をテスト | |
&& | lval && rval をテスト | |
|| | lval || rval をテスト | |
has | lval が文字列なら lval と rval を文字列として比較。lval が文字列以外なら uu.has(lval, rval) でテスト | |
isNaN | iNaN(lval) をテスト | |
is true | !!lval をテスト | |
is false | !lval をテスト | |
is error | lval() がエラーである(例外を発生させる)ことをテスト(発生させた例外はバブルアップしないように try 〜 catch で補足) | |
isInfinity | !isFinite(lval) をテスト | |
instanceof | lval instanceof rval をテスト | |
is Boolean | uu.type(lval) === uu.type.BOOLEAN をテスト | |
is Number | uu.type(lval) === uu.type.NUMBER をテスト | |
is String | uu.type(lval) === uu.type.STRING をテスト | |
is Function | uu.type(lval) === uu.type.FUNCTION をテスト | |
is Array | uu.type(lval) === uu.type.ARRAY をテスト | |
is Date | uu.type(lval) === uu.type.DATE をテスト | |
is RegExp | uu.type(lval) === uu.type.REGEXP をテスト | |
is undefined | uu.type(lval) === uu.type.UNDEFINED をテスト | |
is null | uu.type(lval) === uu.type.NULL をテスト | |
is Hash | uu.type(lval) === uu.type.HASH をテスト | |
is FakeArray | uu.type(lval) === uu.type.FAKEARRAY をテスト | |
is ユーザ独自型 | uu.type.* にユーザ独自型を定義すると独自型の判別も可能 |
// カンマ(,)を含む文字列型 を uu.type.COMMAJOINTSTRING として定義 uu.type.COMMAJOINTSTRING = function(lval, operator) { return lval.indexOf(",") >= 0; }; // ユーザ独自型 COMMAJOINTSTRING の判別 uu.ok("is Comma joint String?", "has,comma", "is CommaJointString"); // true
uu.ng
uu.ng は C/C++ の assert() 相当の機能です。
uu.ng(title:String, lval:Mix, operator:String, rval:Mix = void) は、uu.ok と同様にテストを行い、結果が false なら例外を発生させます。
uu.ng("bad idea", false, "is true"); // throw new Error("bad idea: false is true");