React?classnames原理及測試用例

更新時間：2022年12月19日 16:22:04 作者：codeniu

這篇文章主要為大家介紹了React?classnames原理及測試用例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

前言

本期的源碼閱讀任務是：

學會 classnames 的用法
學會 classnames 的原理
測試用例的使用

源碼地址：JedWatson/classnames: A simple javascript utility for conditionally joining classNames together (github.com)

classnames 的用法

Classname 是一個 JavaScript 庫，它允許您有條件地將類名連接在一起。在構建 React 組件或需要根據某些條件動態(tài)生成類名時，它可能非常有用。

下面是一個如何使用 classnames 的例子:

import classnames from 'classnames';
const Button = ({ primary, size }) => {
  const classes = classnames('btn', {
    'btn-primary': primary,
    'btn-large': size === 'large',
    'btn-small': size === 'small',
  });
  return <button className={classes}>Click me</button>;
};

在上面的示例中，classnames 函數接受一個類名和一個將類名映射為布爾值的對象。如果給定類名的布爾值為 true，則該類名將包含在類名的最終列表中。如果值為 false，則不包括類名。

還可以將一個字符串作為第二個參數傳遞給類名，在這種情況下，如果值為 true，那么它將被添加到類名的最終列表中。

const classes = classnames('btn', primary && 'btn-primary');

學會 classnames 的原理

classnames 源碼并不復雜，除去一些兼容性判斷，主要功能實現(xiàn)的代碼如下：

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)) {
      if (arg.length) {
        var inner = classNames.apply(null, arg);
        if (inner) {
          classes.push(inner);
        }
      }
    } else if (argType === "object") {
      if (
        arg.toString !== Object.prototype.toString &&
        !arg.toString.toString().includes("[native code]")
      ) {
        classes.push(arg.toString());
        continue;
      }
      for (var key in arg) {
        if (hasOwn.call(arg, key) && arg[key]) {
          classes.push(key);
        }
      }
    }
  }
  return classes.join(" ");
}

主要工作原理如下：

函數聲明了一個名為 class 的空數組，該數組將用于存儲生成的類名。
然后，函數進入一個循環(huán)，循環(huán)遍歷傳遞給函數的參數。對于每個參數，執(zhí)行以下步驟:
檢查參數的類型。如果它是一個字符串或數字，添加到類數組。
如果參數是數組，則函數檢查它是否為非空。如果是，則函數以數組元素作為參數遞歸地調用自身，并將結果添加到類數組中。
如果參數是一個對象，那么函數將檢查它是否有一個 toString 方法，該方法不是本機 Object.Prototype.toString 方法。如果是這樣，調用 oString 的結果將添加到類數組中。如果不是，函數將遍歷對象自己的可枚舉屬性，并將屬性名稱添加到類數組中(如果它們的對應值為真)。
循環(huán)結束后，將類數組合并到一個單獨的字符串中，使用一個空格字符作為分隔符，并返回結果字符串。

測試用例的使用

className 庫使用 Mocha 進行代碼測試：

Mocha 是一個運行在 Node.js 和瀏覽器上的 JavaScript 測試框架。它用于編寫和運行 JavaScript 代碼的測試用例。

使用 Mocha 寫測試用例的簡單示例：

const assert = require("assert");
describe("myFunction", () => {
  it("should return the expected result", () => {
    assert.equal(myFunction(1, 2), 3);
  });
});

it 函數用于定義單個測試用例。
斷言模塊用于驗證函數是否返回預期的結果。

一些測試用例

describe('classNames', function () {
    // 測試能夠識別具有真值得對象
    it('keeps object keys with truthy values', function () {
            assert.equal(classNames({
                    a: true,
                    b: false,
                    c: 0,
                    d: null,
                    e: undefined,
                    f: 1
            }), 'a f');
    });
    // 檢查 classNames 函數是否正確地處理了其輸入參數中的假值，并且只在生成的類名字符串中包含真值。
    it('joins arrays of class names and ignore falsy values', function () {
            assert.equal(classNames('a', 0, null, undefined, true, 1, 'b'), 'a 1 b');
    });
    // 這個測試用例檢查 classNames 函數是否正確地處理了各種不同類型的參數
    it('supports heterogenous arguments', function () {
            assert.equal(classNames({a: true}, 'b', 0), 'a b');
    });
    // 這個測試用例檢查 classNames 函數是否正確地從生成的類名字符串中刪除了前導空格和尾隨空格。
    it('should be trimmed', function () {
            assert.equal(classNames('', 'b', {}, ''), 'b');
    });
    // 這個測試用例檢查 classNames 函數在調用時是否返回一個空字符串，該函數的唯一參數是一個空對象。
    it('returns an empty string for an empty configuration', function () {
            assert.equal(classNames({}), '');
    });
    // ... 省略部分測試用例
});