深入浅出，看懂classnames源码，掘开前端工具库之秘

2023-06-22 19:11:37

什么是 Classnames？

在前端开发中，经常需要动态地添加和移除多个 CSS 类名。Classnames 应运而生，为处理这一问题提供了一个轻量级的 JavaScript 库。它允许轻松高效地操作 CSS 类名，实现更灵活的样式控制。

深入 Classnames 源码

安装和导入

npm install classnames --save
import classnames from 'classnames';

源码结构

classnames.js
└── index.js

核心逻辑位于 index.js 文件中。下面逐行解析其工作原理。

export default function() {
  var classes = [];

  for (var i = 0; i < arguments.length; i++) {
    var arg = arguments[i];
    if (!arg) continue;

    var argType = typeof arg;

    if (argType === 'string' || argType === 'number') {
      classes.push(arg);
    } else if (Array.isArray(arg) && arg.length) {
      var inner = classnames.apply(null, arg);
      if (inner) {
        classes.push(inner);
      }
    } else if (argType === 'object') {
      for (var key in arg) {
        if (arg[key]) {
          classes.push(key);
        }
      }
    }
  }

  return classes.join(' ');
};

代码解析

参数处理

for (var i = 0; i < arguments.length; i++) {
    var arg = arguments[i];
    if (!arg) continue;

函数接受任意数量的参数，逐一处理。跳过假值参数。

类型判断

var argType = typeof arg;

if (argType === 'string' || argType === 'number') {
    classes.push(arg);
}

字符串或数字参数直接推入 classes 数组。

数组处理

else if (Array.isArray(arg) && arg.length) {
    var inner = classnames.apply(null, arg);
    if (inner) {
      classes.push(inner);
    }
}

数组参数递归调用 classnames 函数，转换其元素为字符串并推入 classes 数组。

对象处理

else if (argType === 'object') {
    for (var key in arg) {
      if (arg[key]) {
        classes.push(key);
      }
    }
}

对象参数遍历其键值对，如果值不为假，则将键推入 classes 数组。

返回结果

return classes.join(' ');

最后，将 classes 数组中的元素以空格分隔并返回。

应用场景

动态添加和移除 CSS 类名

const MyComponent = () => {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div className={classnames({ 'open': isOpen })}>
      <h1>Hello World!</h1>
    </div>
  );
};

在 React 组件中，可以使用 classnames 动态地为元素添加或移除 CSS 类名。上述代码在 isOpen 为 true 时，会为 div 元素添加 open 类名。

条件性添加 CSS 类名

const MyComponent = () => {
  const isError = true;

  return (
    <div className={classnames('form-group', { 'error': isError })}>
      <input type="text" />
    </div>
  );
};