javascript - JQuery Boilerplate 插件对新实例使用相同的内部变量

Question

我创建了一个基于 Boilerplate 模板的简单 JQuery 插件。除了一个问题之外，它运行良好。当我将插件应用到第二个 <div> 时，第一个停止工作。此外，所有 div 都具有我在创建新实例时生成的相同唯一 id。如何重构现有代码来封装变量并使其正常工作？下面的代码是我的插件:

;(function($) {

    var pluginName = "Pulsar",
        dataKey = "plugin_" + pluginName,
        defaults = {
            key : "color",
            from: "#000",
            to: "#fff",         
            duration: 5         
        };

    var self = null;
    var interval = null;    
    var flag = false;
    var uniqueID = uniqueId();

    //PRIVATE FUNCTIONS
    function Plugin( element, options ) {
        this.element = element;
        this.options = $.extend( {}, defaults, options) ;
        this._defaults = defaults;
        this._name = pluginName;

        this.init();        
    }

    function uniqueId() {
      return 'id-' + Math.random().toString(36).substr(2, 16);
    };      

    function Init(key, from, to, duration){
        $(self.element).css({ 
            WebkitTransition : 'all ease '+duration+'s',
            MozTransition    : 'all ease '+duration+'s',
            MsTransition     : 'all ease '+duration+'s',
            OTransition      : 'all ease '+duration+'s',
            transition       : 'all ease '+duration+'s' 
        });
        $(self.element).text($(self.element).text()+' '+uniqueID);  

        var state1, state2; 

        state1 = '{ "'+key+'" : "'+from+'"}';
        state2 = '{ "'+key+'" : "'+to+'"}';

        var state1JSON = JSON.parse(state1);
        var state2JSON = JSON.parse(state2);

        $(self.element).css(state1JSON);

        clearInterval(interval);
        interval = setInterval(function(){
            if(!flag){
                $(self.element).css(state2JSON);
                flag=true;                  
            }
            else{
                $(self.element).css(state1JSON);
                flag=false;             
            }               
        }, duration * 1000);
    }

    //PUBLIC FUNCTIONS
    Plugin.prototype = {
        init: function(){
            self = this;
            $(self.element).attr("pluginID", uniqueID);         
            Init(this.options.key, this.options.from, this.options.to, this.options.duration);
        },
        update: function(key, from, to, duration){          
            Init(key, from, to, duration);          
        },
        getID: function(){
            return uniqueID;
        }
    };

    $.fn[pluginName] = function ( options ) {
        var plugin = this.data(dataKey);

        // has plugin instantiated ?
        if (plugin instanceof Plugin) {
            // if have options arguments, call plugin.init() again
            if (typeof options !== 'undefined') {
                plugin.init(options);
            }
        } else {
            plugin = new Plugin(this, options);
            this.data(dataKey, plugin);
        }

        return plugin;
    };


})(jQuery);

它是如何工作的，您可以在 jsfiddle 上看到

更新:我的错误是在错误的位置声明变量及其使用，因此它们被所有实例使用，而不是具体实例。感谢 guest271314。他给了我一个如何纠正我的问题的想法。正确的插件功能如下:

