Question

如何在两个不同的jQuery方法（即init和someMethod）之间共享变量？我在下面使用jQuery data()这样做，但是，期望有一种更有效的非jQuery方式。

(function( $ ){

    var methods = {
        init : function( options ) {
            return this.each(function(){
                $(this).data('myData',123);
            });
        },

        someMethod : function() {
            return $(this).each(function(){
                console.log($(this).data('myData'))
            })
        },
    };

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

}( jQuery ));

Answer 1

您可以创建一个将存储所有内容的对象，并将此对象设置为元素数据，因此您无需为同一元素创建两次。

;(function($, undefined){
    "use strict"; // Put this instruction to avoid some javascript quirks mode...

    var defaults = {
        myData: undefined,
        init: _init,
        someMethod: _someMethod
    }

    $.fn.myPlugin = function(method) {
        var response = this;
        this.each(function() {
            var $this = $(this);
            var mp = $this.data('plugin_myplugin');

            if (!mp)
                $this.data('plugin_myplugin', new MyPlugin($this, method));
            else if (typeof method === 'string' && method.length > 0)
                response = mp[method].apply(mp, Array.prototype.slice.call(arguments, 1));
            else
                $.error( 'Method ' +  method + ' does not exist on jQuery.myPlugin' );
        });

        return response;
    };
    $.fn.MyPlugin = function() {
        return $(this).data('plugin_myplugin');
    };

    function MyPlugin($element, options) {
        this.$element = $element;
        $.extend(true, this, $.fn.MyPlugin.defaults, $element.data(), options);

        this.init();
    }
    $.fn.MyPlugin.defaults = defaults;

    function _init() {
        this.myData = 123;
    }

    function _someMethod() {
        console.log(this.myData);
    }
}(jQuery));

这里有几件重要的事情：

要覆盖默认值，您只需执行$.extend($.fn.MyPlugin.defaults, {someMethod: function() {alert(123);}});

任何实例都可以覆盖某些方法，例如： <div id="div-test" data-some-value="123456">

$('#div-test').myPlugin({
    someOtherValue: "asd",
    someMethod: function() {alert(123); return "asdfgh"; }
});
var mp = $('#div-test').MyPlugin();
console.log(mp.someValue); // prints 123456
console.log(mp.someOtherValue); // prints "asd"
console.log(mp.someMethod); // prints that function up there.

我把undefined作为参数之一，但我没有在底部定义任何参数，这是因为一些旧的浏览器允许更改undefined，所以，我们强制未定义。 / p>

在jQuery方法之间共享数据

1 个答案: