bootstrap之noConflict的详解

时间 2019-11-08

标签 bootstrap noconflict 详解栏目 Bootstarp 繁體版

原文原文链接

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

var old = $.fn.button
  $.fn.button             = Plugin
  $.fn.button.Constructor = Button


  // BUTTON NO CONFLICT
  // ==================

  $.fn.button.noConflict = function () {
    $.fn.button = old
    return this
  }

　　那这段代码的做用呢？一看都知道是防止冲突，可是如何防止冲突呢？对于前置插件或者是后置的重名插件又是如何的呢？下面咱们就来翻一翻，指望让本身再也不那么困惑！html

　　例子1:前置的重名插件java

　　　　根据js在页面的执行顺序显然能够知道，后面的$.fn.button会覆盖前面的同名插件，因此这个时候若是若是要调用的是bootstrap的插件，实际上是不须要进行冲突的处理的！jquery

<!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();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="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的插件中代码的修改)ui

<!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 怎么样？如何用？对于自定义插件如何避免冲突，若是调用！妈妈再不担忧本身的代码和别人冲突了