classnames 源码学习笔记与解读

news2024/11/14 2:51:08

前言

这里我引用源码文档中的一句话来作为开场白： A simple JavaScript utility for conditionally joining classNames together.

话不多说，咱们直接开始 classnames 的源码学习。

核心源码解读

直接来看它的源码部分，以下这是 classnames 的核心源码，核心源码不过才四十几行，让我们一步步解读一下都是什么意思吧。

 var hasOwn = {}.hasOwnProperty; function classNames () {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 (hasOwn.call(arg, key) && arg[key]) {classes.push(key);}}}}return classes.join(' ');}

这里的 hasOwnProperty 这个方法是用来判断对象的属性是否属于自己本身。

整个源码里做了三个 if 类型判断。首先定义 classes 存储数组，然后遍历 arguments 拿到所有的参数；如果该项的值为 undefined、null 之类的就直接跳过；通过 var argType = typeof arg 获取该项的类型，然后 push 到 classes 中就可以了。

这里面对我而言比较难懂的是这段代码：

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

查阅资料得知这里利用 递归+apply 达到数组扁平化的效果，说的简单点就是将数组分拆成参数传入 classNames 函数中。

最后 return 用 join 方法将数组变为字符串，用空格隔开。

这里介绍一下参数类型的判断：

如果是 string 或者 number，直接 push 进 classes 中
如果是数组，则通过 classNames.apply(null, arg)，将数组分拆成参数传给 classNames 函数进行递归
如果是对象，遍历对象，如果 arg[key] 为真,则 push 进 classes 数组

classnames 运用

在 react 项目中，经常使用到 className。使用如下：

<div className="box1"></div>

.box1{color:blue;
}

但是缺点也很明显，如果想动态添加类名，className 就有点吃力了。因此这时候就需要 classnames 了。使用 npm install classnames 安装。

众所周知，classnames 是一个库函数，使用方法有很多种，下面介绍一种比较常用的写法。

import classnames from 'classnames';

<div className={classnames({box1:true , box2: false},'box3')}></div>

// 用 className 方式表示如下

<div className="box1 box3"></div>