源码学习(一) classnames源码阅读和分析工作中经常会使用classnames这个库，极大的方便了组件里clas

碎碎念

工作中经常会使用classnames这个库，极大的方便了组件里class的控制。它提供了一个calssnames方法，一般是这么使用的

let cls = classnames({ 'basecls': true, 'cls2': boolean, 'cls3': boolean })

classnames会把一个对象转换为一个字符串(我们想要的classname)。从功能上看的出来，这是一个非常好用而且非常简单的库，那么就作为源码阅读之路的第一篇来试水吧。

文件结构

打开源码，可以看到三个文件分别是

index.js
bind.js
dedupe.js

核心代码

index.js看一下，核心内容即classnames函数，如下所示

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(' ');
    }

和预期的一样简单直接，其流程为

声明classes数组
遍历传入的参数
1. 如果是字符串或者数字，push到数组里
2. 如果是数组，递归这个数组，把结果push到数组里
3. 如果是对象，把这个对象的value为真的key push到数组里
返回classes.join(' ')

剩下一点疑问

index.js里的这段明显就是我们用的classnames方法了，但是跟index.js内容一模一样的bind.js和内容是多了去重的dedupe.js是干嘛的，如果有大佬路过还望解惑