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

如何写好JavaScript

1.各尽其责：

让CSS,JavaScript,HTML职能分离，例如在JavaScript中控制夜间模式本来是使用dom去操作节点直接控制样式，到修改成JavaScript修改样式类名，使用CSS来编写实际样式效果。最后可以直接优化成CSS的伪类来操作样式。最终的结论就是避免JavaScript直接操作样式，可以使用class来修改样式状态，尽量寻求零JS方案。

2.组件封装：

组件是指由HTML,CSS,JavaScript抽离组成的单元。它具有可扩展性，可复用性，封装性，正确性。JavaScript一般用来控制组件的状态，在控制组件状态时可以使用自定义事件来进行触发解耦。传统的我们可以用API流来实现组件，这样的缺点就是不够灵活，不容易扩展。 插件化，让我们的组件变得可拔插，比如可以在轮播图中，把轮播和左右翻页，指示点分为三个插件，他们之间用一个实例进行依赖注入传递，每个插件执行不同的任务，但是共用一个轮播图实例。这样可以很容易的扩充功能。 模板化,把组件的HTML部分，使用render函数来进行渲染。好处在于组件的属性和值更易于控制和理解。总结实现组件的步骤，分为三步：结构设计，展现效果，行为设计。

3.过程抽象：

抽象组件中一部分处理控制逻辑的方法，是函数式编程的基础。

  function once(fn) {
    return function(...args) {
      if(fn) {
        const ret = fn.apply(this, args);
        fn = null;
        return ret;
      }
    }
  }

以上代码为了能够让“只执行一次“的需求覆盖不同的事件处理，我们可以将这个需求剥离出来。这个过程我们称为过程抽象，且上述代码为高阶函数。一般的情况下参数是函数,或者返回值是函数即为高阶函数。

编程范式

命令式编程

 let list = [1, 2, 3, 4];
  let mapl = [];
  for(let i = 0; i < list.length; i++) {
    mapl.push(list[i] * 2);
  }

命令式：告诉编译器该做什么。即就告诉编辑器“如何做“。

声明式编程

  let list = [1, 2, 3, 4];
  const double = x => x * 2;
  list.map(double);

声明式：告诉编译器“做什么”。如何做的部分，将被抽象到普通函数（也称”高阶函数）

效率|风格|约定|使用场景？

在设计一个算法或者函数时，最应该关心的应该是使用场景，一个O(n)和一个O(logn)的算法函数块在没有特定的场景下双方都能完成任务，但是后者需要精心设计，如果在时间不充分的情况下，前者也能完成相同的任务，也不会说后者就一定比前者好用。
以下代码是否优秀？

function isUnit(m) {
  return m[0] === 1 && m[1] === 0 && m[2] === 0
    && m[3] === 1 && m[4] === 0 && m[5] === 0;
}

如果第一眼看上去可能不是太优秀，但是如果场景固定的情况下，需要很快计算出结果，这就是最好的解决方案，好的代码不一定是要用太高级的设计模式，相反越简洁越适合它的场景就是最好的。

如何写好JavaScript | 青训营笔记

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