如何写好JavaScript？

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

1.重点内容

前端工程师在开发过程中需要养成的良好思维模式。

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

2.重要的知识点

• 各司其职
• 组件封装
• 过程抽象
• 高阶函数
• 为什么要使用高阶函数？
• 编程范式

3.详尽的知识点

各司其职

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

组件封装

组件就是包含好HTML，JS，CSS的单元

其中HTML负责结构，CSS负责表现，JS负责行为。

组件设计的原则围绕封装，正确，扩展，复用四个方面展开。

在封装的过程中的步骤

• HTML的结构设计
• CSS的展示效果
• JS的行为设计，包括相关功能的API和控制流的Event

组件重构

0. 插件化解耦

   • 将控制元素抽取成插件
   • 插件和组件之间通过注入的方式建立联系

1. 模板化解耦

   • 将HTML模板化，易于拓展

2. 组件框架的抽象化

   • 将组件的通用模型抽象出来

过程抽象

将某个方法抽象成一个高阶函数，以此来满足后续代码中的此方法多次调用

抽象出来的过程以高阶函数的形式存在，它接收一个函数作为参数，同时返回的也是函数。

在实际开发中，once函数，节流和防抖就是很好的过程抽象的例子。

高阶函数

• 以函数为参数
• 以函数为返回值
• 常用于作为函数装饰器

标准的高阶函数

其中HOF和内部其返回的函数是完全等价的。

function HOF(fu){
    return function(...args){
        return fn.apply(this,args)
    }
}

常用的高阶函数

• Once
• Throttle
• Debounce
• Consumer/2
• Iterative

为什么要使用高阶函数？

由于在编写过程中会出现很多的非纯函数，因此会导致调试时代码量增大。

而通过高阶函数，可以将非纯函数转化成纯函数，方便开发者的调试，提高库的可维护性。

编程范式

• 声明式

  • 逻辑式
  • 函数式

• 命令式

  • 面向过程
  • 面向对象

4.课后总结

这节课的节奏很快，因为跳过了JS的基本语法而直接开始讲JS的高阶用法，所以这节课是为我们后面的更高阶的方法打好基础。同时这节课中所讲述的内容在真实的开发环境中也经常会遇到，因此这节课的重要的知识点应该牢牢地记在脑海中，为之后的大项目做准备。