;(function($) {

var pluginName = "Pulsar",
    dataKey = "plugin_" + pluginName,
    defaults = {
        key : "color",
        from: "#000",
        to: "#fff",         
        duration: 5,            
        onChange: function(){}
    };


//PRIVATE FUNCTIONS
function Plugin( element, options ) {
    this.element = element;
    this.options = $.extend( {}, defaults, options) ;
    this._defaults = defaults;
    this._name = pluginName;

    //init all required variables
    this.interval = null;
    this.flag = false;

    this.init(options);     
}

function Init(self, key, from, to, duration){
    var element = self.element;

    $(element).css({ 
        WebkitTransition : 'all '+duration+'s',
        MozTransition    : 'all '+duration+'s',
        MsTransition     : 'all '+duration+'s',
        OTransition      : 'all '+duration+'s',
        transition       : 'all '+duration+'s'  
    });     

    var state1, state2; 

    state1 = '{ "'+key+'" : "'+from+'"}';
    state2 = '{ "'+key+'" : "'+to+'"}';

    var state1JSON = JSON.parse(state1);
    var state2JSON = JSON.parse(state2);

    $(element).css(state1JSON);

    if(self.interval != null){          
        clearInterval(self.interval);
    } 
    self.interval = setInterval(function(){
        if(!self.flag){
            $(element).css(state2JSON);
            self.flag=true; 
            self.options.onChange();
        }
        else{
            $(element).css(state1JSON);
            self.flag=false;
            self.options.onChange();
        }               
    }, duration * 1000);
}

//PUBLIC FUNCTIONS
Plugin.prototype = {
    init: function(options){        
        var options = $.extend({}, defaults, options);      
        Init(this, options.key, options.from, options.to, options.duration);
    },
    update: function(key, from, to, duration){          
        Init(this, key, from, to, duration);            
    }
};

$.fn[pluginName] = function ( options ) {
     var plugin = this.data(dataKey);

    // has plugin instantiated ?
    if (plugin instanceof Plugin) {
        // if have options arguments, call plugin.init() again
        if (typeof options !== 'undefined') { 
            plugin.init(options);
        }
    } else {
        plugin = new Plugin(this, options);
        this.data(dataKey, plugin);
    }

    return plugin;
};
})(jQuery);

看看它现在是如何工作的 - jsfiddle

Answer 1

在 interval = setInterval 之前调用

clearInterval(interval) 可能会出现问题；还可以尝试在 this.data() 设置 flag

;(function($) {

  var pluginName = "Pulsar",
    dataKey = "plugin_" + pluginName,
    defaults = {
      key: "color",
      from: "#000",
      to: "#fff",
      duration: 5
    };

  var interval = null;

  function uniqueId() {
    return 'id-' + Math.random().toString(36).substr(2, 16);
  };

  function Init(key, from, to, duration) {
    $(this).css({
      WebkitTransition: 'all ease ' + duration + 's',
      MozTransition: 'all ease ' + duration + 's',
      MsTransition: 'all ease ' + duration + 's',
      OTransition: 'all ease ' + duration + 's',
      transition: 'all ease ' + duration + 's'
    });
    $(this).text(uniqueId());

    var state1, state2;

    state1 = '{ "' + key + '" : "' + from + '"}';
    state2 = '{ "' + key + '" : "' + to + '"}';

    var state1JSON = JSON.parse(state1);
    var state2JSON = JSON.parse(state2);

    $(this).css(state1JSON);

    interval = setInterval(function() {
      if (!$(this).data().flag) {
        $(this).css(state2JSON);
        $(this).data().flag = true;
      } else {
        $(this).css(state1JSON);
        $(this).data().flag = false;
      }
    }.bind(this), duration * 1000);
    return this
  }

  $.fn[pluginName] = function(options) {
    this.data("flag", false);
    var options = $.extend({}, defaults, options);
    return Init.call(this, options.key, options.from, options.to, options.duration);
  };

})(jQuery);

$(document).ready(function() {

  //FOR SINGLE PROPERTY
  $("#pulsar").Pulsar({
    duration: 2,
    key: 'textShadow',
    from: '0px 0px 5px rgba(0, 0, 255, 1)',
    to: '0px 0px 30px rgba(0, 0, 255, 1)'
  });

  setTimeout(function() {
    $("#pulsar2").Pulsar({
      duration: 1,
      key: 'textShadow',
      from: '0px 0px 5px rgba(255, 0, 255, 1)',
      to: '0px 0px 30px rgba(0, 0, 255, 1)'
    });
  }, 5000);

});

body,
html {
  background-color: #000;
}
.pulsar {
  position: absolute;
  font-size: 57px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.pulsar2 {
  position: absolute;
  font-size: 47px;
  top: 70%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div id="pulsar" class="pulsar">PULSAR</div>
<div id="pulsar2" class="pulsar2">PULSAR 2</div>

jsfiddle https://jsfiddle.net/haevd4ph/5/