JavaScript >> Javascript 文檔 >  >> jQuery

給開發者的 15 個強大的 jQuery 提示和技巧

在本文中,我們將介紹 15 種 jQuery 技術,它們將有助於您有效地使用該庫。我們將從一些有關性能的提示開始,然後簡要介紹該庫的一些較晦澀的功能。

1) 使用最新版本的 jQuery

隨著 jQuery 項目中的所有創新,提高網站性能的最簡單方法之一就是使用最新版本的 jQuery。庫的每個版本都引入了優化和錯誤修復,大多數時候升級只涉及更改腳本標籤。

您甚至可以直接從 Google 的服務器中包含 jQuery,它為許多 JavaScript 庫提供免費的 CDN 託管。

<!-- Include a specific version of jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>

<!-- Include the latest version in the 1.6 branch -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>

後一個示例將在可用時自動包含最新的 1.6.x 版本,但正如 css-tricks 中所指出的,它僅緩存一個小時,因此您最好不要在生產環境中使用它。

2) 保持選擇器簡單

直到最近,使用 jQuery 檢索 DOM 元素是解析選擇器字符串、JavaScript 循環和內置 API(如 getElementById())的精心編排組合 , getElementsByTagName()getElementsByClassName() .但是現在各大瀏覽器都支持querySelectorAll() ,它理解 CSS 查詢選擇器並帶來顯著的性能提升。

但是,您仍然應該嘗試優化檢索元素的方式。更何況很多用戶還在使用老版本的瀏覽器,強制jQuery遍歷DOM樹,速度很慢。

$('li[data-selected="true"] a')   // Fancy, but slow
$('li.selected a')  // Better
$('#elem')  // Best

按 id 選擇是最快的。如果您需要按類名選擇,請在其前面加上標籤 - $('li.selected') .這些優化主要影響舊版瀏覽器和移動設備。

訪問 DOM 始終是每個 JavaScript 應用程序中最慢的部分,因此將其最小化是有益的。一種方法是緩存 jQuery 給你的結果。您選擇的變量將包含一個 jQuery 對象,您可以稍後在腳本中訪問它。

var buttons = $('#navigation a.button');

// Some prefer prefixing their jQuery variables with $:
var $buttons = $('#navigation a.button');

還有一點值得注意的是,jQuery 為方便起見為您提供了大量額外的選擇器,例如 :visible , :hidden , :animated 等等,它們不是有效的 CSS3 選擇器。結果是,如果您使用它們,庫將無法使用 querySelectorAll() .為了糾正這種情況,您可以先選擇要使用的元素,然後過濾它們,如下所示:

$('a.button:animated');   // Does not use querySelectorAll()
$('a.button').filter(':animated');  // Uses it

上面的結果是一樣的,只是第二個例子更快。

3) jQuery 對像作為數組

運行選擇器的結果是一個 jQuery 對象。但是,該庫通過定義索引元素和長度使其看起來好像在使用數組。

// Selecting all the navigation buttons:
var buttons = $('#navigation a.button');

// We can loop though the collection:
for(var i=0;i<buttons.length;i++){
    console.log(buttons[i]);    // A DOM element, not a jQuery object
}

// We can even slice it:
var firstFour = buttons.slice(0,4);

如果性能是您所追求的,請使用簡單的 for (或 while ) 循環而不是 $.each() ,可以讓你的代碼快幾倍。

檢查長度也是確定您的集合是否包含任何元素的唯一方法。

if(buttons){  // This is always true
    // Do something
}

if(buttons.length){ // True only if buttons contains elements
    // Do something
}

4) 選擇器屬性

jQuery 提供了一個屬性,其中包含用於啟動鏈的選擇器。

$('#container li:first-child').selector    // #container li:first-child
$('#container li').filter(':first-child').selector    // #container li.filter(:first-child)

儘管上面的示例針對的是相同的元素,但選擇器卻大不相同。第二個實際上是無效的——你不能用它作為一個新的 jQuery 對象的基礎。只是說明使用了filter方法來縮小集合範圍。

5) 創建一個空的 jQuery 對象

創建一個新的 jQuery 對象會帶來很大的開銷。有時,您可能需要創建一個空對象,然後用 add() 方法填充它。

var container = $([]);
container.add(another_element);

這也是 quickEach() 方法的基礎,您可以將其用作默認 each() 的更快替代方案 .

6) 選擇一個隨機元素

正如我上面提到的,jQuery 添加了自己的選擇過濾器。與庫中的其他所有內容一樣,您也可以創建自己的。為此,只需向 $.expr[':'] 添加一個新函數 目的。 Waldek Mastykarz 在他的博客上介紹了一個很棒的用例:創建一個用於檢索隨機元素的選擇器。您可以在下面看到他的代碼稍作修改的版本:

(function($){
    var random = 0;

    $.expr[':'].random = function(a, i, m, r) {
        if (i == 0) {
            random = Math.floor(Math.random() * r.length);
        }
        return i == random;
    };

})(jQuery);

// This is how you use it:
$('li:random').addClass('glow');

7) 使用 CSS 掛鉤

引入 CSS 鉤子 API 是為了讓開發人員能夠獲取和設置特定的 CSS 值。使用它,您可以隱藏特定於瀏覽器的實現,並公開一個統一的接口來訪問特定的屬性。

$.cssHooks['borderRadius'] = {
        get: function(elem, computed, extra){
            // Depending on the browser, read the value of
            // -moz-border-radius, -webkit-border-radius or border-radius
        },
        set: function(elem, value){
            // Set the appropriate CSS3 property
        }
};

// Use it without worrying which property the browser actually understands:
$('#rect').css('borderRadius',5);

