动画解说重构：代码精炼带来的强大力量

2024-01-27 20:28:37

熬夜做了几晚动画解说重构，确实学到了很多东西。

做动画解说，最头疼的是修改，很多场景或者要素都需要更改。用传统的方式做的话，改起来很费劲。

于是，我就把动画做了一个重构。动画是软件，重构的过程就是软件重构的过程。

我们先来看下面这个代码：

const render = (state) => {
  const lines = [];
  lines.push(`<div>Header</div>`);
  lines.push(`<div>Content</div>`);
  lines.push(`<div>Footer</div>`);
  return lines.join('');
};

这段代码用于渲染一个简单的网页。它包含三个部分：页眉、内容和页脚。

现在，假设我们想在页眉中添加一个标题。

const render = (state) => {
  const lines = [];
  lines.push(`<div>Title</div>`);
  lines.push(`<div>Header</div>`);
  lines.push(`<div>Content</div>`);
  lines.push(`<div>Footer</div>`);
  return lines.join('');
};

我们只需要在lines数组中添加一行即可。

但是，如果我们想在内容中添加一个新的段落呢？

const render = (state) => {
  const lines = [];
  lines.push(`<div>Header</div>`);
  lines.push(`<div>Content</div>`);
  lines.push(`<p>New paragraph</p>`);
  lines.push(`<div>Footer</div>`);
  return lines.join('');
};

我们又需要在lines数组中添加一行。

这样改起来很麻烦，而且容易出错。

我们可以把lines数组中的代码提取出来，分别放到不同的函数中。

const renderHeader = () => {
  return `<div>Title</div>
          <div>Header</div>`;
};

const renderContent = (state) => {
  return `<div>Content</div>
          <p>New paragraph</p>`;
};

const renderFooter = () => {
  return `<div>Footer</div>`;
};

const render = (state) => {
  return renderHeader() + renderContent(state) + renderFooter();
};