jQuery插件：使jQuery变量可跨所有插件函数访问

Question

我在jQuery插件中缺少变量范围的基本知识。 以下是jQuery插件存根（主要基于jQuery.com文档）。

我想使变量（ $test和test ）可用于插件中的所有功能。

在下面的示例代码中，变量test按预期将“ hello”写入控制台。

但是，变量$test将jQuery（）写入控制台。

问题：（a）为什么$test将jQuery（div＃test）写入控制台？ （b）使jQuery变量（或任何其他变量）可在所有函数中使用的最佳实践是什么。 例如，类似于.net类中的类级别变量。

(function ($) {

var settings = {
};

var methods = {
    init: function (options) { if (options) { $.extend(settings, options); } return init(this, settings); }
};

$.fn.scopetest = function (method) {
    // Method calling logic
    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 plugin');
    }
};

var $test = $('#test');
var test = 'hello';

var init = function (object, settings) {
    return object.each(function () {

        console.log($test);
        console.log(test);
    });
}

})(jQuery);

Answer 1

尝试以下选项：

(function ($) {

var options = {
        option1: "some_value",
        option2: "another_value",
        ...
    }
var settings = {
    };

从您的函数这样的引用：

var self = this;
alert( self.options.option1 );

要么：

var self = this,
    o = self.options;
alert( o.option1);

还可以查看Jquery 小部件工厂插件布局 ，它与您的布局接近，但我更喜欢。

(function( $, window) {

    $.widget("widge_name", $.widget, {

        options: {
        ...
        },
        init: function(param_1, param_2) {
        ...
        },
        _create: function() {
        ...
        },
        some_function_A: function(param3, param4) {
        ...
        }
        some_function_B: function(param3, param4) {
        var self = this;
        // run some_function_A 
        self.some_function_A("foo","bar");
        }
  });
}) (jQuery,this);

这样，您可以像上面那样使用self以相同的方式调用其他函数。

Answer 2

• 为什么$ test不将jQuery（div＃test）写入控制台？

  因为，在DOM中没有id test这样的元素。 因此，jQuery返回空集合jQuery() 。

• 使jQuery变量（或任何其他变量）在所有函数中可用的最佳实践是什么？

  我不确定最佳做法，但是如果我必须使一个变量可全局访问，则可以将该变量与window对象关联。 喜欢，

  window.$test = $('#test');
window.test = 'Hello';

并使用window对象（例如： alert(window.$test); ）或仅使用变量名称alert($test);访问它们alert($test);

Answer 3

有趣的是，保留var $ test语句，但将赋值移到init函数中似乎可行。 因此，除非在函数内部，否则使用$似乎存在问题。 在找到更好的解决方案之前，将其用作解决方法。

(function ($) {

var settings = {
};

var methods = {
    init: function (options) { if (options) { $.extend(settings, options); } return init(this, settings); }
};

$.fn.scopetest = function (method) {

    // Method calling logic
    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 plugin');
    }
};

var $test;
var test;

var init = function (object, settings) {

    return object.each(function () {

        $test = $('#test');
        test = 'hello';
        testfunc();
    });
}

var testfunc = function () {
    console.log($test);
    console.log(test);
}

})(jQuery);