更棒的是,人們已經構建了一個豐富的受支持 CSS 鉤子庫,您可以在下一個項目中免費使用。

8) 使用自定義緩動函數

您現在可能已經聽說過 jQuery 緩動插件 - 它允許您為動畫添加效果。唯一的缺點是這是訪問者必須加載的另一個 JavaScript 文件。幸運的是,您可以簡單地從插件文件中復制您需要的效果,並將其添加到 jQuery.easing 對象:

$.easing.easeInOutQuad = function (x, t, b, c, d) {
    if ((t/=d/2) < 1) return c/2*t*t + b;
    return -c/2 * ((--t)*(t-2) - 1) + b;
};

// To use it:
$('#elem').animate({width:200},'slow','easeInOutQuad');

9) $.proxy()

在 jQuery 中使用回調函數的一個缺點一直是,當它們由庫的方法執行時,上下文被設置為不同的元素。例如,如果你有這個標記:

<div id="panel" style="display:none">
    <button>Close</button>
</div>

然後你嘗試執行這段代碼:

$('#panel').fadeIn(function(){
    // this points to #panel
    $('#panel button').click(function(){
        // this points to the button
        $(this).fadeOut();
    });
});

你會遇到一個問題——按鈕會消失,而不是面板。使用 $.proxy ,你可以這樣寫:

$('#panel').fadeIn(function(){
    // Using $.proxy to bind this:

    $('#panel button').click($.proxy(function(){
        // this points to #panel
        $(this).fadeOut();
    },this));
});

這會做你所期望的。 $.proxy function 有兩個參數 - 你的原始函數和一個上下文。它返回一個新函數,其中 this 的值始終固定在上下文中。您可以在文檔中閱讀有關 $.proxy 的更多信息。

10) 確定頁面的權重

一個簡單的事實:你的頁面內容越多,瀏覽器渲染它的時間就越多。您可以通過在控制台中運行它來快速計算頁面上 DOM 元素的數量:

console.log( $('*').length );

數字越小,網站渲染速度越快。您可以通過刪除多餘的標記和不必要的包裝元素來優化它。

11) 把你的代碼變成一個 jQuery 插件

如果您花一些時間編寫一段 jQuery 代碼,請考慮將其轉換為插件。這促進了代碼重用、限制依賴關係並幫助您組織項目的代碼庫。 Tutorialzine 上的大部分教程都以插件的形式組織,因此人們可以輕鬆地將它們放到他們的站點中並使用它們。

創建一個 jQuery 插件再簡單不過了:

(function($){
    $.fn.yourPluginName = function(){
        // Your code goes here
        return this;
    };
})(jQuery);

閱讀關於將 jQuery 代碼轉換為插件的詳細教程。

12) 設置全局 AJAX 默認值

在您的應用程序中觸發 AJAX 請求時,您通常需要顯示某種指示,表明請求正在進行中。這可以通過顯示加載動畫或使用深色覆蓋來完成。在每個 $.get 中管理此指標 或 $.post 通話很快就會變得乏味。

最好的解決方案是使用 jQuery 的一種方法設置全局 AJAX 默認值。

// ajaxSetup is useful for setting general defaults:
$.ajaxSetup({
    url         : '/ajax/',
    dataType    : 'json'
});

$.ajaxStart(function(){
    showIndicator();
    disableButtons();
});

$.ajaxComplete(function(){
    hideIndicator();
    enableButtons();
});

/*
    // Additional methods you can use:
    $.ajaxStop();
    $.ajaxError();
    $.ajaxSuccess();
    $.ajaxSend();
*/

閱讀有關 jQuery 的 AJAX 功能的文檔。

13) 對動畫使用 delay()

鏈接動畫效果是每個 jQuery 開發人員工具箱中的強大工具。更容易被忽視的功能之一是您可以在動畫之間引入延遲。

// This is wrong:
$('#elem').animate({width:200},function(){
    setTimeout(function(){
        $('#elem').animate({marginTop:100});
    },2000);
});

// Do it like this:
$('#elem').animate({width:200}).delay(2000).animate({marginTop:100});

欣賞 jQuery 的 animation() 花了多少時間 拯救我們,想像一下如果你必須自己管理所有事情:你需要設置超時、解析屬性值、跟踪動畫進度、在適當的時候取消並在每一步更新大量變量。

閱讀有關 jQuery 動畫的文檔。

14) 利用 HTML5 數據屬性

HTML5 數據屬性是一種在網頁中嵌入數據的簡單方法。它對於在服務器和前端之間交換數據很有用,以前需要輸出

Tutorial JavaScript 教程
  1. 在 Hostinger 上為 React App 創建部署管道

  2. 即將到來的 OpenNMS – 2021 年 11 月 8 日

  3. Can'd Goodies:JavaScript 查詢字符串編碼和解碼

  4. 用 JavaScript 替換 HTML 中的文本

  5. tsParticles v1.10.3 發布

  6. 使用 Kubernetes 和 Google Kubernetes Engine 的可擴展 Node.js

  7. React Hooks 設計模式

  1. 這個堆棧是否過度設計?

  2. GitHub 包註冊表:Node.js 生態系統的優缺點

  3. document.body.innerHTML =是否清除網頁?

  4. Gatsby - 使用 Mailchimp 創建受眾

  5. 面試問題:反應

  6. 節點包管理器

  7. GitHub 上排名前 33 的 JavaScript 項目(2021 年 11 月)

  1. 使用 Node.js 和 MongoDB 創建 GraphQL 服務器

  2. 面試準備:反向鍊錶算法

  3. 如何使用 Google Doc API 接受 google doc 的樣式建議?

  4. 向表單添加輸入掩碼的最簡單方法