Question

我一直在努力弄清楚为什么我的公共方法似乎不存在于我的自定义jQuery插件对象中。

我创建了一个jQuery插件的简化版本，其中包含一个私有变量和两个公共方法来访问/修改私有变量。我看过网上但结果不是那么清楚，或者我的搜索技巧很糟糕。

它一直在说' TypeError：myObject.getMyValue不是一个函数'，任何人都知道我做错了什么，或建议更好地解决这个问题？

基本对象类如下所示，但可以在jsFiddle链接上找到正确的代码示例。

(function ($) {

    var MyClass = function (element) {

        var myValue = 'Hello World';

        this.getMyValue = function() {
            return myValue;
        };

        this.setMyValue = function(value) {
            myValue = value;
        };

        return this;
    };

    $.fn.myPlugin = function() {
        return this.each(function(key, value){
            if ($(this).data('myclass')) {
                return $(this).data('myclass');
            }

            var instance = new MyClass(this);
            $(this).data('myclass', instance);
            return instance;
        });
    };

})(jQuery);

var myObject = $('#test').myPlugin();

alert(myObject.getMyValue());
myObject.setMyValue('Goodbye World');
alert(myObject.getMyValue());

http://jsfiddle.net/hZExb/4/

Answer 1

因为您返回的this.each()结果为this。在this.each()之外创建一个变量，并在this.each完成后返回该变量。

jsFiddle

$.fn.myPlugin = function() {
    var instance;
    this.each(function(key, value){
        if ($(this).data('myclass')) {
            return $(this).data('myclass');
        }

        instance = new MyClass(this);
        $(this).data('myclass', instance);
    });
    return instance;
};

如果你想返回一个MyClass数组，如果你的jQuery对象是一个集合，你可以这样做：

jsFiddle

$.fn.myPlugin = function() {
    var instances = [];
    this.each(function(key, value){
        if ($(this).data('myclass')) {
            return $(this).data('myclass');
        }

        var instance = new MyClass(this);
        $(this).data('myclass', instance);
        instances.push(instance);
    });
    if (instances.length == 1)
        return instances[0];
    return instances;
};

为什么我的自定义对象看起来不存在我的公共方法？

1 个答案: