同一頁面中引入多個JS庫產生的沖突解決方案(轉)

  發生JS庫沖突的主要原因:與jQuery庫一樣,許多JS庫都使用‘$’符號作為其代號。因此在一個頁面中引入多個JS庫,并且使用‘$’作為代號時,程序不能識別其代表哪個庫(這個是我自己的解釋,但更深的原因就必須深入到jQuery的源碼中去分析了,因此本文暫不深入討論)。

  解決方案:

  解決JS庫沖突總共可以分為以下幾種方法:

    ①讓渡‘$’標示符,使用jQuery作為jQuery對象的標示符(別名)。

    ②使用別名替代‘$’和jQuery標識符,如下面的$j(名字可以任取)。

var $j=jQuery.noConflict();
$j("#div").hide();

    ③使用匿名函數

jQuery.noConflict();                                                                                                      
(function($) { $(function() {// 使用 $ 作為 jQuery 別名的代碼
  });
})(jQuery);                                                                                                      
... // 其他用 $ 作為別名的庫的代碼

  情況一:如果jQuery庫在其他庫之后導入

  方法:這種情況下,如何要使用‘$’作為其他庫的標識符,則要使用jQuery.noConflict()釋放jQuery對‘$’標識符的控制,把它(‘$’)讓位給第一個實現它的庫。

  例如:

<script type="text/javascript" src="http://axdhxyzx.blog.163.com/blog/other_lib.js"></script>
<script type="text/javascript" src="http://axdhxyzx.blog.163.com/blog/jquery.js"></script><script type="text/javascript">$.noConflict();    //讓渡$給第一個實現它的庫。
                                                                          jQuery("#div").hide();    //使用jQuery作為jQuery庫的標識符
                                                                          $("#div").hide();   // 使用另一個庫的 $ 的代碼
</script>

  也可以使用第二種方法,即使用別名。  例如:

<script type="text/javascript" src="http://axdhxyzx.blog.163.com/blog/other_lib.js"></script>
<script type="text/javascript" src="http://axdhxyzx.blog.163.com/blog/jquery.js"></script>                                                                             
<script type="text/javascript">var $j=$.noConflict();    //讓渡$給第一個實現它的庫。                                                                         $j("#div").hide();    //使用$j作為jQuery庫的標識符                                                                         $("#div").hide();   // 使用另一個庫的 $ 的代碼
</script>

  或者用第三種方法,即使用匿名函數  例如:

jQuery.noConflict();(function($) {   //匿名函數中用‘$’作為形參$(function() {// 使用 $ 作為 jQuery 別名的代碼
  });
})(jQuery);    //傳入jQuery作為形參的值
                                                                   
... // 其他用 $ 作為別名的庫的代碼

  情況二:如果jQuery在其他庫之前導入

  方法:在這種情況下,不必使用jQuery.noConflict()方法讓渡‘$’標識符。 例如:

<script type="text/javascript" src="http://axdhxyzx.blog.163.com/blog/jquery.js"></script>
<script type="text/javascript" src="http://axdhxyzx.blog.163.com/blog/other_lib.js"></script><script type="text/javascript">jQuery("#div").hide();    //使用jQuery作為jQuery庫的標識符
                                                                          $("#div").hide();   // 使用另一個庫的 $ 的代碼
