连续的js方法

Question

我有一个 JS 函数，它根据参数选择一些元素，

function getElement() {
    var scope = document;

    this.by = function(data) {
        for (key in data) {
            if (key == 'id')    scope = scope.getElementById(data.id);
            if (key == 'tag')   scope = scope.getElementsByTagName(data.tag);
        }       
        return scope;
    }
}

function getEl(data) { return new getElement().by(data); }

这被称为 getEl(id : 'divId', tag : 'span') ，它将选择 div 'divId' 中的所有范围。

现在，我想创建另一个函数（在函数 Element 内），称为 style ，它将更改所有先前选择的跨度上的 CSS。

像

function getElement() {
    var scope = document;

    this.by = function(data) {
        for (key in data) {
            if (key == 'id')    scope = scope.getElementById(data.id);
            if (key == 'tag')   scope = scope.getElementsByTagName(data.tag);
        }       
        return scope;
    }

    this.style = function(data) {
        console.log(data);
    }
}

我希望能够做类似的事情 getEl({id : 'divId', tag : 'span').style({display : 'none'})

似乎不起作用，我收到 getEl({id: "divId", tag: "span"}).style is undefined 错误。

ps：这仅用于学习目的，请勿推荐 jQuery 或其他此类框架！ ：）

亲切的问候！

Answer 1

getEl 返回 scope 变量，它是 DOM 元素的列表，而不是对 getElement 的引用。您需要返回 this 才能执行诸如 new getElement().by(data).style() 之类的操作。

this.by = function(data) {
    for (key in data) {
        if (key == 'id')    scope = scope.getElementById(data.id);
        if (key == 'tag')   scope = scope.getElementsByTagName(data.tag);
    }       
    return this;
}

然后你可以执行getEl({id : 'divId', tag : 'span'}).style({display : 'none'})。

要获取 scope 变量，您可以添加如下内容：

this.elements = function(){
    return scope;
}

getEl({id : 'divId', tag : 'span'}).elements() 将返回DOM 元素列表。

Answer 2

我想通了，感谢 Rocket:)

function getElement() {
    this.scope = document;

    this.get = function() {
        return this.scope;
    }

    this.by = function(data) {
        for (key in data) {
            if (key == 'id')    this.scope = this.scope.getElementById(data.id);
            if (key == 'tag')   this.scope = this.scope.getElementsByTagName(data.tag);

        }
        return this;
    }

    this.style = function(data) {
        console.log(typeof(this.scope));
        for (key in data) {
            if (this.scope.length) {
                for (i = 0; i < this.scope.length; i++) {
                    this.scope[i].style[key] = data[key];
                }
            }
            else {
                this.scope.style[key] = data[key];
            }
        }
        return this;
    }
}
function getEl(data) { return new getElement().by(data); }

它适用于：
getEl({id : "tara_content", tag : "div"}).style({display : "none"});
getEl({id: "tara_content"}).style({display: "none"});
getEl({tag : "div"}).style({display : "none"});

正如 Mathias Bynens 注意到 by() 可以返回一个元素数组或只是一个元素，这就是为什么在 style() 中我要检查 this.scope 的长度。 （我找不到任何方法来强制该类型）。

感谢您的帮助！ :)