2

私はこのコードを持っています:

(function() {

var base = function (elem) {

    var elements = document.querySelectorAll(elem);

    return {
        elems: elements[0],
        on: function (evt, func) {
            if(this.elems) this.elems.addEventListener(evt, func, false);
            return this;
        }
    };
};


window.base = window._ = base;

})();

そして、私はこれを行うことができます:

_('form').on('submit', uploadImage);

しかし、もしそうなら：

_('form').appendChild(input);

エラーが発生します：Object #<Object> has no method 'appendChild'

_('element')では、どうすればネイティブ関数を使用して、オブジェクトのメソッドで動作させることができますか?

4

2 に答える 2

1

要素.appendChildで を呼び出す関数をオブジェクトに与えます。.appendChild

(function() {

    var base = function (elem) {

        var elements = document.querySelectorAll(elem);

        return {
            elems: elements[0],
            on: function (evt, func) {
                if(this.elems) this.elems.addEventListener(evt, func, false);
                return this;
            },
            appendChild: function(el) {
                this.elems.appendChild(el);
                return this;
        };
    };


    window.base = window._ = base;

})();

サイドノート。から返された最初の要素のみに関心がある場合はquerySelectorAll、代わりに を使用できますquerySelector。

return {
    elems: document.querySelector(elem),
    on: function (evt, func) {
      // ...
于 2012-06-13T17:24:57.260 に答える
0

プロトタイプでこれを行うことができると思います（推奨されません）：

// Prototype.js style
var Base = function (selector) {
    return document.querySelector(selector);
};

Element.prototype.on = function (e, f) {
    this.addEventListener(e, f, false);
    return this;
};

elp = Base('#result');
elp.on('click', function () {
    console.log(this);
});

elp instanceof Element; // true
elp.innerHTML; // text

または、オブジェクト ラッパーを使用する場合:

// jQuery style
var Base = function (selector) {
    this[0] = document.querySelector(selector);
    return this;
};

Base.prototype.on = function (e, f) {
    this[0].addEventListener(e, f, false);
    return this;
};

elj = new Base('#result'); // internal new called in jQuery
elj.on('click', function () {
    console.log(this);
});

elj instanceof Base; // true
elj[0] instanceof Element; //true
elj[0].innerHTML; // text
于 2012-06-13T19:57:11.830 に答える