minified.js - 脇の甘い日常

jQueryより軽量にDOM操作できるいうことでminifiedというライブラリを使っている。
サイズはjQuery mobileの196kに対してminifiedはわずか22kでかなり小さい。

基本的な使い方は「How to... Common Minified Tasks」でまとめられているが、

備忘録的によく使うものをまとめてみた。

クラスの追加（頭に+をつける）

$("#test-div").set("+active");

クラスの削除（頭に-をつける）

$("#test-div").set("-active");

クラスがセットされているかチェック

console.log($("#test-div").is(".active"));

クラス設定のトグル（実行するたびに設定、削除を繰り返す）

$("#test-div").set("active");
$("#test-div").set("active");

内部HTMLの操作

$("#test-div").set("innerHTML", "HELLO MINIFED");
console.log($("#test-div").get("innerHTML"));

CSSプロパティの設定/取得（頭に$をつける）

$("#test-div").set("$background-color", "red");
console.log($("#test-div").get("$background-color"));

属性の設定/取得（頭に@をつける）

$("#test-link").set("@href", "http://www.google.com");
console.log("href: " + $("#test-link").get("@href"));

子要素を挿入

$("#test-container").add(HTML("<p id='p1'>P1</p>"));
$("#test-container").add(HTML("<p id='p2'>P2</p>"));
console.log("innerHTML: " + $("#test-container").get("innerHTML"));

親要素を取得

console.log("parent of p2:" + $("#p2").up().get("id"));

子要素をクリア

$("#test-clear").fill();

以下はデモ。

注意点としてminified版を使う場合にはdefineが定義されてない場合エラーになるので、以下の定義を行う。

if (/^u/.test(typeof define)) {
(function(def){
var require = this['require'] = function(name) { return def[name]; };
this['define'] = function(name, f) { def[name] = def[name] || f(require); };
})({});
}

お試しコード

<!DOCTYPE html>
<html lang="ja">
<head>
<script type="text/javascript" src="minifiedjs.min.js"></script>
<script type="text/javascript">

var MINI = require('minified');
var _=MINI._, $=MINI.$, $$=MINI.$$;
var EE=MINI.EE, HTML=MINI.HTML;

window.onload = function(){

$("#test-div").set("+active");
console.log($("#test-div").is(".active"));

$("#test-div").set("-active");
console.log($("#test-div").is(".active"));

$("#test-div").set("active");
console.log($("#test-div").is(".active"));

$("#test-div").set("active");
console.log($("#test-div").is(".active"));

$("#test-div").set("innerHTML", "HELLO MINIFED");
console.log($("#test-div").get("innerHTML"));

$("#test-div").set("$background-color", "red");
console.log("bk-color: " + $("#test-div").get("$background-color"));

$("#test-link").set("@href", "http://www.google.com");
console.log("href: " + $("#test-link").get("@href"));

$("#test-input").set("@value", "INPUT DATA");
console.log("input value: " + $("#test-input").get("@value"));

$("#test-container").add(HTML("<p id='p1'>P1</p>"));
$("#test-container").add(HTML("<p id='p2'>P2</p>"));
console.log("innerHTML: " + $("#test-container").get("innerHTML"));
console.log("parent of p2:" + $("#p2").up().get("id"));

$("#test-clear").fill();

}
</script>
</head>
<body>
<div id="test-div">XXX</div><br>
<a href="#" id="test-link">Go google</a><br><br>
<input id="test-input" value="empty"><br>
<div id="test-container"></div><br>
<div id="test-clear">
<p>clear1</p>
<p>clear2</p>
</div>
</body>
</html>