试图使用jQuery.data() API缓存jQuery插件中的函数

Trying to use jQuery.data() API to cache a function in a jQuery plugin

本文关键字：jQuery 插件 缓存 函数 API data      更新时间：2023-09-26

请对下面提到的场景提出解决方案

Background (jQuery Plugin): 

$.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;
    }
};

和变量动作看起来像:

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) { ... }
    });
}

我知道我可以转储$。缓存到控制台，看看.data()中关联了什么。

问题/建议希望:

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

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

这个问题与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}
相关文章：