0

私は次のように動作する JavaScript ライブラリに取り組んでいます: tex("element").print("hi"). コードは次のとおりです。

(function (window) {
        var regex = {
            Id : /^[#]\w+$/,
            Class : /^[.]\w+$/,     
            Tag : /^\w+$/,
            validSelector : /^([#]\w+|[.]\w+|\w+)$/
        },  
        tex = function(selector){
            //only some of the functions need to select an element
            //EX:
            // style: tex(selector).style(style);
            //one that would not need a selector is the random number function:
            // tex().random(from,to);
            if (selector){
                if (typeof selector === 'string'){
                    var valid = regex.validSelector.test(selector);
                    if( valid ){
                        if(regex.Id.test(selector)){ 
                            this = document.getElementById(selector);
                        }
                        if(regex.Class.test(selector)){ 
                            this = document.getElementByClass(selector);
                        }
                        if(regex.Tag.test(selector)){ 
                            this = document.getElementByTagName(selector);
                        }
                    }
                }else if(typeof selector === 'object'){
                    this = selector;
                }
                //this = document.querySelector(selector);
                // I could make a selector engine byt I only need basic css selectors.
            }
        };
        tex.prototype = {
            dit : function(){
                this.innerHTML = 'Hi?!?!?!'
            }
        };
        window.tex = tex;
})(window);

コードを実行しようとすると、「引数の左側は参照ではありません」というエラーが表示されます。this = document.getElementById(selector);

私のコードの何が問題なのか誰か知っていますか?

4

1 に答える 1

4

設定できないからですthis。

あなたが求めていることをするには、これを返すだけです。

プロトタイプを使わずに

var foo = function( selector ) {

    this.print = function () {
        console.group("in print");
        console.log(this.elements[0].innerHTML);   
        console.groupEnd("in print");
        return this;
    }

    this.printAll = function () {
        console.group("in printAll");
        for (var i=0; i<this.elements.length; i++) {
             console.log(this.elements[i].innerHTML);
        }
        console.groupEnd("in printAll");
        return this;
    }

    this.elements = document.querySelectorAll( selector );
    return this;

}

console.group("id");
foo("#foofoo").print();
console.groupEnd("id");
console.group("class");
foo(".bar").printAll().print();
console.groupEnd("class");

JSFiddle

プロトタイプによる基本的な例

(function () {

    var basic = function (selector) {
        this.elements = document.querySelectorAll(selector);
        return this;
    }

    basic.prototype.print = function () {
        console.group("in print");
        console.log(this.elements[0].innerHTML);
        console.groupEnd("in print");
        return this;
    }

    basic.prototype.printAll = function () {
        console.group("in printAll");
        for (var i = 0; i < this.elements.length; i++) {
            console.log(this.elements[i].innerHTML);
        }
        console.groupEnd("in printAll");
        return this;
    }


    var foo = function (selector) {
        return new basic(selector);
    }

    window.foo = foo;

})();

console.group("id");
foo("#foofoo").print();
console.groupEnd("id");
console.group("class");
foo(".bar").printAll().print();
console.groupEnd("class");

JSFiddle

于 2013-10-11T12:17:10.730 に答える