0

首先下面是我自己的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.');
4

3 回答 3

0

虽然我不知道你想用这些额外的行来实现什么，只是通过阅读代码，lib.getElem没有一个名为的函数html

lib做。

因此，var fn = lib;应该做得很好。

于 2013-04-23T11:05:45.680 回答
0

您创建了一个引用“getElem”的变量 fn，但由于 fn 不是您的 lib 对象上的属性，因此这意味着当 getElem 引用“this”时，它将是您可能是窗口的全局对象。

删除以下所有 3 行

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

然后这样做

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

这将允许 getElem 被称为 $ 但保持“lib”作为上下文。

于 2013-04-23T11:13:54.800 回答
0

有更多方法可以实现这一点，但根本原因在于您的getElem()功能：return this;

$是对该函数的引用。如果你调用$()它，它被称为函数而不是方法。因此this指代window，window当然没有html()功能。

你可以return lib;解决这个问题。

于 2013-04-23T11:22:22.853 回答