方法论

快速上手一个编程语言

• 使用此编程语言以及相关工具开发一个完整的项目
  如：NodeJS
• 使用 NodeJS 开发一个前后端交互的项目 => 论坛、博客 等。
  Node JS 框架可使用：express, koa, nest 等。
  前端框架可使用：vue, react, angular 等。
• 可能的流程为：前端通过接口访问 NodeJS 提供的接口，拿到数据渲染。
  NodeJS 接口的数据则是来自于自己数据库中的数据或他人的数据。

学编程语言

1. 掌握基语法
2. 掌握数据结构、基本类型
3. 在使用中学习数据类型的 API（语言的内置 API）
4. 应用以上几点编写一个最基本的 TODO（可以是任意应用，UI 或 CLI 形式等）
5. 在使用中学习相关框架、库、API 等。
6. 应用框架、库、API 等重写 TODO（任意应用）
7. 到这一步已经知晓适合自己的学习以及知道学什么了，所以仁者见仁、智者见智了，但以下两步却是可以学到被退休。
8. 深入学习此语言相关 lib 的原理，看看它们是怎么实现的。
9. 深入学习此语言的内置对象、结构、原理。如：javascript 原型链，Array，Java 的 JVM，Map 。

快速上手一个项目

1. 浏览目录结构
2. 查看 package.json、webpack.config.js 等配置文件，找到入口文件
   并启动项目。
3. 查看是否为SPA还是MPA（单页面/多页面），以下默认单页面
4. 找到路由配置，解决如何手动插入、删除路由
5. 尝试修改它们配置的路由及对应组件，看看是否可以成功修改
6. 知道如何发送请求、接受响应，如何进行一次完成的请求。

这样你就大致了解了这个项目的运行机制，就可以直接进行以这项目为基础的二次开发了。

深入了解一个项目

1. 熟悉项目的技术栈
2. 熟悉项目大致流程
   从 入口 -> 出口，项目如何运行的。
3. 熟悉项目整体流程
   从 入口 -> 出口，中间的运行过程。
4. 熟悉项目运行细节
   对页面进行操作时，知道这操作大概对应于代码的那个地方。
5. 有任意对项目进行增删改查的能力
   需求增加：知道此次需求应该加在项目的哪个地方，并且高内聚，低耦合。
   需求减少：知道该删除哪些代码
   需求改变：知道该修改哪些代码
   查找任意功能对应的代码在哪里。
   在做以上操作时，修改某模块时，都不会对项目的其他模块有根本影响。
6. 对项目所应用的技术栈了如指掌，并且需求来时知道该使用哪种合适的技术开发。

如何 debug

按流程 debug

1. 问题是什么？
   如：点击 Login 按钮后，登录页面卡住不同
   去到登陆页面，然后点击 Login，复现问题
2. 找到问题发生于何处？
   如：发生于登录页面
   找到代码中的登录页面代码
3. 问题如何发生的，怎么才能稳定触发问题的发生？
   如：每次点击 Login 按钮时，登录页面就会卡住不动。
   此时，就应该在代码中找到点击 Login 的函数
4. 为什么能稳定触发此问题的发生？
   如：在代码中，点击 Login 按钮时，执行代码，会进入死循环，导致页面卡住。
5. 解决问题后要达到什么效果？
   如：解决问题后达到的效果为：点击 Login 按钮，进入系统，而非卡在登陆界面。
6. 如何解决问题？
   如：将死循环代码解析，替换/删除即可解决。

7. 解决此问题后，会影响到其他任何地方吗？

   • 如果会影响，为什么会影响？影响是好还是坏？如果是坏的，那如何避免此影响的产生或如何解决此影响？
     如：会影响到模块 A，因为模块 A 依赖于此改动，此影响是不好的，只需要做 xxx 即可避免此影响/解决此影响
   • 如果是好的，那是否需要保留？保留 OR 不保留

按照以上的方式将一个问题剖析之后，就可以有个良好的思路去解决该问题。

将正确逻辑直线覆盖错误逻辑曲线，找到曲折点

假如存在bug，并且将逻辑看成是一条线，正确的是直线，错误的是曲线

1. bug 出现在代码的哪里
2. 是什么逻辑导致这 bug 的出现
3. 我们正确的逻辑是什么
4. 将正确的直线逻辑，覆盖错误的曲线逻辑时，找到出现曲折的地方，然后将错误的曲线逻辑修正成正确的直线逻辑，从而修复bug。

chrome 中 debug

以下指的都是在 chrome 浏览器中

浏览器快捷键

• 打开浏览器开发者模式

  F12

  windows: ctrl + alt + c
  mac: option + command + c

NOTICE: mac option, command 对应 widnow 分别是：alt, win

通过调用栈(call back) debug

当程序进入 debug 状态时，我们可以看到 Sources 栏，点进去在此栏的右边存在 Call Stack，这里就是存储当前浏览器压入栈中的函数。

我们可以点击任意一个帧（我们称一个函数的执行为帧），那么 Source 就会显示此帧所对应的源码。

这样，我们可以通过判断程序是否按照预期的执行顺序执行代码，或当哪个帧可能出现问题对此帧再 debug，从而快速的定位问题。

技巧

1. 在代码中快速定位一个回调函数所处的位置，可以直接打印这个函数，并在浏览器控制台查看，查看时点击一下，就能通过浏览器的 Sources 定位到所在位置。

   function yomua() {
   const name = yomua()
   console.log('_yomua', yomua) // 控制台即可查看此函数所在位置
   }

2. 打开浏览器开发者模式，在 Sources 中按下 shift + command + p / shift + win + p, 会弹出输入框，并显示 Run, 可以用它打开浏览器的功能，如: Search；
   可以按回车删除 Run，此时的功能是：通过输入文件名，查找当前网站的源文件。
3. 使用查找浏览器功能命令，输入：Search，可以看到定位到了 Search 面板，可以在此面板查找此网站中所有文件里面的内容。

如何快速实现需求

1. 分析需求
2. 若是复杂需求，则对其进行拆分，分为一个个小需求。
3. 将需求转换成逻辑
4. 将逻辑转换成代码