你无法拒绝的头条前端面试：真实经历

2023-09-14 01:38:18

我前几天参加了头条的前端面试，面试官是一位非常有经验的工程师，人也很随和。面试过程很顺利，但让我印象深刻的是，面试官在最后问我了一个问题，让我至今记忆犹新。

面试官问我："你能否用compose实现一个函数，使得这个函数能够指定当前组件的依赖及其版本？如果组件使用者在项目中安装了其他版本的同一依赖，会提示报错。"

我当时有点懵，因为我从来没有听说过compose这个东西。面试官看出了我的疑惑，于是他耐心地给我解释了一下。

compose是一个函数组合的高阶函数，它可以将多个函数组合成一个新的函数。新的函数将依次执行各个组成函数，并将前一个函数的输出作为后一个函数的输入。

例如，我们可以使用compose将两个函数组合成一个新的函数，如下所示：

const add = (a, b) => a + b;
const multiply = (a, b) => a * b;

const addAndMultiply = compose(multiply, add);

console.log(addAndMultiply(2, 3)); // 10

在上面的例子中，我们使用compose将add和multiply这两个函数组合成了一个新的函数addAndMultiply。当我们调用addAndMultiply函数时，它将先调用add函数，将2和3相加，得到5。然后，它将调用multiply函数，将5和2相乘，得到10。

面试官让我用compose实现一个函数，使得这个函数能够指定当前组件的依赖及其版本。如果组件使用者在项目中安装了其他版本的同一依赖，会提示报错。

我当时想了很久，终于想出了一个解决方案。

const createComponent = (name, dependencies) => {
  const component = () => {
    // 检查依赖项的版本是否正确
    for (const dependency of dependencies) {
      if (dependency.version !== installedVersions[dependency.name]) {
        throw new Error(`依赖项 ${dependency.name} 的版本不正确，期望版本为 ${dependency.version}，实际版本为 ${installedVersions[dependency.name]}`)
      }
    }

    // 渲染组件
    return <div>{name}</div>
  }

  // 缓存组件的依赖项
  component.dependencies = dependencies;

  return component;
}

const installedVersions = {
  "react": "17.0.2",
  "react-dom": "17.0.2"
}

// 创建一个组件
const MyComponent = createComponent("MyComponent", [
  { name: "react", version: "17.0.2" },
  { name: "react-dom", version: "17.0.2" }
])

// 渲染组件
ReactDOM.render(<MyComponent />, document.getElementById("root"))