一個最簡單的類JQuery封裝

有時候在寫一些練習或者小的專案時，我們可能只想用用jquery的$選擇器，好用的hide、show等等一些基礎的API，那麼我們又不想因為這麼幾個API來引入一個jquery的js檔案，那麼自己封裝一個最好不過了。

(function (document) {
    function DomObject(dom) {
        this.dom = dom;
    }

    function $(selector) {
        return new DomObject(document.querySelector(selector));
    }

    DomObject.prototype.get = function () {
        return this.dom;
    }

    DomObject.prototype.on = function(eventName, eventHandler) {
        this.get().addEventListener(eventName, eventHandler);
        return this;
    }

    DomObject.prototype.css = function(styleKey, styleValue) {
        this.get().style[styleKey] = styleValue;
        return this;
    };
    DomObject.prototype.hide = function() {
        this.get().style.display = 'none';
        return this;
    };
    DomObject.prototype.show = function() {
        this.get().style.display = 'block';
        return this;
    }

    $('.main #btn-hide').on('click', function() {
        $('h2').hide();
    });
    $('.container #btn-show').on('click', function() {
        $('h2').show().css('color','red');
    });
})(document);

首先建立一個建構函式，傳入一個dom物件作為引數，在建構函式的原型物件上就可以繫結各種事件，比如on，show甚至是jquery中沒有的css等等，如果想實現鏈式呼叫，即返回this物件即可。利用querySelector來封裝$，上面的示例只是簡單的封裝，並沒有實現相容性的寫法，比如on對於IE的處理。事件偵聽可以更加豐富：通用的事件偵聽器只是對於jquery的實現原理進行的簡單的模擬。

簡單的封裝一下，就可以愉快的寫東西啦。