第一周

日期 早 午 晚 复习内容 完成度
3月28日 vite + 原生NodeJS开发『文档生成工具』 vite + 原生NodeJS开发『文档生成工具』 vite + 原生NodeJS开发『文档生成工具』 chunks 90%
3月29日 Vue3+EggJS全栈TypeScript重构『新闻头条』 Vue3+EggJS全栈TypeScript重构『新闻头条』 Vue3+EggJS全栈TypeScript重构『新闻头条』 babel 100%
3月30日 Vue3+EggJS全栈TypeScript重构『新闻头条』 Vue3+EggJS全栈TypeScript重构『新闻头条』 Vue3+EggJS全栈TypeScript重构『新闻头条』 webpack优化 100%
3月31日 React Hooks+EggJS全栈TS『驾照考题』 React Hooks+EggJS全栈TS『驾照考题』 React Hooks+EggJS全栈TS『驾照考题』 TypeScript概念 100%
4月1日 React Hooks+EggJS全栈TS『驾照考题』 React Hooks+EggJS全栈TS『驾照考题』 React Hooks+EggJS全栈TS『驾照考题』 环境 90%
4月2日 前端真实场景下的『外观模式』 前端真实场景下的『外观模式』 前端真实场景下的『外观模式』 类型注解 90%
4月3日 复习 复习 复习 复习 0%

知识整理：

Egg后端框架返回数据的流程：

  • router(挂载接口)：管理请求路径时决定使用控制器controller的哪个api
  • controller(外界访问接口)：管理等待异步请求(service)返回的数据作为响应数据传给前端
  • service：一个类里面定义的一些异步方法，一般对接数据库操作，或数据请求

项目总结：

  1. 后端需要熟悉MVC的开发模式

  2. 前端

    1. 组件化
    2. vue3中对业务逻辑方法提取到compositionAPI里
    3. vue3自定义指令写法
    4. 对请求axios进行封装时用了拦截器的写法
    5. 对service接口目录做了请求方法的封装
    6. vue3中的vuex里运用了模块的方式编写

  3. TypeScript

    1. 对typings目录文件的管理和接口(interface,enum写法)的定义
    2. 对所有的变量和方法都进行了类型注解
    3. 类型注解对于日后维护带来便利

redux类型定义过程:

  1. actionType定义变量类型
  2. actions使用类型定义多个action对象{type, payload}
  3. reduces里根据action.type去进行更改相应的数据

第二周

日期 早 午 晚 复习内容 完成度
4月4日 TypeScript面向对象插件化开发 TypeScript面向对象插件化开发 TypeScript面向对象插件化开发 类型化数组 90%
4月5日 前端『程序设计方案』【设计思想专题】 前端『程序设计方案』【设计思想专题】 前端『程序设计方案』【设计思想专题】 类型分类 90%
4月6日 React Hook+TypeScript『业务开发思路』 React Hook+TypeScript『业务开发思路』 React Hook+TypeScript『业务开发思路』 类型系统 80%
4月7日 TypeScript『驱动型插件』 TypeScript『驱动型插件』 TypeScript『驱动型插件』 类型推断 80%
4月8日 TypeScript计划 工厂模式 TypeScript计划 工厂模式 TypeScript计划 工厂模式 接口 80%
4月9日 TypeScript计划 装饰器模式 TypeScript计划 装饰器 TypeScript计划 装饰器模式 元组 80%
4月10日 复习 复习 复习 复习 50%

知识整理：

类划分：

  • 功能类：

    • Fade：自身setPage方法的实现fade切换，实例化时执行收集方法传入setPage方法
    • Slide ：自身setPage方法的实现slide切换，实例化时执行收集方法传入setPage方法

  • 抽象类：

    • Base 管理公共的功能
    • 定义容器装载函数方法
    • 订阅模式：收集方法protected getMethod，将继承类的方法放入容器
    • 发布通知模式：protected notify，该方法在点击切换时触发，遍历容器里所有的方法并执行同时传参

关于外观模式：

