Javascript JQuery样板插件对新实例使用相同的内部变量_Javascript_Jquery_Jquery Plugins_Boilerplate

Javascript JQuery样板插件对新实例使用相同的内部变量

javascript jquery jquery-plugins

Javascript JQuery样板插件对新实例使用相同的内部变量,javascript,jquery,jquery-plugins,boilerplate,Javascript,Jquery,Jquery Plugins,Boilerplate,我基于样板模板创建了一个简单的JQuery插件。除了一个问题外，它运行良好。当我将插件应用到第二个时，第一个插件停止工作。此外，所有div都有我在创建新实例时生成的相同唯一id。如何重新构造现有代码以封装变量并使其正确工作？下面的代码是我的插件： ;(function($) { var pluginName = "Pulsar", dataKey = "plugin_" + pluginName, defaults = { ke

我基于样板模板创建了一个简单的JQuery插件。除了一个问题外，它运行良好。当我将插件应用到第二个

时，第一个插件停止工作。此外，所有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);

你可以在电视上看到它的工作原理

更新： 我的错误是在错误的地方声明变量和使用它们，所以所有实例都使用它们，而不是具体实例。感谢来宾271314。他给了我一个如何纠正我的问题的主意。下面是一个正确的插件，它可以像一个符咒一样工作：

;(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);

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

clearInterval（interval）

在

interval=setInterval

可能被发出之前被调用；还可以尝试在

this.data（）处设置标志
；（函数（$）{
var pluginName=“脉冲星”，
dataKey=“plugin\”+pluginName，
默认值={
键：“颜色”，
从：#000，
致：“fff”，
持续时间：5
};
var区间=null；
函数uniqueId（）{
返回'id-'+Math.random（）.toString（36）.substr（2,16）；
};
函数初始化（键、从、到、持续时间）{
$（this.css）({
WebKittTransition:“一切轻松”+持续时间+“s”，
MozTransition:“所有缓解”+持续时间+“s”，
MsTransition:'所有缓解'+持续时间+'s'，
过渡：“所有缓解”+持续时间+“s”，
过渡：“全部缓解”+持续时间+'s”
});
$（this.text（uniqueId（））；
变量state1，state2；
state1='{'+key+'：'+from+'''}'；
state2='{'+key+'：'+to+'''}'；
var state1JSON=JSON.parse（state1）；
var state2JSON=JSON.parse（state2）；
$（this.css（state1JSON）；
间隔=设置间隔（函数（）{
if（！$（this.data（）.flag）{
$（this.css（state2JSON）；
$（this）.data（）.flag=true；
}否则{
$（this.css（state1JSON）；
$（this）.data（）.flag=false；
}
}.绑定（本），持续时间*1000）；
还这个
}
$.fn[pluginName]=函数（选项）{
该数据（“标志”，假）；
var options=$.extend（{}，默认值，选项）；
返回Init.call（this，options.key，options.from，options.to，options.duration）；
};
})（jQuery）；
$（文档）.ready（函数（）{
//单一财产
$（“脉冲星”）。脉冲星({
持续时间：2，
键：“textShadow”，
from:'0px 0px 5px rgba（0,0,255,1）'，
至：“0px 0px 30px rgba（0，0，255，1）”
});
setTimeout（函数（）{
$（“脉冲星2”）。脉冲星({
持续时间：1，
键：“textShadow”，
from:'0px 0px 5px rgba（255,0255,1）'，
至：“0px 0px 30px rgba（0，0，255，1）”
});
}, 5000);
});
body，
html{
背景色：#000；
}
脉冲星{
位置：绝对位置；
字体大小：57px；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
}
.脉冲2{
位置：绝对位置；
字体大小：47px；
最高：70%；
左：50%；
转换：翻译（-50%，-50%）；
}

脉冲星
在interval=setInterval
之前调用PULSAR 2
clearInterval（interval）
，可能是问题；还可以尝试在this.data（）处设置标志
；（函数（$）{
var pluginName=“脉冲星”，
dataKey=“plugin\”+pluginName，
默认值={
键：“颜色”，
从：#000，
致：“fff”，
持续时间：5
};
var区间=null；
函数uniqueId（）{
返回'id-'+Math.random（）.toString（36）.substr（2,16）；
};
函数初始化（键、从、到、持续时间）{
$（this.css）({
WebKittTransition:“一切轻松”+持续时间+“s”，
MozTransition:“所有缓解”+持续时间+“s”，
MsTransition:'所有缓解'+持续时间+'s'，
过渡：“所有缓解”+持续时间+“s”，
过渡：“全部缓解”+持续时间+'s”
});
$（this.text（uniqueId（））；
变量state1，state2；
state1='{'+key+'：'+from+'''}'；
state2='{'+key+'：'+to+'''}'；
var state1JSON=JSON.parse（state1）；
var state2JSON=JSON.parse（state2）；
$（this.css（state1JSON）；
间隔=设置间隔（函数（）{
if（！$（this.data（）.flag）{
$（this.css（state2JSON）；
$（this）.data（）.flag=true；
}否则{
$（this.css（state1JSON）；
$（this）.data（）.flag=false；
}
}.绑定（本），持续时间*1000）；
还这个
}
$.fn[pluginName]=函数（选项）{
该数据（“标志”，假）；
var options=$.extend（{}，默认值，选项）；
返回Init.call（this，options.key，options.from，options.to，options.duration）；
};
})（jQuery）；
$（文档）.ready（函数（）{
//单一财产
$（“脉冲星”）。脉冲星({
持续时间：2，
键：“textShadow”，
from:'0px 0px 5px rgba（0,0,255,1）'，
至：“0px 0px 30px rgba（0，0，255，1）”
});
setTimeout（函数（）{
$（“脉冲星2”）。脉冲星({
持续时间：1，
键：“textShadow”，
from:'0px 0px 5px rgba（255,0255,1）'，
至：“0px 0px 30px rgba（0，0，255，1）”
});
}, 5000);
});
body，
html{
背景色：#000；
}
脉冲星{
位置：绝对位置；
字体大小：57px；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
}
.脉冲2{
位置：绝对位置；
字体大小：47px；
最高：70%；
左：50%；
转换：翻译（-50%，-50%）；
}

脉冲星
PULSAR 2
尝试用返回此
替换返回插件
@guest271314，您看到结果了吗？它和我的一样。第一个div仍然不起作用。不确定预期的渲染结果是什么？首先应该如何div
渲染？另外，要创建唯一id，请尝试在$（self.element）.attr（“pluginID”，uniqueId（））
处调用uniqueId（）
，尝试将jQuery方法链接到.Pulsar（）
处？尝试在$.fn[plug]处用返回的此
替换插件