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 回答