碼上快樂

相關內容    簡體    繁體

bootstrap之noConflict的詳解

本文轉載自   查看原文   2015-06-30 11:07   2089    Bootstrap/ bootstrap

　　翻開推特框架，不經發現，幾乎所有的插件都會出現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 怎么樣？如何用？對於自定義插件如何避免沖突，如果調用！媽媽再不擔心自己的代碼和別人沖突了

 


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 jQuery.noConflict() 詳解Bootstrap面板組件 詳解Bootstrap導航組件 詳解Bootstrap表單組件 Bootstrap 輪播（Carousel）詳解 Bootstrap使用詳解 詳解Bootstrap網格系統 詳解Bootstrap媒體對象 詳解Bootstrap按鈕組件 詳解Bootstrap列表組組件
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM