当前位置：首页 >前端技术 > bootstrap之noConflict的详解

bootstrap之noConflict的详解

　　翻开推特框架，不经发现，几乎所有的插件都会出现noConflict的写法来防止和其他的插件冲突！我们以button.js为例子，打开其源代码发现如下：

var old = $.fn.button  $.fn.button = Plugin  $.fn.button.Constructor = Button  // BUTTON NO CONFLICT  // ==================  $.fn.button.noConflict = function () {$.fn.button = oldretu this  }

　　那这段代码的作用呢？一看都知道是防止冲突，但是如何防止冲突呢？对于前置插件或者是后置的重名插件又是如何的呢？下面我们就来翻一翻，期望让自己不再那么困惑！

　　例子1:前置的重名插件

　　　　根据js在页面的执行顺序显然可以知道，后面的$.fn.button会覆盖前面的同名插件，所以这个时候如果如果要调用的是bootstrap的插件，其实是不需要进行冲突的处理的！

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>jqueryPlugin</title><script src="http://libs.baidu.com/jquery/1.11.1/jquery.js"></script></head><body><button id="btn1">按钮1</button><button id="btn2">按钮2</button><script type="text/javascript">(function($){$.fn.button=function(){alert("自定义button插件");}})(jQuery);(function($){function Button(element,loption){this.name="bootstrap的button插件";this.init();}Button.prototype.init=function(){alert(this.name)}function Plugin(option) {retu this.each(function(){var $this= $(this),data= $this.data("cui.button"),options=typeof option =='object' && option;if(!data){$this.data("cui.button",data=new Button(this,options));}//对于复选框的时候，对于单选框的时候if(option=="toggle"){data.toggle()}else if(option){data.setState(option)}})}var old = $.fn.button;$.fn.button = Plugin  $.fn.button.Constructor = Button  $.fn.button.noConflict = function () {$.fn.button = oldretu this  }})(jQuery);$(function(){$("#btn1").button();//bootstrap的button插件})</script></body></html>

　　问题来了，假如我们要调用前置的$.fn.button插件(自定义button插件)的时候,该怎么办呢？只要在上面的调用时候做点修改就可以了：在调用button之前调用$.fn.button.noConflict();

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>jqueryPlugin</title><script src="http://libs.baidu.com/jquery/1.11.1/jquery.js"></script></head><body><button id="btn1">按钮1</button><button id="btn2">按钮2</button><script type="text/javascript">(function($){$.fn.button=function(){alert("自定义button插件");}})(jQuery);(function($){function Button(element,loption){this.name="bootsrtap的button插件";this.init();}Button.prototype.init=function(){alert(this.name)}function Plugin(option) {retu this.each(function(){var $this= $(this),data= $this.data("cui.button"),options=typeof option =='object' && option;if(!data){$this.data("cui.button",data=new Button(this,options));}//对于复选框的时候，对于单选框的时候if(option=="toggle"){data.toggle()}else if(option){data.setState(option)}})}var old = $.fn.button;$.fn.button = Plugin  $.fn.button.Constructor = Button  $.fn.button.noConflict = function () {$.fn.button = oldretu this  }})(jQuery);$(function(){$.fn.button.noConflict();//你也可以用 var button=$.fn.button.noConflict();$("#btn1").button();//自定义button插件

  }) </script> </body> </html>

　　例子2:后置的重名插件

　　根据后置覆盖前置插件的原理，这个例子当然是弹出文字和你想象是一样的，弹出"自定义button插件"，

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>jqueryPlugin</title><script src="http://libs.baidu.com/jquery/1.11.1/jquery.js"></script></head><body><button id="btn1">按钮1</button><button id="btn2">按钮2</button><script type="text/javascript">(function($){function Button(element,loption){this.name="bootstrap的button插件";this.init();}Button.prototype.init=function(){alert(this.name)}function Plugin(option) {retu this.each(function(){var $this= $(this),data= $this.data("cui.button"),options=typeof option =='object' && option;if(!data){$this.data("cui.button",data=new Button(this,options));}//对于复选框的时候，对于单选框的时候if(option=="toggle"){data.toggle()}else if(option){data.setState(option)}})}var old = $.fn.button;$.fn.button = Plugin  $.fn.button.Constructor = Button  $.fn.button.noConflict = function () {$.fn.button = oldretu this  }})(jQuery);(function($){$.fn.button=function(){alert("自定义button插件");}})(jQuery);$(function(){$("#btn1").button();//自定义button插件})</script></body></html>

　　这个时候我们想调用bootstrap的button插件，以为来个$.fn.button.noConflict(),是不是就可以调用了，事实呢？浏览器跟你了一巴掌，提示你$.fn.button.noConflict()不是一个函数，为什么？不要忘记了，后置的同名插件已经覆盖了前面的同名插件，而后置的插件没有$.fn.button.noConflict()这个函数，所以你当然找不到这个函数了！举个例子来测试一下就知道

　　这个例子就是典型的重写原型，所以调用say的时候就取不到值了！！！

function Person(){  this.name="丑男孩";}Person.prototype.say=function(){  alert(this.name)}//Person.prototype在这里被重写了Person.prototype={  run:function(){alert("我可以跑！")  }}var person1=new Person();person1.say();//提示未定义

　　言归正传，那如果调用前置插件(也就是bootstrap的button插件呢)，这个时候我们有必要对于自定义的button的插件进行一定的修改（怎么修改取决于你的插件的写法），本例中的修改如下，在自定义的button插件中添加$.fn.button.noConflict() 方法，如下(注意自定义button的插件中代码的修改)

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>jqueryPlugin</title><script src="http://libs.baidu.com/jquery/1.11.1/jquery.js"></script></head><body><button id="btn1">按钮1</button><button id="btn2">按钮2</button><script type="text/javascript">(function($){function Button(element,loption){this.name="bootstrap的button插件";this.init();}Button.prototype.init=function(){alert(this.name)}function Plugin(option) {retu this.each(function(){var $this= $(this),data= $this.data("cui.button"),options=typeof option =='object' && option;if(!data){$this.data("cui.button",data=new Button(this,options));}//对于复选框的时候，对于单选框的时候if(option=="toggle"){data.toggle()}else if(option){data.setState(option)}})}var old = $.fn.button;$.fn.button = Plugin  $.fn.button.Constructor = Button  $.fn.button.noConflict = function () {$.fn.button = oldretu this  }})(jQuery);(function($){var old=$.fn.button;$.fn.button=function(){alert("自定义button插件");}$.fn.button.noConflict = function () {$.fn.button = oldretu this  }})(jQuery);$(function(){$.fn.button.noConflict();$("#btn1").button();//bootstrap的button插件})</script></body></html>