jQueryを使わないということを考察してみた

最近まで知らなかったのですが、世の中はjQueryをなるたけ使わない様な方向に向かっているみたいです。ということでjQueryの気になる機能の考察をしてみました。

以下参考
https://github.com/oneuijs/You-Dont-Need-jQuery
http://youmightnotneedjquery.com/
http://vanilla-js.com/

jQueryを使用しない例

だいたい参考ページにまとまっているのでここではDOM操作の例だけです。
jQuery

$('#selector');

Native

document.querySelector('#selector');

Nativeも割りと直感的なのでよさ気です。

その差は？

さて気になるのはそのスピードと取得するオブジェクトのサイズ差です。

<span id='selector'>hogehoge</span>

の中身を50000回ずつ取得する操作をした結果です。

スピード

action	time
$('#selector').text()	73ms
document.querySelector('#selector').textContent	21ms

サイズ(かなりアバウト)

action	size
$('#selector')	300654byte
document.querySelector('#selector')	298586byte

若干は軽くなる模様です。とはいえスピードも誤差の範囲内ではあります。
これに加えてjQueryのロード時間もあります（ライブラリを全て一つのファイルにしておけばそんなにロード時間が多くなる気もしないですが）

気になる機能を実装してみる

ということでyou might not use jqueryを読んだだけじゃまだまだjQuery依存から抜け出せない気がしたので紹介されている方法以外で、気になった機能をこの際勉強も兼ねて実装してみました。

jQueryと全く仕様が同じというわけではないですよ。。。そこまで確認してないです。

JSONP

実装してみて長かったので一部抜粋。きちんと検証はしていません。

var jsonp = function(args){
        var loaded  = false;
        var paramStr = paramSerialize(args.data);
        var callbackName = args.callback ? args.callback : 'callback';
        var response = {};
        if(paramStr){
            args.url += '?' + paramStr + '&callback=' + callbackName;
        }
        window[callbackName] = function(){
            response = arguments[0];
        };
        createJS(args.url, function() {
            loaded = true;
            args.onsuccess(response);
            delete window[callbackName];
        }, function() {
            if ( loaded ) { return; }
            loaded = true;
            args.onerror(response);
            delete window[callbackName];
        });
    };

全容はこちら

関数をグローバルに展開したり、javascriptを読んでくるdomを生成したりと気にする事はたんまりある割に自作するメリットはほとんどない。。。
you dont need jquery ではjsonpはライブラリ使えって書いてあるし、結局何かのライブラリ使うのが吉かと思います

Deferred

これはPromiseとしての実装
こちらも長いので一部抜粋。

 Promise.prototype = {
        constructor: Promise,
        then: function(onFulfillment, onRejection){
            var parent = this;
            var state = parent._state;

            console.log();
            if (state === FULFILLED && !onFulfillment || state === REJECTED && !onRejection) {
                return this;
            }

            var child = new Promise();
            var result = parent._result;

            subscribe(parent, child, onFulfillment, onRejection);
            return child;

        },
        resolve: function(object){
            
            var Constructor = this;

            if (object && typeof object === 'object' && object.constructor === Constructor) {
                return object;
            }

            var promise = new Constructor(noop);
            resolve(promise, object);
            return promise;
        }
    };

これも全容はこちら

実装はしてみたけどこれは、https://github.com/stefanpenner/es6-promise
を使うかES2015のNative機能に委ねるべきですね。
参考
https://github.com/stefanpenner/es6-promise

extend

function extend(target, options){
    var copy;
    if(!typeof target !== 'object' && !isFunction(target)){
        target = {};
    }
    for(var name in options){
        target[name] = options[name];
    }
    return target;
}

生産性の問題

やっぱりそのままのJS書くのは生産性が落ちる気がして仕方ないなぁっと思いました。
とは言えjQueryの機能を一部しか使わないのにjQueryの本体を持ってくる必要があるのかって所はよく考えるべきですね。

しかしjsonp的な物だけを使いたい時にわざわざライブラリ探すの面倒ですし、jQueryはコミュニティしっかりしてますし、みんな使っているので開発チームに受け入れられやすいです。

なんだかんだjQueryって選択は悪くないとは思うんですけどね。