写好 JavaScript 的原则

• 各司其责

HTML / CSS / JavaScript 应该各司其责，避免由 JavaScript 直接操作样式，另外可以使用 class 来表示状态，最后纯粹的展示类交互尽量寻求零 JavaScript 的方案。

• 组件封装

组件：Web页面上抽出来一个个包含模板（HTML）、功能（JavaScript）和样式（CSS）的单元。好的组件应该具有封装性、正确性、扩展性和复用性。这是组件设计的原则

组件封装的基本方法/步骤是：HTML 进行结构设计，CSS 展现效果，JavaScript 进行行为设计，需分为功能 API 和控制流 Event两个方面。

重构：插件化（将控制因素抽取成插件，插件和组件之间通过依赖注入的方式建立联系）、模板化（将 HTML 模板化，以满足扩展性）、抽象化（将通用的组件模型抽象出来以满足复用性）。

• 过程抽象

含义：为了能够让“只执行一次”的需求覆盖不同的事件处理，将这个需求剥离出来。这个过程称为过程抽象。用来处理局部细节控制的一些方法；是函数式编程思想的基础应用。

课程例子：为了点击按钮后只调用一次“完成任务”，因为点击多次如果调用多次会出现错误，使用到了 Once 函数，将相关的 JavaScript 过程代码封装起来。Once的原理是对参数进行是否为 null 的判断，不为 null 则调用具体过程代码，否则不执行。

高阶函数

类似 Once 函数的这一类函数称为高阶函数，以函数作为参数，以函数值作为返回值，常用于作为函数装饰器。

function HOF0(fn) {
    return function(...args) {return fn.apply(this, args);}
}

常用的高阶函数（HOF）有 Once、Throttle（节流函数，有鼠标点击、数据自动保存（防抖）等应用）、Debounce、Consumer（同步的事件转为一定时间间隔的异步事件）、Iterative（实现批量操作）等函数。使用高阶函数可以大大减少使用非纯函数的可能性。

编程范式：

• 命令式：更强调怎么做
• 声明式：更强调做什么，相比于命令式更简洁

写代码最应关注什么

使用场景

Leftpad事件：

一个名为"left-pad"的小型 npm 模块从 NPM 上被撤销，导致众多的JavaScript项目无法再正常工作。

源代码：

function leftpad(str, len, ch) {
    str = String(str);
    var i = -1;
    if (!ch && ch !== 0) ch = ";
    len = len - str.length;
    while (++i < len) {
        str = ch + str;
    }
    return str;
}

• NPM 模块粒度
• 代码风格
• 代码质量/效率 优化后（代码更简洁，效率提升）：

function leftpad(str, len, ch) {
    Str = "" + str;
    const padBen = len - str.length;
    if(padLen <= 0) {
        return str;
    }
    return (""+ch).repeat(padLen)+str;
}