最佳答案
jQuery UI 是一個基於 jQuery 的用戶界面跟交互組件庫，它供給了豐富的可重用 UI 把持項跟視覺後果。但是，在現實開辟過程中，用戶可能會碰到各種成績，這些成績可能會影響到利用的正常運轉。本文將揭秘 jQuery UI 運轉困難，並供給一些罕見成績的排查跟處理方法。
罕見成績及處理方法
1. jQuery UI 不起感化的原因
成績表示：導入正確，HTML 也正確，不任何報錯，但 jQuery UI 就是不起感化。
原因分析：
- 不正確引用 jQuery 文件。
- jQuery-UI 的文件必須要在 jQuery 文件後引入。
- 引用道路錯誤。
- 引用之前有 JavaScript 代碼錯誤使順序結束。
- 不正確引入 jQuery-UI 的 CSS 文件。
- HTML 代碼錯誤，比方標籤必須閣下閉合。
處理方法：
- 確保正確引用了 jQuery 文件，並且在 jQuery 文件後引入 jQuery-UI 文件。
- 檢查引用道路能否正確。
- 檢查 JavaScript 代碼能否存在錯誤。
- 確保正確引入了 jQuery-UI 的 CSS 文件。
- 檢查 HTML 代碼能否存在錯誤。
2. Layui 中 Jquery 靜態設置的 select 標籤載入時而正常時而掉效成績
成績表示：利用 Layui 框架時，jQuery 靜態設置的 select 標籤載入時而正常時而掉效。
原因分析：
- Layui 的 form 美化潤飾跟 jQuery 的 select 方法產生衝突。
- 受襯著速度差別影響，終極的 select 非同步載入成功與否也會差別。
處理方法：
- 在利用 jQuery 非同步載入實現之後，挪用 Layui 的重新襯著方法，對頁面重新襯著。
layui.use('form', function(){
// ...
});
3. 對於 jQuery UI 款式不克不及利用成績的處理
成績表示：jQuery UI 的款式無法利用。
原因分析：
- 將 jQuery 的 JS 放在了 jQuery UI 的 JS 前面。
- 在文檔載入實現之前運轉 jQuery 代碼。
處理方法：
- 確保先載入 jQuery，再載入 jQuery UI。
- 利用
(document).ready(function() {...});避免文檔在完全載入之前運轉 jQuery 代碼。
4. jQuery UI: TypeError: elem[type] is not a function
成績表示：在火狐瀏覽器中運轉時，呈現 TypeError: elem[type] is not a function 錯誤。
原因分析：
- 項目中引用了重複的 JS 文件。
處理方法：
- 刪除重複的 JS 文件。
5. jQuery 同步 Ajax 帶來的 UI 線程梗阻成績及處理辦法
成績表示：同步 Ajax 懇求招致 UI 線程梗阻。
原因分析：
- 同步 Ajax 懇求梗阻了 UI 線程。
處理方法：
- 利用非同步 Ajax 懇求。
- 利用
.Deferred()跟.when()實現非同步下達到同步履行的後果。
function getAjaxData() {
var defer = $.Deferred();
$.ajax({
url: '',
type: 'post',
data: '',
async: true,
dataType: 'json',
success: function(data) {
defer.resolve(data);
}
});
return defer;
}
$('#id').click(function() {
showLoading(); // 表現等待圖標
.when(getAjaxData())
.done(function(data) {
// ...
});
});
6. jQuery 版本保險漏洞成績
成績表示：jQuery 版本存在保險漏洞。
原因分析：
- 利用了過期的 jQuery 版本。
處理方法：
- 進級 jQuery 版本。
- 利用 jQuery Migrate 插件主動恢復放棄的 API。
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.js"></script>
總結
jQuery UI 是一個功能富強的 UI 組件庫，但在利用過程中可能會碰到各種成績。本文介紹了 jQuery UI 運轉中罕見成績的排查跟處理方法，盼望能幫助開辟者更好地利用 jQuery UI。