Classnames库代码解读

Published: · LastMod: April 07, 2024 · 220 words

classnames库是日常工作中用来操作dom中class相关的工具函数，这里我们对它进行解读

使用

npm install classnames –save

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

function classNames() {
    let classes = [];

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

        const arg = arguments[i]

        if(typeof arg === 'string' || typeof arg === 'number') {
            // 直接插入
            classes.push(arg)
        } else if (Array.isArray(arg)) {
            // 子项是数组，递归调用自己
            arg.length && classes.push(classNames.call(null, arg))
        } else if(typeof arg === 'object') {
            // 判断是不是object, 是就进行遍历
            if(arg.toString() === Object.prototype.toString()) {
                for(let key in arg) {
                    if(arg[key]) {
                        classes.push(arg[key])
                    }
                }
            } else {
                // 不是object, 直接转成字符串
                classes.push(arg.toString())
            }
        }

    }

    return classes.join(' ')
}
js