《classnames源码》阅读笔记

源码目录总览

参考官方文档中的内容，我们可以知道classnames 有一个主要版本（index）和两个替代版本 （分别是dedupe 和 bind）。在看目录的时候也可以发现 classnames 具有多个对外暴露的入口。

• index.js是classnames的主要使用的版本
• dedupe.js是classnames中一个可选的，用于删除重复数据的版本
• bind.js是classnames中另一个可选的，用于css modules形式的版本
• *.d.ts是定义类型的文件
• bower.json是包管理工具bower的配置文件（后面会提到bower和npm的区别）
• tests/目录下是classnames三个版本的测试文件以及一个适用于测试代码的类型文件
• benchmarks/目录用于存放benchmarks相关的文件（benchmarks是一个检测代码性能的工具）

用法概述

安装

 # via npmnpm install classnames# via yarn yarn add classnames 

一般用法

 // 引入包import classnames from 'classnames';// 接收多个字符串作为参数classnames('classA', 'classB') // => classA, classB// 接收字符串 和 对象作为参数（对象的值可以为 true || false）classnames('classA', { classB: true }) // => classA, classB// 接收字符串 和 对象作为参数（对象的值也可以是一个返回 true || false 的表达式）classnames('classA', { classB: 1 < 2 }) // => classA// 接收一个对象作为参数，对象的键名是对应的类名，对象的值的规则与上面一致classnames({ classA: true, classB: false }) // => classA// 接收多个对象作为参数，对象的键与值的规则与上面一致classnames({ classA: true }, { classB: true }) // => classA, classB// 接收一个数组作为参数classnames(['classA', { classB: false }, { classC: 1 }]) // => classA, classC// 接收数组和其它类型参数的组合classnames(['classA', { classB: false }], 'classC') // => classA, classC// 需要注意的特殊例子！// 当存在针对同一个类的不同值时，只要其中一个值是真值，就会应用这个类（与这个值的计算顺序无关）classnames('classA', true ? 'classB' : '', { classB: false }) => classA, classBcla