Css-In-Js实现classNames库源码解读

Css-In-Js实现classNames库源码解读

什么是Css-In-Js？

在传统的前端开发中，我们一般会把 HTML、CSS 和 JavaScript 三种语言分开编写，相互之间独立存在。但是，随着前端项目和业务逻辑的复杂，我们往往需要同时管理大量的样式和 JavaScript 代码，同时还要保证代码的可维护性和可复用性。Css-In-Js 就是为了解决这个问题而出现的一种解决方案。它将 CSS 样式直接写在 JavaScript 中，使得 CSS 和 JavaScript 可以更加紧密地结合，同时可以提供更多的高级特性，如动态样式、模块化组件、代码分割等。

什么是classNames库？

classNames 库是一个可以快速生成 CSS class 名字的 JavaScript 工具库，它的主要作用是将一组字符串格式的 class 名称连接成一个字符串，以逗号隔开。它的用法非常简单，只需要将每个 class 名称作为一个参数传入函数，并使用空格隔开即可：

var classNames = require('classnames');

classNames('foo', 'bar'); // 'foo bar'
classNames('foo', { bar: true }); // 'foo bar'
classNames({ 'foo-bar': true }); // 'foo-bar'
classNames({ 'foo-bar': false }); // ''
classNames(null, false, 'foo', undefined, 0, 1, { baz: null }, ''); // 'foo 1'

如何实现classNames库？

下面我们来看一下 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)) {
      classes.push(classNames.apply(null, arg));
    } else if (argType === 'object') {
      for (var key in arg) {
        if (hasOwn.call(arg, key) && arg[key]) {
          classes.push(key);
        }
      }
    }
  }

  return classes.join(' ');
}

首先，我们定义了一个 classNames 函数。该函数里面使用一个循环遍历传入的所有参数。对于每个参数，我们使用 typeof 来判断其类型。如果是字符串或数字，则将其直接加入 classNames 列表中。如果是数组，则递归地调用 classNames 函数，并将返回值存入 classNames 列表中。如果是对象，则遍历对象及其原型链中的所有属性，并只添加值为真的属性名称到 classNames 列表中。最终，我们使用 join 函数将 classNames 列表中的所有类名用空格连接起来，并返回连接后的字符串。

示例说明

下面我们将看两个示例，分别演示如何在 React 和 Vue 项目中使用 classNames 库：

示例1：在 React 项目中使用 classNames 库

import React, { Component } from 'react';
import classNames from 'classnames';

class Button extends Component {
  render() {
    const { small, primary, danger, className, children } = this.props;
    const classes = classNames(
      'btn',
      { 'btn-sm': small },
      { 'btn-primary': primary },
      { 'btn-danger': danger },
      className
    );
    return <button className={classes}>{children}</button>;
  }
}

export default Button;

在这个示例中，我们定义了一个 Button 组件，其中包含三个可能的属性：small、primary 和 danger，分别表示按钮的大小和颜色。我们使用 classNames 将这三个属性转化为对应的类名，然后将它们连成一个字符串，并存入 button 元素的 className 属性中。这样可以大大简化组件的使用方法，同时也可以保证渲染出来的 HTML 元素具有相应的样式效果。

示例2：在 Vue 项目中使用 classNames 库

<template>
  <div :class="classes">
    {{ message }}
  </div>
</template>

<script>
import classNames from 'classnames';

export default {
  name: 'MyComponent',
  props: {
    primary: Boolean,
    danger: Boolean,
    className: String
  },
  computed: {
    classes() {
      return classNames(
        { 'my-component': true },
        { 'my-component-primary': this.primary },
        { 'my-component-danger': this.danger },
        this.className
      )
    }
  },
  data() {
    return {
      message: 'Hello, World!'
    }
  }
}
</script>

在这个示例中，我们定义了一个名为 MyComponent 的 Vue 组件，其中包含两个可能的属性：primary 和 danger，分别表示组件的颜色。我们使用 computed 属性来将这两个属性转化为对应的类名，然后将它们连成一个字符串，并绑定到组件的 class 属性中。这样可以让组件具有相应的样式，同时也可以在页面中方便地定制样式。