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 怎麼樣？如何用？對於自定義插件如何避免衝突，若是調用！媽媽再不擔憂本身的代碼和別人衝突了

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程