React?classnames原理及測試用例

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

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

前言

本期的源碼閱讀任務(wù)是：

學(xué)會(huì) classnames 的用法
學(xué)會(huì) classnames 的原理
測試用例的使用

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

classnames 的用法

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

下面是一個(gè)如何使用 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 函數(shù)接受一個(gè)類名和一個(gè)將類名映射為布爾值的對象。如果給定類名的布爾值為 true，則該類名將包含在類名的最終列表中。如果值為 false，則不包括類名。

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

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

學(xué)會(huì) classnames 的原理

classnames 源碼并不復(fù)雜，除去一些兼容性判斷，主要功能實(shí)現(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(" ");
}

主要工作原理如下：

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

測試用例的使用

className 庫使用 Mocha 進(jìn)行代碼測試：

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

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

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

it 函數(shù)用于定義單個(gè)測試用例。
斷言模塊用于驗(yàn)證函數(shù)是否返回預(yù)期的結(jié)果。

一些測試用例

describe('classNames', function () {
    // 測試能夠識(shí)別具有真值得對象
    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 函數(shù)是否正確地處理了其輸入?yún)?shù)中的假值，并且只在生成的類名字符串中包含真值。
    it('joins arrays of class names and ignore falsy values', function () {
            assert.equal(classNames('a', 0, null, undefined, true, 1, 'b'), 'a 1 b');
    });
    // 這個(gè)測試用例檢查 classNames 函數(shù)是否正確地處理了各種不同類型的參數(shù)
    it('supports heterogenous arguments', function () {
            assert.equal(classNames({a: true}, 'b', 0), 'a b');
    });
    // 這個(gè)測試用例檢查 classNames 函數(shù)是否正確地從生成的類名字符串中刪除了前導(dǎo)空格和尾隨空格。
    it('should be trimmed', function () {
            assert.equal(classNames('', 'b', {}, ''), 'b');
    });
    // 這個(gè)測試用例檢查 classNames 函數(shù)在調(diào)用時(shí)是否返回一個(gè)空字符串，該函數(shù)的唯一參數(shù)是一個(gè)空對象。
    it('returns an empty string for an empty configuration', function () {
            assert.equal(classNames({}), '');
    });
    // ... 省略部分測試用例
});