外观模式的基本用法，入口模块直接接收一个TodoList外观模块接口，去实现相应的功能，而不会去对子组件产生任何的依赖

如何不通过数据响应式，虚拟节点等底层数据绑定机制方法去实现程序设计方案？

  1. 面向对象的方式
  2. 需要类的继承方式
  3. 需要横向切割程序方式

为什么要使用装饰器？

在es6写法的类里可以定义一个装饰器用来做副作用的程序加载，实现一个简单句柄的写法多次复用该函数里的副作用程序(如数据请求)

useReducer有什么存在意义？

它比useState的写法更为高级，也是一个更高级的解决方案，当使用多个方法操作一个状态数据的变化时，而且这些方法内部有相对比较复杂的逻辑时，可以用useReducer来处理

并且，使用useReducer还能给那些触发更新的组件做性能优化，因为开发者项子组件传递的是dispatch而不是回调函数

第三周

日期 早 午 晚 复习内容 完成度
4月11日 React Hooks+Express全栈TS购物车 React Hooks+Express全栈TS购物车 React Hooks+Express全栈TS购物车 node概述 80%
4月12日 React Hooks+Express全栈TS购物车 React Hooks+Express全栈TS购物车 React Hooks+Express全栈TS购物车 运行环境 80%
4月13日 React Hooks+Express全栈TS购物车 React Hooks+Express全栈TS购物车 React Hooks+Express全栈TS购物车 阻塞 90%
4月14日 『React Native』项目开发-『JS++课堂』 『React Native』项目开发-『JS++课堂』 『React Native』项目开发-『JS++课堂』 核心思想 90%
4月15日 『React Native』项目开发-『JS++课堂』 『React Native』项目开发-『JS++课堂』 『React Native』项目开发-『JS++课堂』 包管理 80%
4月16日 『React Native』项目开发-『JS++课堂』 『React Native』项目开发-『JS++课堂』 『React Native』项目开发-『JS++课堂』 线程 80%
4月17日 复习 复习 复习 复习 70%

知识整理：

  • 问题：减少http请求的使用分页方法的前后端选择？

  • 后端分页的机制是前端发起请求，携带页码参数，后端接收请求和请求参数，根据页码从数据库获取相应页码数据，最后携带数据响应给客户端，前端拿到数据进行视图渲染

  • 关于前端分页的必要性：

    • 对数据量较大时渲染少数的数据在一页中展示，如一些管理系统的管理员账号信息key
    • 假如开发业务需求的页面仅需要30条数据，而后端返回90条数据的情况时也需要做前端分页

  • 问题：为什么在redux和vuex中加入action这个过程？

  • 一般在编程过程中，事件触发一个行为，行为去响应一个函数，且action是可以用进行更多的副作用操作，但不推荐组件直接操作mutation和reducer，因为它们是纯函数，且害怕开发者容易在纯函数里写副作用，所以在中间加了一层action，让action去调用reducer或mutation

  • 关于useEffect和vue3的watchEffect函数：

    • useEffect依赖外部数据，依赖数据一旦更改就会重新执行该函数内部的程序
    • watchEffect也是依赖外部数据，但内部本身实现了依赖自动收集，不需要手动写入，依赖数据一旦更改就会重新执行该函数内部的程序

第四周

日期 早 午 晚 复习内容 完成度
4月18日 React Native』项目开发-『JS++课堂』 『React Native』项目开发-『JS++课堂』 『React Native』项目开发-『JS++课堂』 同步异步 90%
4月19日 React Native』项目开发-『JS++课堂』 『React Native』项目开发-『JS++课堂』 『React Native』项目开发-『JS++课堂』 事件环 100%
4月20日 React Native』项目开发-『JS++课堂』 『React Native』项目开发-『JS++课堂』 『React Native』项目开发-『JS++课堂』 流程 100%
4月21日 React Native』项目开发-『JS++课堂』 『React Native』项目开发-『JS++课堂』 『React Native』项目开发-『JS++课堂』 事件环阶段 90%
4月22日 React Native』项目开发-『JS++课堂』 『React Native』项目开发-『JS++课堂』 『React Native』项目开发-『JS++课堂』 运行规则 90%
4月23日 React Native』项目开发-『JS++课堂』 『React Native』项目开发-『JS++课堂』 『React Native』项目开发-『JS++课堂』 优先级 90%
4月24日 复习 复习 复习 复习 0%

