2022年3月

第一周

日期 早 午 晚 复习内容 完成度
2月28日 Koa2 + Puppeteer打造『爬虫系统』 Koa2 + Puppeteer打造『爬虫系统』 Koa2 + Puppeteer打造『爬虫系统』 JSONP 90%
3月1日 Koa2 + Puppeteer打造『爬虫系统』 Koa2 + Puppeteer打造『爬虫系统』 Koa2 + Puppeteer打造『爬虫系统』 cookie 90%
3月2日 Koa2 + Puppeteer打造『爬虫系统』 Koa2 + Puppeteer打造『爬虫系统』 Koa2 + Puppeteer打造『爬虫系统』 表单 80%
3月3日 React + Koa2打造『JS++官网管理后台』 React + Koa2打造『JS++官网管理后台』 React + Koa2打造『JS++官网管理后台』 文件上传 90%
3月4日 React + Koa2打造『JS++官网管理后台』 React + Koa2打造『JS++官网管理后台』 React + Koa2打造『JS++官网管理后台』 创建XMLHttpRequest对象 90%
3月5日 React + Koa2打造『JS++官网管理后台』 React + Koa2打造『JS++官网管理后台』 React + Koa2打造『JS++官网管理后台』 状态码 90%
3月6日 复习 复习 复习 复习 80%

资料：

知识总结：

  • puppeteer是什么？
    nodejs提供的一个库，实现爬虫页面程序，它提供一个高级API来通过DevTools协议来控制chrome

  • redis是什么？
    C语言开发用于键值存储数据库，专门处理大量数据的高访问负载

  • 数据库创建步骤：

    1. 定义入口文件导入数据库配置信息
    2. 创建一个数据库(new Sequelize(数据库名称, MySQL用户名密码, 配置项))
    3. 定义各种表模型(new Sequelize().define(表名称, 配置字段对象))
    4. 执行同步(new Sequelize().sync())将表导入数据库
    5. 定义数据项
    6. 对数据项进行增删改查(new TeacherService())
    7. 数据入库(addTeacher(data))

  • redis终端操作：

    • 找到redis目录：C:\Program Files\Redis
    • 终端1：开启服务.\redis-server

    • 终端2：进入服务器.\redis-cli

      • 查询keys *
      • 获取get 'xxx'
      • 设置set name 'xxx'

第二周

日期 早 午 晚 复习内容 完成度
3月7日 React + Koa2打造『JS++官网管理后台』 React + Koa2打造『JS++官网管理后台』 React + Koa2打造『JS++官网管理后台』 XMLHttpRequest版本 80%
3月8日 Koa2 SSR打造『JS++官方网站』 Koa2 SSR打造『JS++官方网站』 Koa2 SSR打造『JS++官方网站』 XMLHttpRequest兼容性 80%
3月9日 Koa2 SSR打造『JS++官方网站』 Koa2 SSR打造『JS++官方网站』 Koa2 SSR打造『JS++官方网站』 XMLHttpRequest五个事件 90%
3月10日 Koa2 SSR打造『JS++官方网站』 Koa2 SSR打造『JS++官方网站』 Koa2 SSR打造『JS++官方网站』 异步和数据响应 90%
3月11日 Koa2 SSR打造『JS++官方网站』 Koa2 SSR打造『JS++官方网站』 Koa2 SSR打造『JS++官方网站』 创建XMLHttpRequest对象 90%
3月12日 Koa2 SSR打造『JS++官方网站』 Koa2 SSR打造『JS++官方网站』 Koa2 SSR打造『JS++官方网站』 Ajax封装 90%
3月13日 复习 复习 复习 复习 0%

资料：

知识总结：

问题：如何结合前端的代码，样式，脚本，图片进行打包处理？

通过webpack构建工具进行打包

问题：如何实现边开发边打包，页面实时渲染？

通过koa服务器，和webpack-dev-server服务器协调运作，前者用来解析网站，后者用来打包

第三周

日期 早 午 晚 复习内容 完成度
3月14日 事件环相关的基本概念认知 事件环分析训练（1） 事件环分析训练（2） webpack工程化概念 0%
3月15日 事件环分析训练（3） 事件环分析训练（4） 事件环分析训练（5-6） 组件化 0%
3月16日 宏任务与微任务专题 setImmediate与setTimeout MessageChannel与postMessage 入口 0%
3月17日 requestAnimationFrame与setInterval MutationObserver与nextTick NodeJS基本认知 加载器 0%
3月18日 NodeJS擅长的事 JS单线程与多线程的对比 同步与异步、阻塞与非阻塞 插件 0%
3月19日 Node系统与事件环基本认知 Node事件环的运行流程与基本案例的分析 复杂案例分析与事件环机制的总结 sourceMap 0%
3月20日 复习 复习 复习 复习 0%

资料：

知识总结：

  • 什么是进程？
    一个cpu进程，为了任务正常运行分配调度出一个单位，来供其运行一个任务，进程是计算机调度的基本单位，进程包含多个线程，线程在进程中运行

  • 在浏览器中的进程：
    它是由多个进程组成的应用程序，分为主进程和辅助进程，每个tab页都会开启一个进程

  • 渲染进程：
    它包括GUI渲染线程(渲染页面)和JS引擎线程(处理JS脚本程序)，两者线程运行互斥

  • 在渲染进程中的GUI渲染线程：

    • 解析HTML,CSS
    • 构建DOM/render树
    • 初始布局与绘制
    • 重绘与回流

  • 在渲染进程中的JS内核引擎线程：

    • 一个主线程与多个辅助线程配合
    • 一个浏览器只有一个JS引擎
    • 解析JS脚本，运行JS代码

  • 在渲染进程中的事件触发线程：

    • 用户交互事件
    • setTimeout
    • Ajax

  • 在渲染进程中的宏任务和微任务：
    创建线程的目的是为了实现异步的执行条件

  • Mutation Observer是什么？
    Mutation Observer（变动观察器）是监视DOM变动的接口。当DOM对象树发生任何变动时，Mutation Observer会得到通知

  • 宏任务：

    • 宿主提供的异步方法和任务
    • script整体脚本代码
    • setTimeout UI渲染

  • 为什么要区分宏任务和微任务？
    主要是实现优先级的问题，微任务实际上是优先级要高于宏任务，每一次微任务在执行队列里的任务执行完毕后要清空微任务当前任务队列，也就是先对微任务进行处理，然后去渲染，去执行宏任务

  • 为什么Promise.then要优先于下一个宏任务去处理？
    因为它跟后续的代码也是保持异步关系，处理Promise，微任务去处理Promise的then回调

  • 事件环的运行流程分析：

    1. JS引擎线程(执行栈)：

      • 同步代码
      • 宏任务异步代码

    2. 微任务队列(清空所有)：

      1. Promise.then

      2. Mutation Observer：接口提供了监视对DOM树所做更改的能力

    3. GUI渲染

    4. 宏任务队列(取出一个放入执行栈，先进先出)：

      • Ajax(响应回来进执行栈)
      • setTimeout(时间到了进执行栈)
      • 用户交互事件(事件被触发进执行栈)
    5. JS引擎线程(接收异步的回调)…

  • 为什么宏任务和微任务都要滞后(异步)？
    都是为了模拟一个多线程，跟同步代码是滞后关系

第四周

日期 早 午 晚 复习内容 完成度
3月21日 Vue + Nuxt + Koa2全栈打造『官方移动端』 Vue + Nuxt + Koa2全栈打造『官方移动端』 Vue + Nuxt + Koa2全栈打造『官方移动端』 开发服务 90%
3月22日 Vue + Nuxt + Koa2全栈打造『官方移动端』 Vue + Nuxt + Koa2全栈打造『官方移动端』 Vue + Nuxt + Koa2全栈打造『官方移动端』 请求转发 90%
3月23日 Vue + Nuxt + Koa2全栈打造『官方移动端』 Vue + Nuxt + Koa2全栈打造『官方移动端』 Vue + Nuxt + Koa2全栈打造『官方移动端』 自动刷新 80%
3月24日 部署前项目改造与修复、上线准备 静态资源上传七牛脚本编写、打包上传配置 创建、关联、上传3个项目到线上仓库 热更新 90%
3月25日 PM2、域名解析、nginx代理、静态项目部署 安装redis、MySQL、Puppeteer问题方案 Nuxt + Koa2项目上线方案 es6处理 80%
3月26日 vite + 原生NodeJS开发『文档生成工具』 vite + 原生NodeJS开发『文档生成工具』 vite + 原生NodeJS开发『文档生成工具』 Tree Shaking 80%
3月27日 复习 复习 复习 复习 70%

资料：

知识整理：

  • 如何结合前端的代码，样式，脚本，图片进行打包处理？
    通过webpack构建工具进行打包

  • 如何实现边开发边打包，页面实时渲染？
    通过koa服务器，和webpack-dev-server服务器协调运作，前者用来解析网站，后者用来打包

  • 前后端分离概念：

    • 前端：

      • 写页面和业务脚本

    • 中间层(后端node)：

      • 拿到数据
      • 登录/注册
      • redis存储
      • 验证
      • 组件html
      • 返回完整的html静态页面
      • 向后端请求数据

    • 后端：

      • 写数据接口
      • 数据库对接
      • 数据返回

  • Nuxt做了什么？

    • vue组件集合
    • Nuxt页面打包
    • Nuxt请求数据
    • 组件与数据结合
    • 组件html