Question

我开始使用很多插件来快速增强网站，但我仍然习惯了jQuery。偶尔我会遇到冲突。其中一个最常用的词是设置，自我和 dat 作为用于自引用的内部变量。

请使用以下代码：

    (function ($)
    {
        var cheese = this;
        var var1;
        var var2;
        $.fn.cheesetest = function (text) {
            cheese.var1 = text;
            cheese.var2 = text;
            console.log(cheese.var1 + ", " + cheese.var2);
        }
    }(jQuery));

    (function ($)
    {
        var cheese = this;
        var var1;
        var var2;
        $.fn.cheese2 = function (text) {
            cheese.var1 = text;
            console.log(cheese.var1 + ", " + cheese.var2);
        }
    }(jQuery));

我用以下代码运行代码：

$(document).ready(function () {
    $('body').cheesetest('panther');
    $('h2').cheese2('tiger');
 })

输出是：

豹，豹虎，豹

简而言之，似乎奶酪（或某些插件中的自我或设置）指的是共享的jQuery范围而不是该插件。

问题是：如何使用内部变量

var self

..在一个插件中与另一个插件中的self或设置变量不冲突？

Answer 1

这里的问题是因为您正在使用：

var cheese = this;

这里这个将引用 window 对象，基本上你在这里创建一个全局变量cheese - 这就是为什么有一个< EM>冲突

＆＃13;

(function($) {
  var cheese = {};
  $.fn.cheesetest = function(text) {
    cheese.var1 = text;
    cheese.var2 = text;
    console.log(cheese.var1 + ", " + cheese.var2);
  }
}(jQuery));


(function($) {
  var cheese = {};
  $.fn.cheese2 = function(text) {
    cheese.var1 = text;
    console.log(cheese.var1 + ", " + cheese.var2);
  }
}(jQuery));


$(document).ready(function() {
  $('body').cheesetest('panther');
  $('h2').cheese2('tiger');

})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2></h2>

＆＃13;

使用内部变量的jQuery自定义插件之间的冲突

1 个答案: