document.getElementById 是可以链接的方法吗？

Question

如果我有这个模块模式：

var MODULE = (function(window){
    var myPublicStuff = {};

    myPublicStuff.myPublicMethod = function(e){
        return e;
    };
    return myPublicStuff;

})(window);  //edit:  forgot to put I have this

有效：（为清楚起见进行了编辑）

v = document.getElementById('some-element'); //works as expected
MODULE.myPublicMethod(v);  //works.

但这行不通，

MODULE.myPublicMethod().document.getElementById('some-element');

或

document.getElementById('some-element').MODULE.myPublicMethod().

我想如果 jail 中前面的成员返回一个值，你可以将它链接到下一个 link 上？这在这里不起作用，但我不知道为什么。

编辑：感谢您的所有回答。我想要做的就是获取元素并让该方法通过链接 将其打印出来 。就这样。如果我输入 'btnPrint' 我希望它给我 <button type="button" id="btnPrint" class="btn">...</button> 如果我在控制台执行 getElementById，这就是我首先为我的模块使用变量时得到的结果（这是有道理的。）我只想用链式方法做同样的事情。

编辑：为了完整起见，这是 Travis 放在 JSFiddle 上的内容（感谢）：

<button type="button" id="btnPrint" class="btn">...</button>

Element.prototype.myPublicMethod = function(){
 //in the prototype scheme that JavaScript uses,
 //the current instance of the Element is *this*,
 //so returning this will return the current Element
 //that we started with.
 return this;

}

console.log(document.getElementById("btnPrint").myPublicMethod());

我同意。除非绝对必要，否则这看起来很糟糕。

Answer 1

要避免v变量，您需要使用

MODULE.myPublicMethod(document.getElementById('some-element'));

document 是一个全局属性（属于 window 对象），您需要从 myPublicMethod() 返回它才能将其链接起来。鉴于它是恒等函数，你甚至可以做类似

的事情

MODULE.myPublicMethod(document).getElementById('some-element');
MODULE.myPublicMethod(window).document.getElementById('some-‌element');

Answer 2

如果没有传递任何参数，您可以从函数中 return document:

var MODULE = (function(window){
    var myPublicStuff = {};

    myPublicStuff.myPublicMethod = function(e){
        return e || document;
    };
    return myPublicStuff;

})();

var text = MODULE.myPublicMethod().getElementById('element').innerHTML;

console.log(text);

JSBin

Answer 3

Is document.getElementById a method that can be chained?

是的。它 returns 一个元素（如果没有匹配则为未定义）。元素公开了一组通用函数，如果元素是特定类型（例如表单），那么它也可能公开了一组特定函数。

在 https://developer.mozilla.org/en-US/docs/Web/API/Element

阅读有关通用元素类型的更多信息

I want to do this:

v = document.getElementById('some-element'); //works as expected
MODULE.myPublicMethod(v);

在这里，v很简单吧？它只是获取带有 id="some-element" 的元素。好的，从那里你将它传递到 myPublicMethod(v)。当你这样做时，你所做的只是调用一个函数，该函数 returns 与传入的值相同。除此之外，上面显示的代码中没有发生赋值或存储。

你可以在这里做了什么，如果你想利用链接设置，然后从返回值访问 v 元素，如这个：

v = document.getElementById('some-element');
var vId = MODULE.myPublicMethod(v).id;
console.log(vId);// this will log "some-element" to the console

But this does not work,

 MODULE.myPublicMethod().document.getElementById('some-element');

所以上面我解释了你是"calling a function that returns the same value that is passed in"，还记得myPublicMethod里面只有return e;吗？那么这意味着您正在使用 undefined 作为结果，因为使用这行代码没有传递任何内容。换句话说，您上面的代码可以作为 undefined.document.getElementById('some-element') 检查，这显然是有问题的。

if I put in 'btnPrint' I want it to give me <button type="button" id="btnPrint" class="btn">...</button>

例如，您编写的代码将这样完成：

var MODULE = (function(window){
    var myPublicStuff = {};

    myPublicStuff.myPublicMethod = function(e){
        return e;
    };
    return myPublicStuff;
})(window);

console.log(MODULE.myPublicMethod(document.getElementById('btnPrint')));

<button type="button" id="btnPrint" class="btn">...</button>

document.getElementById 是可以链接的方法吗？

Is document.getElementById a method that can be chained?

javascript

chaining

module-pattern