透過 jQuery API 裡的 noConflict() 方法宣告於變數中，調用舊版 jQuery 函式庫對應舊版插件。
基本多本版 jQuery 共用同頁面
See the Pen 解決 jQuery 版本衝突問題與同頁共用多版本 by Jimmy_Wu (@Jimmy_Wu) on CodePen.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <p class="jq-old"></p> <p class="jq-new"></p> <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script> <script>var $_111 = jQuery.noConflict(true);</script> <script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script> console.log('$().jquery', $().jquery); // 取得目前使用的 jQuery 版本方式一 console.log('$_111.fn.jquery', $_111.fn.jquery); // 取得目前使用的 jQuery 版本方式二 var EL_jqOld = $('.jq-old'); var EL_jqNwe = $_111('.jq-new'); EL_jqOld.text('jQuery 新版本變數 $：'+EL_jqOld.jquery); EL_jqNwe.text('jQuery 舊版本變數 $_111：'+EL_jqNwe.jquery); </script> |
$().jquery 與 $.fn.jquery 查看 jQuery 版本號
- $().jquery 與 $.fn.jquery 都是查看 jQuery 版本的方法。
- $().jquery 針對選取對象做 jQuery 的版號查詢。
- $.fn.jquery 只能針對 jQuery 的函式庫核心直接做查詢，透過對象無法有動作。
jQuery.noConflict() 指定於變數內讓頁面共用多版本號 jQuery
- noConflict 在中文的意思是指沒衝突。
- 為了避免全域性名稱空間汙染，jQuery 提供了 jQuery.noConflict() 方法解決變數衝突。
- jQuery.noConflict() 方法允許在同一個頁面，載入多個 jQuery 來實現使用新舊版共用於同頁面，或是不同的 jQuery 版本所對應支援的插件。
- 透過 jQuery.noConflict(true) 將先前版本 jquery-1.11.0.min.js 函式庫以區域變數的型式，存於 $_111 變數中，而後方的 jquery-3.4.1.min.js 沒有指定變數，可以直接使用 jQuery API 原生 $ 使用。
指定舊版 jQuery 版與 RWD-Table-Patterns 舊版插件結合新版 Bootstrap 4 jQuery 共頁使用
jQuery RWD-Table-Patterns 插件是 Responsive table (自適應表格)，依賴於 Bootstrap 3 使用，裡面的功能有篩選顯示、Focus 選定、Table 頭滑動固定等等。
之前開發時有用過不同版號的 jQuery 函式庫結合 RWD-Table-Patterns 插件但有產生問題，使用 jQuery 的 jQuery.noConflict() 方法就可透過調用不用的函式庫，來操作對應的插件版號，達到更好的相容性讓維護不因為某些插件對應函式庫來做取捨。
插件與框架連結
接著要處理的部份主要分為下面幾個步驟
- css 與插件樣式
- 舊版 jQuery 與舊版插件引入順序與宣告變數取用
- 新版 jQuery 與相關新版插件
CSS 與插件樣式
CSS 與樣式的部份處理在一起是沒問題，只需要注意是不是有重復的樣式還有樣式比重的問題，加入下面二段在 head 裡。
1 2 | <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"> <link rel="stylesheet" href="http://gergeo.se/RWD-Table-Patterns/css/rwd-table.min.css?v=5.3.2"> |
這裡先理出有用到的 cassName
- .table-small-font 為 RWD-Table-Patterns 插件專用樣式。
- 在 Bootstrap 的外層加入 .table-responsive 樣式，在表格外會多個水平的捲軸操作過寬的表格。
- 新舊版 jQuery 在函式中取用
舊版 jQuery 與舊版插件引入順序與宣告變數取用
1 2 3 | <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script> <script src="http://gergeo.se/RWD-Table-Patterns/js/rwd-table.js?v=5.3.2"></script> <script>var $_111 = jQuery.noConflict(true);</script> |
- 裡面提到使用的版號是 jQuery (>=1.11.0) & Bootstrap 3 (>=3.1.1)
- jQuery.noConflict(true) 注意舊插件是否在宣告變數的前面
需要先將舊版與舊插件引入到頁面中，其中所使用到的 <script>var $_111 = jQuery.noConflict(true);</script> 是用來將舊版的 jQuer 函式庫宣告在 $_111 中，舊版的插件要在 jQuery 使用 jQuery.noConflict(true) 前，這樣在引用時才不會有取不到，主要的概念是因為 JavaScript 是逐行讀下來，如果在整包的函式庫前沒取到相關的舊插件內容與程式的話，是無法讓宣告舊變數拿來取用，這就是 JavaScript hoisting。
新版 jQuery 與相關新版插件
1 2 3 | <script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script> |
新版的 jQuery 主要針對 Bootstrap 4 所用到的插件為對象，在 Bootstrap 裡是使用 Nav 導航列，只要在 HTML 裡的 <body> 內照官方文件的結構帶入就可，如果可以正常運作的話是可以在行動版時出現漢寶按鈕做收閤操作選單。
新舊版 jQuery 在函式中取用
1 2 3 4 5 6 7 8 9 10 | // 外層使用新版的 jQuery $ load 事件，內層使用舊版 jQuery $_111 取用對象與插操作。 $(function() { $_111('.js-rwdTable').responsiveTable({ addDisplayAllBtn: true, addFocusBtn: true, i18n:{ focus : '焦點', display : '不顯示', displayAll: '顯示全部' } }); }); |
- 外層使用新版的 jQuery $ 函式庫 load 事件
- 內層 $_111 使用是舊版 jQuery 函式庫來做選取對象。
- 在 RWD-Table-Patterns 插件的部份，受到操作的對象啟用樣式名稱 .js-rwdTable 為 jQuery_1.11 舊版選取。
- .responsiveTable() 方法舊插件，裡面的 {} 針對選取的對象做設定，其中的 i18n: 就是做多語系客製文字內容。
Bootstrap 4 的群組按鈕不同於 3 版，主要是 4 版有針對 flex 齊右變成一個工具類型的樣式，所以原本是齊右的按鈕組會跑到左方，而切也沒有原本 3 版的 .btn-default 的基本色彩樣式，所以才會是空白按鈕。
See the Pen 解決 jQuery 版本衝突問題與同頁共用多版本-2-整合 bootstarp 4 與 RWD-Table-Patterns jQuery Plugin by Jimmy_Wu (@Jimmy_Wu) on CodePen.