首頁 > web前端 > js教程 > JavaScript中缺少五個有用的功能

JavaScript中缺少五個有用的功能

Joseph Gordon-Levitt
發布: 2025-02-25 10:10:10
原創
617 人瀏覽過

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() 的第二個版本中所示。

Five Useful Functions Missing in Javascript

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

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

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板