読者です 読者をやめる 読者になる 読者になる

latest log

酩酊状態で書いたエンジニアポエムです。酩酊状態で読んでください。

mofmof.js の上に uupaa.js をどすーん

uupaa.js (uu) は、mofmof.js (mm) をベースに再構築している最中です。
新しい uupaa.js は IE6, IE7 非対応になります、古いIEを切り捨てることでライブラリがシンプルになり、より効率的なコードになっています。

今日は、最近実装した機能のご紹介。

uu.dump(node tree), mm.dump(Object), Array#dump(), uu(node, uu.p())

node tree をダンプできたら便利なので uu.dump() を作りました。

uu.dump(html)

""<html>": {
    "<head>": {
        "<meta>": {
            "charset": "UTF-8"
        },
        "<title>": {

        },
        "<meta>": {
            "name": "viewport",
            "content": "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
        },
        "<script>": {
            "src": "mm.js"
        },
        "<script>": {
            "src": "mm.env.js"
        },
        "<script>": {
            "src": "uu.js"
        },
        "<script>": {
            "src": "uu.css.js"
        }
    },
    "<body>": {
        "title": "hoge",
        "style": "background:url(grid.png)",
        "<script>": {
            "text": "/* uu.main(function() { if ..."
        },
        "<p>": {
            "query": "body>p#a",
            "id": "a"
        }
    }
}"

長いテキストノードは "text": "/* uu.main(function() { if ..." と省略表示します。
場所を特定できるように "query": "body>p#a" といったパス情報も付与しています。
query の値をそのまま document.querySelector("body>p#a") とすることでノードにアクセスできます。

"body>p#a" の属性にアクセスするには、 uu("body>p#a").attr() または uu.attr("body>p#a") とします。

mm.dump(uu.attr("body>p#a"))
{
    "id": "a"
}

オブジェクトツリーをダンプできると便利なので、 mm.dump() を作りました。

mm.dump(mm)

"mm_factory {
    "MessageGroup": MessageGroup {},
    "allow": mm_allow {},
    "arg": mm_arg {},
    "cast": mm_cast {
        "attr": mm_cast_attr {},
        "list": mm_cast_list {},
        "string": mm_cast_dateString {},
        "style": mm_cast_style {}
    },
    "clear": mm_clear {},
    "copy": mm_copy {},
    "count": mm_count {},
    "def": defineClass {},
    "deny": mm_deny {},
    "dump": mm_dump {},
    "each": mm_each {},
    "env": {
    },
    "every": mm_every {},
    "has": mm_has {},
    "iog": mm_iog {
        "reset": mm_iog_reset {}
    },
    "isArray": isArray {},
    "isBool": anonymous {},
    "isBoolean": anonymous {},
    "isDate": anonymous {},
    "isEnum": anonymous {},
    "isFn": anonymous {},
    "isFunction": anonymous {},
    "isHash": anonymous {},
    "isInstance": anonymous {},
    "isInt": anonymous {},
    "isInteger": anonymous {},
    "isList": anonymous {},
    "isNode": anonymous {},
    "isNumber": anonymous {},
    "isObject": anonymous {},
    "isPrimitive": anonymous {},
    "isRegExp": anonymous {},
    "isString": anonymous {},
    "keys": keys {},
    "like": mm_like {},
    "log": mm_log {
        "error": mm_log_error {},
        "local": true,
        "remote": false,
        "url": "",
        "warn": mm_log_warn {}
    },
    "map": mm_map {},
    "mix": mm_mix {},
    "mmm": {
        "clear": anonymous {},
        "copy": anonymous {},
        "count": anonymous {},
        "dump": anonymous {},
        "each": anonymous {},
        "every": anonymous {},
        "has": anonymous {},
        "keys": anonymous {},
        "like": anonymous {},
        "map": anonymous {},
        "mix": anonymous {},
        "pack": anonymous {},
        "some": anonymous {},
        "values": anonymous {}
    },
    "msgg": {},
    "nop": mm_nop {},
    "pack": mm_pack {},
    "pair": mm_pair {},
    "pao": mm_pao {},
    "say": mm_say {},
    "some": mm_some {},
    "strictMode": false,
    "type": mm_type {
        "complex": mm_type_complex {},
        "of": mm_type_of {}
    },
    "uid": mm_uid {},
    "values": mm_values {},
    "wiz": mm_wiz {}
}"

