underscore.js _.noConflict()用法及代碼示例

Underscore.js是javascript中的庫，可簡化數組，字符串，對象的操作。
_.noConflict()函數用於創建全局下劃線對象“_”對另一個變量的引用。

注意：在瀏覽器中使用下劃線函數之前，非常有必要鏈接下劃線CDN。鏈接underscore.js CDN時“_”作為全局變量附加到瀏覽器。

用法:

_.noConflict()

參數：此函數不接受任何參數。

返回值：它返回對全局下劃線變量的引用。

範例1：不使用noConflict()函數且使用“underscore”變量時。

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js"> 
    </script> 
</head> 
  
<body> 
  
    <p>Click the given below button</p> 
  
    <button> 
        button 
    </button> 
  
    <script> 
        let btn = document.querySelector("button"); 
        let p = document.querySelector("p") 
  
        // Creating a array 
        let arr = [2, 3, 1, 2, 5, 1]; 
  
        // Declaring underscore variable 
        let underscore; 
  
        // Creating a function  
        let func = () => { 
  
            // Changing text of paragraph  
            // on button click 
            p.innerText = "button is clicked"; 
  
            // Sorting the array 
            arr = underscore.sortBy(arr,  
                (e) => { return Math.round(e) }) 
            console.log(arr) 
        } 
        btn.addEventListener("click", func); 
    </script> 
</body> 
  
</html>

輸出：

未單擊按鈕時：
單擊按鈕時：

範例2：使用noConflict()函數時。

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js"> 
    </script> 
</head> 
  
<body> 
  
    <p>Click the given below button</p> 
  
    <button> 
        button 
    </button> 
  
    <script> 
        let btn = document.querySelector("button"); 
        let p = document.querySelector("p") 
        let arr = [2, 3, 1, 2, 5, 1]; 
  
        // Using underscore as a reference 
        // to global _ variable 
        let underscore = _.noConflict(); 
  
        // Creating a function named func` 
        let func = () => { 
            p.innerText = "button is clicked"; 
            arr = underscore.sortBy(arr,  
                (e) => { return Math.round(e) }) 
            console.log(arr) 
        } 
          
        // Adding event listner to button 
        btn.addEventListener("click", func); 
    </script> 
</body> 
  
</html>

輸出：

未單擊按鈕時：
單擊按鈕時：

相關用法

注：本文由純淨天空篩選整理自tarun007大神的英文原創作品 Underscore.js _.noConflict() Function。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。