如何写好JavaScript ｜ 青训营笔记

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

1. 写好JS的一些原则

• 各司其责：让HTML、CSS和JavaScript职能分离。HTML、CSS和JavaScript各自承担自己的角色，HTML负责去描述网站结构，CSS主要是负责网站的展示表现，JavaScript负责交互内容。

• 组件封装：将UI组件封装起来再去使用，做好组件封装。

• 过程抽象：应用函数式编程思想。不仅要做数据抽象，还要掌握过程抽象，可以让代码有更好的扩展性和复用能力，变得更加通用，会涉及函数式编程范式。

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

2. 组件封装

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

什么时候需要封装

如果一块内容在项目中出现了两次就要考虑是否应进行封装。（一个组件、一个函数、一个css 只要是需要多次使用的都可以考虑封装）

封装原则

封装的组件必须具有高性能，低耦合的特性，封装的组件为子组件，引用封装组件的地方叫父组件。

设计一个UI组件基本方法：

• 结构设计
• 展现效果
• 行为设计：
  • API（功能）通常是设计接口来操作
  • Event（控制流）通常是自定义事件来解耦

重构：插件化

解耦

• 将控制元素抽取成插件
• 插件与组件之间通过依赖注入方式建立联系
• 将HTML模板化，更易于扩展（数据驱动，根据数据来生成模板）

---

组件框架

抽象

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

组件封装总结

• 组件设计的原则:封装性、正确性、拓展性、复用性
• 实现组件的步骤：结构设计、展现效果、行为设计
• 三次重构：
  • 插件化
  • 模板化
  • 抽象化（组件框架）

3. 过程抽象

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

操作次数限制：一些异步交互、一次性的HTTP请求

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

4. 高阶函数

特点：以函数作为参数； 以函数作为返回值；常用于作为函数装饰器。 Once：为了能够让“只执行一次”的需求覆盖不同的事件处理，我们可以将这个需求剥离出来。这个过程我们称为过程抽象

HOF（高阶函数）：以函数作为参数；以函数作为返回值；常用于作为函数装饰器

常用高阶函数：

• Once
• Throttle
• Debounce
• Consumer/2
• lterative

5. 编程范式

总结：

• 过程抽象，HOF，装饰器
• 命令式，声明式

个人体会：

如果是作为一名前端工程师，在完成功能的同时，还要注意开发的细节，并且认真学习如何写好JavaScript，如何做好组件封装、过程抽象等，提高封装性、正确性、拓展性、复用性。