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

最軽量jQuery互換ライブラリ、Minified.jsを使ってみた

Webサービスを作る上で必ずと言っていいほどお世話になっていたjQuery
今回、スマートフォン向けサ−ビスを作る上で、jQueryはちょっと重たいかなってことで、Minified.jsというライブラリを使ってみた。

Minified.jsは今年の7月にβ版がリリースされたばかりのjQuery互換のライブラリ。
jQuery互換の軽量ライブラリは他にもZepto.jsもあるが、Minified.jsは最軽量で容量は4KB。(jQuery 2.0.3は29KB、Zepto.js 1.0は9.7KB。いずれもgzip圧縮後。)
しかも、Zepto.jsよりもバグが少ない(らしい)。

使い方は、公式サイトからダウンロードして読み込み、

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

って書いたらあとはjQueryのように

$(function() {

});

の中に書いていく。

使っていて気づいたのが、

  • jQueryのメソッドチェーンが使えない
    • もちろん完全にjQuery互換でないので使えないメソッドがある
  • CSS3のセレクタ(nth-childとか)が使えない

たぶん。

addClass()、removeClass()はそれぞれ、

.set('+hoge');
.set('-hoge');

って書くとか、jQueryから乗り換えると修正する箇所も多いと思う。

1番困ったのがDOMを追加するところで、

.after("<div class='hoge'>test</div>");

みたいなことができなくて、

.addAfter(EE('div', {'@class': 'hoge'}));

のような変わった記法を使わないといけない。
たぶん。(他の方法があったら教えて下さい!)

だいたいこんな感じ。

jQueryに依存してるライブラリ、フレームワークも多いのでそこらへんMinified.jsに変更して動くのかなとか思う。(たぶん多くの場合無理だと思う。)

スマホ向けサービスでパフォーマンスを気にする場合で、jQueryっぽい書き方がしたい場合は導入するのはアリなのかなと思う。

日本語ドキュメントほしい。。