javascript - 尝试使用 jQuery.data() API 在 jQuery 插件中缓存函数

Question

请针对以下场景提出解决方案

背景(jQuery 插件):

$.fn.myplugin = function (action) {
    if (actions[action]) {
        return actions[action].apply(this, Array.prototype.slice.call(arguments, 1));
    } else if (typeof action === 'object' || !action) {
        return actions.init.apply(this, arguments);
    } else {
        $.error('Action ' + action + ' does not exist on myplugin');
        return this;
    }
};

和变量 Action 看起来像:

var actions = {
    init: function (options) {
        if (this.length) {
            var settings = $.extend({}, $.fn.myplugin.defaults);
            return this.each(function () {
                if (options) {
                    settings = $.extend(settings, options);
                }

                $(this).data('myplugin', new MyPlugin($(this), settings));
            });
        } else {
            throw new Error('unable to init undefined');
        }
    },
    update: function () {
        ...
    },
    destroy: function () {
        ...
    }
};

和MyPlugin看起来像

function MyPlugin($el, settings) {
    var $content = $('.content', $el);

    var a = function setup() { ... };

    var b = function hold() { ... }

    $content.on({
        'click': function(e) { ... },
        'hover': function(e) { ... }
    });
}

我知道我可以将 $.cache 转储到控制台并查看 .data() 中关联的内容。

需要的问题/建议:

如果我调用像 $('myEle').myplugin('update') 这样的更新函数，那么我需要 update 函数 来改变实例的状态MyPlugin 使用 .data() API 创建和缓存。有哪些可能的方法可以做到这一点？

$('myEle').data('myplugin') 的当前结果显示 MyPlugin{}，大括号之间没有任何内容。

Answer 1

这个问题与 jQuery 或 data() API 没有任何关系，这是由于对 JavaScript 中的函数、对象和构造函数的误解造成的。

这很容易在浏览器的 JavaScript 控制台中测试:

> function MyPlugin() { var a = 1; var b = 2; }
undefined
> new MyPlugin()
MyPlugin {}

> function MyPlugin() { this.a = 1; this.b = 2; }
undefined
> new MyPlugin()
MyPlugin {a: 1, b: 2}