如何在 jQuery 中正确定义变量的范围？

Question

我正在开发一个 jQuery 插件，但在正确设置变量范围时遇到了一些麻烦。这是我的代码中的一个示例：

(function($) {

$.fn.ksana = function(userOptions) {
    var o = $.extend({}, $.fn.ksana.defaultOptions, userOptions);

    return this.each(function() {
        alert(rotate()); // o is not defined
    });
};

function rotate() {
    return Math.round(o.negRot + (Math.random() * (o.posRot - o.negRot)));
};

$.fn.ksana.defaultOptions = {
    negRot: -20,
    posRot: 20
};

})(jQuery);

我试图让私有函数 rotate 能够看到 o 变量，但它只是不断提醒“o 未定义”。我不确定我做错了什么。

Answer 1

o 变量在 $.fn.ksana 函数内的局部范围内，为了允许 rotate 访问它，您应该：

• 只需将o 变量作为参数传递给它。
• 在ksana 中定义该函数。
• 在外部范围内定义o。

IMO，将其作为参数传递就足够干净了：

(function($) {
  $.fn.ksana = function(userOptions) {
    var o = $.extend({}, $.fn.ksana.defaultOptions, userOptions);

    return this.each(function() {
        alert(rotate(o)); // pass o
    });
  };

  function rotate(o) { // use passed object
    return Math.round(o.negRot + (Math.random() * (o.posRot - o.negRot)));
  }
//...
})(jQuery);

Answer 2

您必须将 o 放在 rotate 和 ksana 周围的范围内 - 即在您的根 function($) 范围内。像这样：

(function($) {

var o;

$.fn.ksana = function(userOptions) {
   o = $.extend({}, $.fn.ksana.defaultOptions, userOptions);

但是你为什么不把它作为rotate 的参数呢？为什么你需要让它有点“全球性”？

Answer 3

您可以将 rotate-function 放在与 o 相同的范围内：

(function($) {

$.fn.ksana = function(userOptions) {
    var o = $.extend({}, $.fn.ksana.defaultOptions, userOptions);

    function rotate() {
        return Math.round(o.negRot + (Math.random() * (o.posRot - o.negRot)));
    };

    return this.each(function() {
        alert(rotate()); 
    });
};

或者，只需将其传递给旋转：

(function($) {

    var o;
    $.fn.ksana = function(userOptions) {
        o = $.extend({}, $.fn.ksana.defaultOptions, userOptions);

        return this.each(function() {
           alert(rotate(o)); 
        });
    };

function rotate(o) {
    return Math.round(o.negRot + (Math.random() * (o.posRot - o.negRot)));
};