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 并收集与给定类名匹配的元素。代码如下：

<code class="language-javascript">var getElementsByClassName = function (className, tag, elm){
  // ... (代码与原文相同) ...
};</code>

extend()

如果您曾经编写过插件，您几乎肯定遇到过合并两个或多个对象的问题。当您有一些默认设置并希望用户能够替换一些默认值时，这种情况经常发生。如果您使用的是 jQuery，您可以使用 extend()，但由于我们正在讨论的是原生 JavaScript，坏消息是没有原生函数。幸运的是，您可以轻松地自己构建它。下面的示例将向您展示如何创建与 jQuery 方法相同功能的代码。我将我们的 extend() 方法添加到 Object 原型，以便所有对象都可以共享相同的方法。

<code class="language-javascript">var getElementsByClassName = function (className, tag, elm){
  // ... (代码与原文相同) ...
};</code>

equals()

对象比较是一种非常常见的操作。虽然可以使用严格相等运算符（===）进行此测试，但有时您不想测试两个变量是否引用内存中的同一对象。相反，您想知道两个对象是否具有相同的属性和相同的值。下面的代码正是这样做的。请注意，以下代码并非我写的；它属于一个名为 crazyx 的用户。同样，equals() 已添加到 Object.prototype。

<code class="language-javascript">Object.prototype.extend = function() {
  // ... (代码与原文相同) ...
};</code>

inArray()

JavaScript 没有原生方法来测试某个值是否在一个数组中。我们将编写一个函数，正如您可能预期的那样，如果该值存在则返回 true，否则返回 false。此函数只是将给定值与数组的每个元素进行身份比较。与前两个示例一样，inArray() 被添加到 Array 类的原型属性。

<code class="language-javascript">Object.prototype.equals = function(x) {
  // ... (代码与原文相同) ...
};</code>

此函数由于其简单性，在许多情况下无法按预期工作。虽然它适用于字符串和数字等基本类型，但如果您比较对象，它只会在函数找到相同对象时返回 true。为了更好地理解它的工作原理，让我们来看下面的例子。

<code class="language-javascript">Array.prototype.inArray = function (value) {
  // ... (代码与原文相同) ...
};</code>

改进后的 inArray() 函数如下：

<code class="language-javascript">// ... (代码与原文相同) ...</code>

toggleClass()

另一个经常在 jQuery 中使用的函数是 toggleClass()。它根据类名是否存在来添加或删除元素的类名。一个简单的 toggleClass() 版本如下所示。

<code class="language-javascript">Array.prototype.inArray = function (value) {
  // ... (代码与原文相同) ...
};</code>

改进后的 toggleClass() 函数如下：

<code class="language-javascript">function toggleClass(id, className) {
  // ... (代码与原文相同) ...
}</code>

结论

本文重点介绍了我认为 JavaScript 中缺少的一些最重要的函数。当然，JavaScript 还缺少其他一些东西，我们将在接下来的几周内看到。但是，现在，我想指出以下几点：

• 像 jQuery 这样的框架有很多有用的函数，但它们会增加开销。因此，如果您只需要几个函数，请使用原生 JavaScript 并将您需要的函数分组到一个外部文件中。
• 如果您使用了在新的 JavaScript 版本中引入的函数，请不要删除它。用条件语句将其包装起来，以测试它是否受支持，如果不受支持，则使用您的旧代码，如 getElementsByClassName() 中所示。这样，您将继续支持旧浏览器。
• 尽可能将函数添加到对象的原型，如 extend() 中所示。所有实例都将共享相同的方法，并且性能会更好。
• 尽可能重用您的代码，如 toggleClass() 的第二个版本中所示。

图片保持原格式和位置不变。

以上是JavaScript中缺少五个有用的功能的详细内容。更多信息请关注PHP中文网其他相关文章！