JavaScript中缺少五個有用的功能

JavaScript 的核心功能不斷完善，新增了許多類和函數來輔助程序員的工作。然而，一些基本的實用函數仍然缺失，需要藉助 jQuery、Prototype 和 MooTools 等庫來實現。雖然這些工具很好用，但在某些情況下，使用它們顯得有些繁瑣。本文將介紹五個我認為 JavaScript 應該內置的實用函數。

要點:

• JavaScript 缺少一些基本的實用函數，這些函數通常需要藉助 jQuery、Prototype 和 MooTools 等庫來實現。然而，對於一些需求來說，使用這些庫顯得過於繁瑣。
• getElementsByClassName() 函數並非所有版本的 Internet Explorer 都支持，但可以使用包裝函數來兼容舊版本。此函數使用類名檢索元素，這是 HTML5 之前所不具備的功能。
• extend() 函數用於合併兩個或多個對象，這在編寫插件時經常需要。此函數並非 JavaScript 的原生函數，但可以輕鬆構建。
• inArray() 函數並非 JavaScript 的原生函數，但可以編寫該函數來測試某個值是否在一個數組中。此函數可以使用 equals() 函數增強，以便在兩個對象具有相同的屬性和值時獲得匹配。
• toggleClass() 函數用於根據類名是否存在來添加或刪除元素的類名。

getElementsByClassName()

JavaScript 允許使用 getElementById() 函數通過其 ID 檢索元素，但在 HTML5 之前，沒有原生函數可以使用類名來獲取一個或多個元素。新的函數稱為 getElementsByClassName()，它在 Firefox 3 、Opera 9.5 、Safari 3.1 和所有版本的 Google Chrome 中可用。不幸的是，它並非所有版本的 Internet Explorer 都支持，這是 Web 設計師的頭號敵人瀏覽器。只有 Internet Explorer 9 支持 getElementsByClassName()，因此對於舊版本，需要一個包裝函數。我找到的最佳函數是由 Robert Nyman 編寫的。他的實現是在 MIT 許可下發布的，並且已被 WHATWG 推薦。它在支持它的瀏覽器中使用原生的getElementsByClassName() 方法，然後回退到鮮為人知的document.evaluate() 方法，該方法受舊版本的Firefox（至少從1.5 版本開始）和Opera（至少從9.27 版本開始）支持。如果所有方法都失敗，腳本將回退到遞歸遍歷 DOM 並收集與給定類名匹配的元素。代碼如下：

var getElementsByClassName = function (className, tag, elm){
  // ... (代码与原文相同) ...
};

extend()

如果您曾經編寫過插件，您幾乎肯定遇到過合併兩個或多個對象的問題。當您有一些默認設置並希望用戶能夠替換一些默認值時，這種情況經常發生。如果您使用的是 jQuery，您可以使用 extend()，但由於我們正在討論的是原生 JavaScript，壞消息是沒有原生函數。幸運的是，您可以輕鬆地自己構建它。下面的示例將向您展示如何創建與 jQuery 方法相同功能的代碼。我將我們的 extend() 方法添加到 Object 原型，以便所有對像都可以共享相同的方法。

var getElementsByClassName = function (className, tag, elm){
  // ... (代码与原文相同) ...
};

equals()

對像比較是一種非常常見的操作。雖然可以使用嚴格相等運算符（===）進行此測試，但有時您不想測試兩個變量是否引用內存中的同一對象。相反，您想知道兩個對像是否具有相同的屬性和相同的值。下面的代碼正是這樣做的。請注意，以下代碼並非我寫的；它屬於一個名為 crazyx 的用戶。同樣，equals() 已添加到 Object.prototype。

Object.prototype.extend = function() {
  // ... (代码与原文相同) ...
};

inArray()

JavaScript 沒有原生方法來測試某個值是否在一個數組中。我們將編寫一個函數，正如您可能預期的那樣，如果該值存在則返回 true，否則返回 false。此函數只是將給定值與數組的每個元素進行身份比較。與前兩個示例一樣，inArray() 被添加到 Array 類的原型屬性。

Object.prototype.equals = function(x) {
  // ... (代码与原文相同) ...
};

此函數由於其簡單性，在許多情況下無法按預期工作。雖然它適用於字符串和數字等基本類型，但如果您比較對象，它只會在函數找到相同對象時返回 true。為了更好地理解它的工作原理，讓我們來看下面的例子。

Array.prototype.inArray = function (value) {
  // ... (代码与原文相同) ...
};

改進後的 inArray() 函數如下：

// ... (代码与原文相同) ...

toggleClass()

另一個經常在 jQuery 中使用的函數是 toggleClass()。它根據類名是否存在來添加或刪除元素的類名。一個簡單的 toggleClass() 版本如下所示。

Array.prototype.inArray = function (value) {
  // ... (代码与原文相同) ...
};

改進後的 toggleClass() 函數如下：

function toggleClass(id, className) {
  // ... (代码与原文相同) ...
}

結論

本文重點介紹了我認為 JavaScript 中缺少的一些最重要的函數。當然，JavaScript 還缺少其他一些東西，我們將在接下來的幾週內看到。但是，現在，我想指出以下幾點：

• 像 jQuery 這樣的框架有很多有用的函數，但它們會增加開銷。因此，如果您只需要幾個函數，請使用原生 JavaScript 並將您需要的函數分組到一個外部文件中。
• 如果您使用了在新的 JavaScript 版本中引入的函數，請不要刪除它。用條件語句將其包裝起來，以測試它是否受支持，如果不受支持，則使用您的舊代碼，如 getElementsByClassName() 中所示。這樣，您將繼續支持舊瀏覽器。
• 盡可能將函數添加到對象的原型，如 extend() 中所示。所有實例都將共享相同的方法，並且性能會更好。
• 盡可能重用您的代碼，如 toggleClass() 的第二個版本中所示。

圖片保持原格式和位置不變。

以上是JavaScript中缺少五個有用的功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！