一個最簡單的類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的實現原理進行的簡單的模擬。

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