我的编程方法论

成长目标

锻炼解决工程问题的能力，将学到的技术转化为工程成果

卓越地解决工程问题能力离不开扎实的理论知识和丰富的项目实践，也离不开优秀的工具

工具

工欲善其事，必先利其器

• WebStorm - WebStorm 是一个适用于 JavaScript 和相关技术的集成开发环境
• VSCode - 最强大的文本编辑器
• Postman - 用于接口调试
• Xmind - 用来制作思维导图
• PlantUML - 通过纯文本的方式来生成 UML 图
• Confluence - 一个专业的企业知识管理与协同软件，也可以用于构建企业 wiki

编码指导原则

1. 前端永远只做两件事，get 和 set 数据
2. 要么从数据输入端解决问题，要么从数据输出端解决问题
3. 没有 debugger 不出的 bug，只有没有耐心 debugger 的 bug
4. 状态复杂度只会转移而不会消失，在合适的位置处理状态
5. 做到 don't repeat yourself 是写出好代码的重要一步
6. 一个成熟的系统既有输出，也有输入
7. 一个方法（函数）/变量只做一件事
8. 中心化的状态可以与多个独立系统交互
9. 脱离具体业务场景谈技术没有任何意义
10. 粗心大意往往是程序发生意外的主要原因

Runtime

Runtime 是指程序在运行时的状态和行为。在计算机编程中，Runtime 是指程序在实际运行中所表现出来的一种状态。它包括了程序的执行环境和执行状态，以及程序在运行时所产生的各种数据和结果。 JS 的 runtime 如下：

• 浏览器
• node.js
• 其他小众运行时，比如 Deno/Bun

JS 使用总结

如何理解状态变化？

JS 是一种事件驱动的语言，绝大部分业务场景下状态的变化由于事件触发，那么数据输入端就在事件处理函数中

前端只有 input 和 textarea 获取用户输入内容

如何使用错误处理？

只要有 I/O 的地方，必须有错误处理。比如各类请求/文件读写/存储读写等等

同步代码

try {
  // I/O handler
} catch (e) {
  // record handler error
}

异步代码

Promise.reject("error").catch((e) => {
  // record handler error
});

什么时候用函数，什么时候用类？

函数在 JS 中是一等公民。所以对于单一的业务逻辑，使用函数可以满足，如果有很多业务逻辑并且这些业务逻辑做相同的事，就可以封装成类

Async/Await 与 Promise 使用

使用 Async/Await 会阻塞后面的代码。使用 Promise.then() 不会阻塞后面的代码。所以推荐在代码中首先使用 Promise.then()

串行请求

async function fetchAll() {
  await request1();
  await request2(); // 等待 request1 执行完再执行
}

fetchAll();

并行请求

function fetchAll() {
  // request1 和 request2 同时执行
  request1();
  request2();
}

fetchAll();

如何快速熟悉业务代码？

把代码跑起来，走一遍业务流程，关键地方使用断点，搞清楚每一个方法（函数）的作用

前端工程化

前端工程化，就是指对前端进行一些流程的标准化，让开发变得更有效率，且更好地做产品交付

组件思维

组件是一种高度的抽象设计，将业务逻辑和业务状态抽象为独立可复用的单元。用一句话讲，组件是对状态和与状态相关的业务逻辑的封装。组件由业务状态、业务逻辑和 DOM 片段组成。组件是一种或一类业务场景的具体实现，解决大型项目中代码复用等问题

组件是一个抽象事物，既为事物，那么便有创建、运行和销毁的过程，所有组件有挂载、更新和卸载阶段。

组件具有天然的状态隔离性，相当于组件是独立封闭的单元。而在 SPA 应用中，页面上的功能由许多组件组合而成。在这个过程中，多个组件之间不可避免的要共享某些状态。为了实现这些功能，就需要打破组件的状态隔离性，让状态在这些组件内流转，加强组件之间的关联性。这个过程就是组件通信

在组件中，如果方法中涉及组件状态，那么方法需要定义在组件内，否则定义在组件外。由此可以抽象出若方法中涉及的状态不属于当前的系统，那么最好在系统外定义该方法

框架/库使用指导

严格遵守框架/库的使用规范，拒绝反模式是写出优雅代码的基本准则

彻底理解框架/库的 API 使用原则是写出正确代码的关键