javascript - javascript中的链接问题

Question

我有以下问题，我正在尝试制作一个小链条。

(function(window){
window.de=de={}

de.one=function(s){if(s){var y=document.getElementById(s); return y;} return this;}

de.two=function(s2){alert(s2); return this;}

})(window)

这就是我尝试的：

de.one("Id").two("Hello!");

但控制台给了我这个错误：

TypeError: Object # has no method 'two'

Answer 1

控制台没有说谎。HTMLElement没有名为 的方法two，因为该方法属于window.de。

不要HTMLElement通过添加到它们的原型来修改宿主对象。它们没有在 JavaScript 中实现。

编写一个包含您的方法的包装器，有点像 jQuery：

(function(window) {
    var de = function(thing) {
        return new de.prototype.init(thing);
    };

    de.prototype = {
        constructor: de,

        init: function(thing) {
            this.thing = thing;
        },

        one: function(other) {
            return de(other);
        }
    };

    de.prototype.init.prototype = de.prototype;

    window.de = de;
})(window);

现在，您可以执行以下操作：

de('foo').one('bar').one('bar').one('baz')

Answer 2

你不能这样做，问题出在 de.one() 中，你有 2 种不同类型的返回值。

“返回 y”并返回“this”。如果你想连锁，你必须“这个”。

Answer 3

给你一个想法：

现场演示

(function(window){

var myLibrary = (function( s ) {
  var d = document,
      e = d.getElementById( s ),
      methods = {
        one : function(val){
            alert(val);
            return this; // maintain chainability
        }, 
        two : function(val){
            alert(val);
            return this; // maintain chainability
        },
        css : function( property, val){
            if(!val && typeof property == "object" ){ // styles in Object notation
                for(var key in property){
                    e.style[key] = property[key];
                }
            }else{ // Comma separated: property, value
                e.style[property] = val || undefined;
            }
            return this;    
        }
    };
    return methods;

});
window.myLibrary = window.de = myLibrary; // Make Window accept "de" as "myLib" alias.   

})(window);

de("Id").one("UGA!!!").two("yoo").css({color:"red", background:"gold"});

考虑到你有类似的东西：

 <div id="Id">Some element</div>