知识整理：

  • 环境搭建：

    • Node(v14.8.0)
    • JDK(jdk-11.0.14_windows-x64_bin.exe)
    • Android Studio(android-studio-2021.1.1.23-windows.exe)

  • 核心组件：通过 React Native，您可以使用 JavaScript来访问移动平台的 API，以及使用 React组件来描述 UI的外观和行为：一系列可重用、可嵌套的代码。

  • 视图：在 Android和 iOS开发中，一个视图是 UI的基本组成部分：

    • 屏幕上的一个小矩形元素、可用于显示文本、图像或响应用户输入。
    • 甚至应用程序最小的视觉元素（例如一行文本或一个按钮）也都是各种视图。
    • 某些类型的视图可以包含其他视图。全部都是视图。

  • 原生组件：在 Android开发中是使用 Kotlin或 Java来编写视图；在 iOS开发中是使用 Swift 或 Objective-C 来编写视图。
    在 React Native 中，则使用 React组件通过 JavaScript来调用这些视图。在运行时，React Native 为这些组件创建相应的 Android和 iOS视图。

  • 点击跳转：

    • TouchableNativeFeedback
    • TouchableNativeWithoutFeedback

  • 刷新控制：在ScrollView组件refreshControl属性里定义，函数返回的是一个刷新组件RefreshControl

  • 网页访问：创建一个原生的 WebView，可以用于访问一个网页。还可以直接嵌入 html代码.

  • 样式抽象：StyleSheet提供了一种类似 CSS 样式表的抽象。

  • 屏幕宽高：Dimensions本模块用于获取设备屏幕的宽高。

  • 动画：Animated库旨在使动画变得流畅，强大并易于构建和维护.

  • 请求：fetch API

  • 导航库：React Navigation 提供了简单易用的跨平台导航方案，在 iOS 和 Android上都可以进行翻页式、tab选项卡式和抽屉式的导航布局。

  • 图标库：使用react-native-vector-icons图标库来集成项目中使用，合适于按钮，logo，tabBar

  • 轮播图库：react-native-swiper是一个能用于做轮播效果的三方组件

第五周

日期 早 午 晚 复习内容 完成度
4月25日 VueRouter插件的注册 VueRouter对象的初始化 VueRouter对象的初始化 koa概念 80%
4月26日 创建路由映射表 match方法的实现 开发经验课 ctx 80%
4月27日 初识TypeScript 生成器与迭代器的应用 类型注解和类型推断 中间件 80%
4月28日 数组类型和元组 接口的概念 类的概念 路由 80%
4月29日 ObjectDefineProperty Proxy与ES-14种对象操作方法 Vue脚手架工具剖析 cookies 80%
4月30日 Vue路由的使用 观察模式-购物车案例 观察模式-购物车案例 session 80%
5月1日 复习 复习 复习 复习 0%

知识整理：

  • 生成器作用：访问迭代器对象，只要执行生成器函数，就会生成一个迭代器对象

  • yield结合可以实现自定义内容的产出

  • yeild和return本质的区别：

    • yeild暂停，找上一次暂停的位置，有记忆功能
    • return结束程序执行

  • 什么叫迭代？

    • 本次遍历的过程当中，进行一次程序上的输出
    • 迭代器建立在遍历的基础上，需要生成器(生成迭代器的东西)
  • ES5之前没有提供检测属性特征的方法，检测属性是否是只读/可遍历，ES6提供属性描述符Object.defineProperty()，因为JavaScript是弱类型语言，对于对象属性，变量的描述是不够彻底的，所以才有属性描述符方法对其进行完善处理