classList.js 源码剖析：让老版本浏览器支持 classList 属性

2023-12-30 22:10:57

在 HTML5 中，classList 属性被提出，它为元素的类操作提供了更简单和更便捷的方式。然而，在老版本的浏览器中，该属性并不存在。为了弥补这一缺憾，classList.js 诞生了。它是一个 JavaScript 库，旨在为老版本的浏览器提供 classList 属性，以便支持对元素的类进行方便的处理。

在本篇文章中，我们将对 classList.js 的源码进行分析，以便更好地理解它的实现原理。在开始之前，我们先来了解一下 classList 属性的用途。

classList 属性简介

classList 属性是一个只读属性，它返回一个包含元素所有类名的 DOMTokenList 对象。DOMTokenList 对象是一个类似于数组的对象，它提供了对类名的操作方法，例如添加、删除和切换类名。

classList 属性的用法非常简单。以下是一些示例：

// 向元素添加一个类名
element.classList.add("my-class");

// 从元素中删除一个类名
element.classList.remove("my-class");

// 切换元素的类名，如果类名存在则删除它，否则添加它
element.classList.toggle("my-class");

// 检查元素是否包含某个类名
element.classList.contains("my-class");

classList.js 源码分析

classList.js 的源码非常简洁，它只有 100 多行代码。在分析之前，我们先来看一下它的代码结构：

(function(window) {
  if (!('classList' in document.documentElement)) {
    document.documentElement.classList = new ClassList();
  }

  function ClassList() {
    this.classList = [];
  }

  ClassList.prototype = {
    add: function(className) {
      if (!this.classList.includes(className)) {
        this.classList.push(className);
      }
    },

    remove: function(className) {
      var index = this.classList.indexOf(className);
      if (index > -1) {
        this.classList.splice(index, 1);
      }
    },

    toggle: function(className) {
      if (this.classList.includes(className)) {
        this.remove(className);
      } else {
        this.add(className);
      }
    },

    contains: function(className) {
      return this.classList.includes(className);
    }
  };
})(window);

从代码结构中，我们可以看出 classList.js 主要由以下几个部分组成：

ClassList 构造函数：该构造函数用于创建一个 ClassList 对象，它包含一个空数组来存储类名。
ClassList 原型对象：该原型对象定义了 add、remove、toggle 和 contains 等方法，用于操作类名。
全局执行函数：该函数用于检查浏览器是否支持 classList 属性，如果不支持，则为 document.documentElement 元素创建一个 ClassList 对象。

classList.js 工作原理

classList.js 的工作原理非常简单。当浏览器不支持 classList 属性时，它会为 document.documentElement 元素创建一个 ClassList 对象，然后将这个对象赋值给 document.documentElement.classList。这样，所有的元素都可以通过 document.documentElement.classList 来访问 classList 属性。

当开发者使用 classList 属性时，classList.js 会将操作委托给 ClassList 对象。例如，当开发者调用 element.classList.add("my-class") 时，classList.js 会调用 ClassList 对象的 add 方法，将 "my-class" 添加到 element 元素的类名列表中。