写好JavaScript的一些原则：
- 各司其职。让HTML、CSS和JavaScript职能分离；应当避免不必要的由JS直接操作样式；可以用class表示状态；纯展示类交互寻求零JS方案。
- 组件封装。好的UI组件具备正确性、扩展性、复用性。
- 过程抽象。应用函数式编程思想。
重构—模板化：
- 解耦：将HTML模板化，更易于扩展。
组件框架—抽象：
- 将组件通用模型抽象出来。
组件设计的原则： 封装性、正确性、扩展性、复用性。
实现组件的步骤： 结构设计、展现效果、行为设计
代码的三类重构： 插件化、模板化、抽象化（组件框架）
过程抽象： 为了能够让“只执行一次”的需求覆盖不同的事件处理，我们可以将这个需求剥离出来。这个过程我们称为过程抽象。
- 用来处理局部细节控制的一些方法。
- 函数式编程思想的基础应用。
高阶函数（传入一个组件或函数，同时返回一个组件或函数，常用于作为函数装饰器），如下方图片所示：
function once(fn){
return function(...args){
if(fn){
const ret = fn.apply(this, args);
fn = null;
return ret;
}
else return null
}
}
解析：
这个函数的作用是保证传入的函数 fn 只会被执行一次。当调用返回的函数多次时，只有第一次调用会触发执行 fn 函数。
这段JavaScript代码定义了一个名为 once 的函数。下面是这个函数的解释和作用：
- 这个函数接受一个参数
fn，它可以是任意函数。 once函数返回一个新的函数，这个函数可以被多次调用，但实际上只会执行一次传入的fn函数。- 返回的函数使用了剩余参数语法
...args，意味着它可以接受任意数量的参数。 - 函数内部使用了条件判断和闭包的概念来实现只执行一次的效果。
- 每当返回的函数被调用时，它会检查
fn是否存在。如果存在，就将传入的参数args应用到fn函数上，并将执行结果赋给ret变量。然后将fn设为null，表示函数已经执行过，再次调用时将不会执行。 - 最后，返回
ret变量的值。
后续的调用都不会再触发执行传入的函数，而是直接返回第一次调用时的结果，是因为在第一次调用时，通过将 fn 设置为 null ，将传入的函数引用清空了。
在 JavaScript 中，函数是一种特殊的对象，它可以通过变量来引用和传递。当我们将函数赋值给一个变量时，实际上是将函数对象的引用赋给了该变量。这样，变量就可以作为函数的别名来调用函数。
在给定的 once 函数中， fn 是一个局部变量（实际是一个闭包），用于存储传入的函数。当第一次调用返回的函数时，通过 fn = null 将 fn 变量设置为 null 。由于 JavaScript 是按值传递的，此操作不会影响传入的函数本身，而只是将 fn 变量的引用从函数对象移除。
因此，后续的调用时，条件判断 if(fn) 的结果为 false ，因为 fn 已经是 null 。这意味着传入的函数已经不存在了，无法再执行。实际上，每次调用返回的函数时，它只返回了第一次调用时存储的结果，而不会再次执行传入的函数。
通过将 fn 设为 null ，我们确保了只有第一次调用时会执行传入的函数，后续调用仅仅返回第一次调用时的结果。这样就实现了函数只执行一次的效果。
一般高阶函数实例：
function HOF0(fn) {
return function(...args){
return fn.apply(this, args);
}
}