</script>

  那么這里有一個疑問:為什么jQuery在其他庫之前導入不必使用jQuery.noConflict(),而在其他庫之后導入則要使用jQuery.noConflict()?

  此外,jQuery.noConflict()方法還可以帶有一個boolean類型的參數。這個參數的作用是:完全將 jQuery 移到一個新的命名空間(Completely move jQuery to a new namespace in another object.)

  這個參數主要是用于在同一頁面需要導入不同版本的jQuery時使用的,即創建一個全新的空間指向jQuery。(這個不怎么明白。

  例如:

var dom = {};
dom.query = jQuery.noConflict(true);結果:
dom.query("div p").hide();  // 新 jQuery 的代碼                                                           
$("content").style.display = "none";    // 另一個庫 $() 的代碼                                                           
jQuery("div > p").hide();    // 另一個版本 jQuery 的代碼

  總結:對于jQuery的JS庫沖突,我只知道了如何去解決。而并不知道具體的細節原因,而且具體的技術知識還不清晰,因此在接下來要努力地去尋找解決的方法。對于jQuery中的庫沖突,我還殘留的問題有:

  ①為什么jQuery在其他庫之前導入不必使用jQuery.noConflict(),而在其他庫之后導入則要使用jQuery.noConflict()?

  ②關于解決在同一頁面中引入不同版本的jQuery庫,使用jQuery.noConflict(true)解決的細節?(如:庫引入順序是否會導致不同的解決方式?等)

  ③為什么在同一頁面引入多個JS庫會引起錯誤,具體的原因是什么?

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/276356.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/276356.shtml
英文地址,請注明出處:http://en.pswp.cn/news/276356.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

不用安裝Oracle Client如何使用PLSQL Developer

1. 下載oracle的客戶端程序包&#xff08;30M&#xff09;只需要在Oracle下載一個叫Instant Client Package的軟件就可以了&#xff0c;這個軟件不需要安裝&#xff0c;只要解壓就可以用了&#xff0c;很方便&#xff0c;就算重裝了系統還是可以用的。下載地址&#xff1a;http…

input file的默認value清空與賦值方法

轉載鏈接&#xff1a;http://www.jb51.net/article/24872.htm出于安全性考慮&#xff0c;JS是不能直接設置File的value值的&#xff0c;下面是我總結出來的方法第1個方法是大多人傳統做法&#xff0c;替換HTML代碼&#xff0c;樓上的已經用到了&#xff0c;我不過是用正則優化一…

python中o_Python I/O與進程的詳細講解

I/Owith語句with context_expression [as target(s)]:with-bodycontext_expression返回值遵從上下文管理協議&#xff0c;包含__enter__()與__exit__()方法&#xff0c;as語句的target(s)得到的是__enter__()返回值&#xff0c;執行with-body后會調用上下文管理器的__exit__()方…

千層套路 - Vue 3.0 初始化源碼探秘

關注若川視野, 回復"pdf" 領取資料&#xff0c;回復"1"&#xff0c;可加群長期交流學習劉崇楨&#xff0c;微醫云服務團隊前端工程師&#xff0c;左手抱娃、右手持家的非典型碼農。9 月初 Vue.js 3.0 正式發布&#xff0c;代號 "One Piece"。大秘…

css網頁布局兼容性有哪些要點與訣竅

IE vs FFCSS 兼容要點&#xff1a;DOCTYPE 影響 CSS 處理FF: div 設置 margin-left, margin-right 為 auto 時已經居中, IE 不行FF: body 設置 text-align 時, div 需要設置 margin: auto(主要是 margin-left,margin-right) 方可居中FF: 設置 padding 后, div 會增加 height 和…

js 下拉底部加載|滑輪滾動到頁面底部ajax加載數據的實例

轉載鏈接&#xff1a;http://www.cnblogs.com/thinksley/archive/2013/05/12/3074237.html 滾動下拉到頁面底部加載數據是很多瀑布流網站的做法&#xff0c;那來看看配合jsonp是如何實現的吧&#xff0c;小菜總結記錄之用&#xff0c;高手勿噴。 當然本例子采用的是jquery庫&…

python并行for循環_Python并行執行for循環

簡介在介紹如何最簡單地利用 python 實現并行前&#xff0c;我們先來看一個簡單的代碼。words [apple, bananan, cake, dumpling]for word in words:print word上面的例子中&#xff0c;我們用一個 for 循環打印出 words 列表中的每個單詞。問題來了&#xff0c;這里我們打印完…

C語言之指針與數組總結

和指針相關的問題口訣1&#xff1a; 1. 地址變量得地址&#xff0c;得誰地址指向誰 和指針相關的問題要畫圖: 內容變量畫房子&#xff0c;指針畫箭頭 ---->口 ---------------------------------------------------- 和指針相關的兩個特殊運算符&#xff1a; 一、"&…

2020年大前端技術趨勢解讀

導Lead語如今的前端早已不再拘泥于滿足頁面展示&#xff0c;而是開始延展到通過全棧來閉環產品。這表明前端已經有能力透過業務深入產業&#xff0c;繼而影響商業結果。這種表象的改變背后是本質的轉變&#xff0c;從更為宏觀的角度來說&#xff0c;前端正在通過持續的技術革新…

HTML默認樣式表CSS屬性

轉載鏈接&#xff1a;http://www.xiao-a.com/index.php/archives/440.html 開始的時候 *{margin:0;padding:0;}&#xff0c;當需要使用邊距的時候&#xff0c;就需要還原HTML默認CSS值了。以前一直在找這份 文檔&#xff0c;今天偶然在w3上看到了。除了inline和block的定義&…

第六集 MSF構思階段項目團隊的組建

第六集 MSF構思階段項目團隊的組建__Note轉載于:https://www.cnblogs.com/zencorn/archive/2009/10/18/1585495.html

lc濾波器是利用電感的感抗_你對LC諧振電路你都了解嗎

根據在電路中電感器L和電容C的連接方式不同&#xff0c;可以有兩種LC諧振電路&#xff0c;LC并聯諧振電路和LC串聯諧振電路。LC并聯、串聯諧振電路在應用中的變化較多&#xff0c;是電路中分析的一個難點&#xff0c;只有掌握LC并聯、串聯電路的阻抗特性等基本概念&#xff0c;…

給小程序再減重 30% 的秘密?(京喜小程序首頁瘦身實踐)

前言—在 web 開發場景&#xff0c;減少代碼體積雖然是性能優化的一個方向&#xff0c;還沒到錙銖必較的程度。但是在小程序場景&#xff0c;由于代碼包上傳階段限制了主包 2M 和總包 16M&#xff08;近期微信官方正在內測將總包上限調整至 20M &#xff09;的尺寸&#xff0c;…

rfc mail content-type

轉載鏈接&#xff1a;http://www.w3.org/Protocols/rfc1341/0_TableOfContents.html RFC 郵件正文類型列表&#xff1a; Note: this is a hypertext versionof RFC1341 which has been obsoletedby RFC1521, of which no hypertextversion currently exists. Text …

Coolite Toolkit入門指南

Coolite Toolkit 簡介 Coolite Toolkit 是一個支持ASP.NET AJAX的Web控件Coolite Toolkit是基于跨瀏覽器的ExtJS 庫開發而來的&#xff0c;并且簡化了開發步驟&#xff0c;包含有豐富的Ajax運用Coolite Toolkit和ExtJS 都是開源的可能通過SVN直接獲取Coolite 的代碼簡單的說,就…

本周ASP.NET英文技術文章推薦[10/21 – 10/27]

這一篇是《本周ASP.NET英文技術文章推薦》系列的第一篇&#xff0c;在這個系列中&#xff0c;我將介紹5-10篇比較有價值的、本周發布的、與ASP.NET相關的英文技術文章&#xff0c;幫助各位朋友從良莠不齊的大量文章中挑出一些我認為非常有價值閱讀的&#xff0c;在進行一段簡要…

vim 離線安裝_VIM學習筆記 插件列表(Plugin)

由于zhihu的垃圾編輯器不支持表格&#xff0c;請查看以下完整格式&#xff1a;http://yyq123.github.io/learn-vim/learn-vim-plugin.html說明&#xff1a;本列表完全基于作者的主觀體驗&#xff0c;既不客觀也不完整&#xff1b;建議使用vim-plug或Vundle等插件管理器&#xf…

3 年前端面經和他在創業公司的成長歷程

在掘金上當了幾年的伸手黨&#xff0c;最近也準備輸出一些自己的東西。關于我首先介紹一下我自己&#xff0c;17 年畢業于一所 211 學校&#xff0c;但是由于大學四年馳騁在召喚師峽谷&#xff0c;畢業時也沒有找到一份大廠的工作&#xff0c;隨便找了一家創業公司簽了三方就去…

Spring.NET學習筆記9——打造簡易的依賴注入框架(練習篇) Level 100

我們在第三篇中學習里一個簡易的IoC框架。今天我們接著上次的程序&#xff0c;實現帶參數構造函數對象的實例和屬性的注入 。  我們知道可以通過反射獲取類的構造函數及參數(GetConstructors方法)&#xff1b;可以獲取屬性和屬性的類型(GetProperties方法)。通過Activator的C…