数値の配列を Hex dump できると便利なので Array#dump も作りました

0..to(100).dump()

"[ 
0x0000, 0x0001, 0x0002, 0x0003, 0x0004, 0x0005, 0x0006, 0x0007, 0x0008, 0x0009, 0x000a, 0x000b, 0x000c, 0x000d, 0x000e, 0x000f, 0x0010, 0x0011, 0x0012, 0x0013, 0x0014, 0x0015, 0x0016, 0x0017, 0x0018, 0x0019, 0x001a, 0x001b, 0x001c, 0x001d, 0x001e, 0x001f, 0x0020, 0x0021, 0x0022, 0x0023, 0x0024, 0x0025, 0x0026, 0x0027, 0x0028, 0x0029, 0x002a, 0x002b, 0x002c, 0x002d, 0x002e, 0x002f, 0x0030, 0x0031, 0x0032, 0x0033, 0x0034, 0x0035, 0x0036, 0x0037, 0x0038, 0x0039, 0x003a, 0x003b, 0x003c, 0x003d, 0x003e, 0x003f, 0x0040, 0x0041, 0x0042, 0x0043, 0x0044, 0x0045, 0x0046, 0x0047, 0x0048, 0x0049, 0x004a, 0x004b, 0x004c, 0x004d, 0x004e, 0x004f, 0x0050, 0x0051, 0x0052, 0x0053, 0x0054, 0x0055, 0x0056, 0x0057, 0x0058, 0x0059, 0x005a, 0x005b, 0x005c, 0x005d, 0x005e, 0x005f, 0x0060, 0x0061, 0x0062, 0x0063, 0x0064 ]"


ノードを直感的にビルドできると便利なので、uu("#target", uu.div(uu.p("id:a"), "::Hello world", "color:red")) とできるようにしました

uu("#target",
    uu.div(
        uu.p("id:a;data-hoge:hoge", "::Hello world", "color:@@", "gold")));

    とすると、以下のノードツリーが生成されます。

<??? id="target">
  <div>
    <p id="a" data-hoge="hoge" style="color:gold">Hello world</p>
  </div>
</???>

uu.p() や uu.div() は、文字列中に @@ を見つけると後続の値をそこに埋め込みます。"color:@@" と "gold" は "color:gold" になります。
また、先頭が :: で始まる文字列はテキストノードになります。


"id:a;data-hoge:hoge" の部分は、{ id: "a", "data-hoge": "hoge" } としても同じ結果になります。

uu("#target",
    uu.div(
        uu.p({ id: "a", "data-hoge": "hoge" }, { color: "gold" }, uu.text("Hello world"))));


イベントを設定したい場合は、途中で clickメソッドを使うか

uu.body(
    uu.div(
        uu.p("::click me").click(fn)));


<body>
  <div>
    <p>click me</p> + addEventListener("click", fn)
  </div>
</body>


あとから、click メソッドや on メソッドでイベントを引っ掛ける事ができます

var p;

uu.body(
    uu.div(
        p = uu.p()));

p.click(fn); // または p.on("click", fn);


HTMLElement#top で、body の先頭に div ノードを挿入し

document.body.top(
    uu.div(
        uu.p()));

HTMLElement#add で、body の最後に div ノードを追加します

document.body.add(
    uu.div("class:b",
        uu.p("id:a", "color:red")));

以下のコードとおなじです

var p = document.createElement("p"),
    div = document.createElement("div"), 

p.id = "a";
p.style.color = "red";
div.className = "b";
div.appendChild(p);
document.body.appendChild(div);

HTMLElement#add の代わりに、 HTMLElement#top を使うと、先頭にノードを挿入する事ができます。

document.body.top(
    uu.div(
        uu.p()));

HTMLElement#cut で、親ノードとの接続をカットします

var div;

document.body.add(
    div = uu.div(
        uu.p()));


div.cut(); // document.body から div を切り離します( div.parentNode が null になる)

HTMLElement#cut の部分は、以下のコードとおなじです

if (div.parentNode) {
  div.parentNode.removeChild(div);
}

(ε・◇・)з IE6 + IE7 のシェアが 2% しかないので、いつまでも古いブラウザをサポートしてても仕方ないのさ
(ε・◇・)っ http://gs.statcounter.com/#browser_version_partially_combined-ww-weekly-201216-201225
(ε・◇・)з おしまい