Question

我一直在为我的一个Web应用程序编写自定义jquery插件，但我遇到了一个奇怪的错误，我认为这是由于我对面向对象编程的不熟悉。

我遇到的错误是当我尝试运行$（“。list-group”）。updateList（'template'，'some template'）两次，第一次它工作得很好，但是第二次运行相同的命令时，我得到的对象不是函数错误。这是插件代码：

(function($){
    defaultOptions = {
        defaultId: 'selective_update_',
        listSelector: 'li'
    };

    function UpdateList(item, options) {
        this.options = $.extend(defaultOptions, options);
        this.item = $(item);
        this.init();
        console.log(this.options);
    }
    UpdateList.prototype = {
        init: function() {
            console.log('initiation');
        },
        template: function(template) {
            // this line is where the errors come
            this.template = template;
        },
        update: function(newArray) {
            //update code is here
            // I can run this multiple times in a row without it breaking
        }
    }

    // jQuery plugin interface
    $.fn.updateList = function(opt) {
        // slice arguments to leave only arguments after function name
        var args = Array.prototype.slice.call(arguments, 1);
        return this.each(function() {
            var item = $(this), instance = item.data('UpdateList');
            if(!instance) {
                // create plugin instance and save it in data
                item.data('UpdateList', new UpdateList(this, opt));
            } else {
                // if instance already created call method
                if(typeof opt === 'string') {
                    instance[opt](args);
                }
            }
        });
    }
}(jQuery));

当我去访问this.template时，我注意到了一件事 - 它是在数组中所以我不得不调用this.template [0]来获取字符串...我不知道它为什么这样做，但我怀疑它与我得到的错误有关。也许它可以在第一次分配字符串，但不能分配下一个字符串？任何帮助，将不胜感激！

谢谢:)

Answer 1

this.template = template

实际上是您的问题，因为您正在覆盖在实例上设置的功能。当您将其作为参数传递给初始args函数时，最终会将其覆盖到template数组。它基本上会这样做：

this.template = ["some template"];

因此，下次instance[opt](args)运行时，它将尝试执行该数组，就像它是一个函数一样，因此得到的不是函数错误。

JSFiddle

自定义JQuery插件方法错误

1 个答案: