跟着月影学JavaScript|青训营笔记

笔记创作天数

这是我参与「第四届青训营」笔记创作活动的第3天

一、如何写好javascript的一些原则：

在课上月影讲述了以下三个原则：

各司其职
组件封装
过程抽象

三、各司其职

各司其职就是每个技负责自己所能实现的职责，HTML是整个页面的一个框架，CSS负责美化这个框架，而JavaScript是负责元素之间的互动。我们要写出高质量的代码，就应该让其各司其职互不干扰或尽量不干扰。

结论

HTML/CSS/JavaScript 各司其职
应当避免不必要的由 JS 直接操作样式
可以用 class 来表示状态
纯展示类交互寻求零 JavaScript 方案

四、组件封装

组件是指Web页面上抽出来一个个包含模板（HTML）、功能（JS）和样式（CSS）的单元。好的组件具备封装性、正确性、扩展性、复用性。

结论

组件设计的原则：封装性、正确性、扩展性、复用性
实现组件的步骤：结构设计、展现效果、行为设计
三次重构：1.插件化2.模板化3.抽象化(组件框架)

五、过程抽象

过程抽象⽤来处理局部细节控制的⼀些⽅法，是函数式编程思想的基础应⽤。

现在有以下需求，勾选任务前的复选框后该任务就会消失，过程中有过渡动画。

以下代码虽然可以实现需求，但是多次点击复选框的话会报错。所以我们要改进该代码，使其点击一次时再触发。

const list = document.querySelector('ul');
  const buttons = list.querySelectorAll('button');
  buttons.forEach((button) => {
    button.addEventListener('click', (evt) => {
      const target = evt.target;
      target.parentNode.className = 'completed';
      setTimeout(() => {
        list.removeChild(target.parentNode);
      }, 2000);
    });
  });

为了能够让“只执⾏⼀次”的需求覆盖不同的事件处理，我们可以将这个需求剥离出来。这个过程我们称为过程抽象

结论

用来处理局部细节控制的一些方法
函数式编程思想的基础应用