Question

首先，以下是我自己的javascript库的代码。

(function() {
    var lib = {
        elems: [],
        getElem: function() {
            var tmpElem = [];
            for (var i = 0; i < arguments.length; i++)
                tmpElem.push(document.getElementById(arguments[i]));
            this.elems = tmpElem;
            tmpElem = null;
            return this;
        },
        html: function(txt) {
            for (var i = 0; i < this.elems.length; i++)
                this.elems[i].innerHTML = txt;
            return this;
        },
        style: function(prob, val) {
            for (var i = 0; i < this.elems.length; i++)
                this.elems[i].style[prob] = val;
            return this;
        },
        addEvent: function(event, callback) {
            if (this.elems[0].addEventListener) {
                for (var i = 0; i < this.elems.length; i++)
                    this.elems[i].addEventListener(event, callback, false);
            } else if (this.elems[0].attachEvent) {
                for (var i = 0; i < this.elems.length; i++)
                    this.elems[i].attachEvent('on' + event, callback);
            }
            return this;
        },
        toggle: function() {
            for (var i = 0; i < this.elems.length; i++)
                this.elems[i].style.display = (this.elems[i].style.display === 'none' || '') ? 'block' : 'none';
            return this;
        },
        domLoad: function(callback) {
            var isLoaded = false;
            var checkLoaded = setInterval(function() {
                if (document.body && document.getElementById)
                    isLoaded = true;
            }, 10);
            var Loaded = setInterval(function() {
                if (isLoaded) {
                    clearInterval(checkLoaded);
                    clearInterval(Loaded);
                    callback();
                }
            }, 10);
        }
    };

    var fn = lib.getElem;
    for(var i in lib)
        fn[i] = lib[i];

    window.lib = window.$ = fn;
})();

以前，我用这种方式使用我自己的库，并且工作正常。

$.getElem('box').html('Welcome to my computer.');

但是当更新我自己的库的代码时，我添加了

var fn = lib.getElem;
for(var i in lib)
   fn[i] = lib[i];

以这种方式使用元素选择器

$('box').html('Welcome to my computer.');

但是，在添加更新的代码以克隆lib对象TypeError: $(...).html is not a function时，问题就出现了。

现在我想使用像

那样的元素选择器

$('box').html('Welcome to my computer.');

而不是

$.getElem('box').html('Welcome to my computer.');

Answer 1

虽然我不确切地知道您要使用这些额外的行来实现什么，但只需阅读代码，lib.getElem就没有名为html的函数

lib。

因此，只需var fn = lib;即可。

Answer 2

你创建了一个变量fn，它引用了“getElem”，但由于fn不是lib对象的属性，所以它意味着当getElem引用“this”时，它将是你可能是窗口的全局对象。 / p>

删除以下所有3行

var fn = lib.getElem;
for(var i in lib)
   fn[i] = lib[i];

然后执行此操作

window.$ = function () { return lib.getElem.apply(lib, arguments); };

这将允许将getElem作为$调用，但将“lib”维护为上下文。

Answer 3

有更多方法可以实现这一目标，但根本原因在于getElem()函数：return this;

$是对该函数的引用。如果你打电话给$()，它就被称为一个函数，而不是一个方法。因此this引用window，window当然没有html()功能。

您可以return lib;来解决问题。

当我对该对象进行克隆时，会显示一条错误消息

3 个答案: