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 = old return 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) { return 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 = old return 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) { return 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 = old return 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) { return 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 = old return 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) { return 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 = old return this } })(jQuery); (function($){ var old=$.fn.button; $.fn.button=function(){ alert("自定义button插件"); } $.fn.button.noConflict = function () { $.fn.button = old return this } })(jQuery); $(function(){ $.fn.button.noConflict(); $("#btn1").button();//bootstrap的button插件 }) </script> </body> </html>
到这里,其实已经很清楚了,bootstrap的noConflict 怎么样?如何用?对于自定义插件如何避免冲突,如果调用!妈妈再不担心自己的代码和别人冲突了