2022年7月

第一周

知识整理：

• transform属性允许你旋转，缩放，倾斜或平移给定元素
• transform: translateX(2em); 定义x轴平移
• transform: scale(2, 0.5);定义缩放变形
• transform: rotate(0.5turn); 定义旋转
• transform: scale(0.5) translate(-100%, -100%);复合写法
• css属性定义语法(CSS value definition syntax)中用来限定 CSS属性合法取值的专门语法
• 一些类型在 CSS中经常出现，CSS规范中将其专门定义，称为基本类型，用一对尖括号表示：’<‘与’>‘，如<angle>,<string>
• 方括号将数个基本元素组成一个整体，用来强调组合的优先级。例如：bold [ thin && <length> ]
• 并置是指将数个关键字、符号或类型，用空格分开写在一起。并置中所有的元素都必须出现并且按所规定的顺序出现。例如：bold <length> , thin
• “与”组合符连接的各个部分都必须出现，但是顺序任意。例如：bold && <length>
• “或”组合符表示其连接的所有组成元素是可选的，次序任意，但是至少其中一个要出现。<'border-width'> || <'border-style'> || <'border-color'>
• “互斥”组合符表示各组成部分中只能恰好出现一个，通常用来分隔一个属性的所有可选值。例如：<percentage> | <length> | left | center | right | top | bottom
• rotate3d(x, y, z, deg) 函数定义一个变换，它将元素围绕固定轴移动而不使其变形
• transition过渡效果,可以为一个元素在不同状态之间切换的时候定义不同的过渡效果
• transition-timing-function: cubic-bezier(坐标1, 坐标2)通过这个函数定义贝塞尔曲线会建立一条加速度曲线，因此在整个 transition变化过程中，变化速度可以不断改变
• ease-in由慢到开始过渡
• linear线性过渡
• ease-out由慢到结束过渡
• ease-in-out开始慢结束慢过渡, ease慢速开始变快，慢速结束
• 定义动画的名称@keyframes.animation-name: xxx
• 动画周期时长animation-duration: 2s;
• 速度曲线时长animation-timing-function: ease;
• 动画周期播放次数animation-itration-count: infinite;
• 动画是否反向播放animation-direction: reverse;
• filter滤镜属性,提供渲染的一些效果如模糊，亮度，对比度，饱和度，灰度等一系列的效果渲染

第二周

知识整理：

• animation: colorChange 4s steps(1, start);，动画结束后，丢掉的是第一帧，保留下一帧的状态
• end，动画结束后，丢掉最后一帧，保留当前帧状态知道动画结束
• article是闭合一块与自身相关的内容，如文章
• section是某个单独功能的聚合，如小型地图
• window.requestAnimationFrame(callback)告诉浏览器希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行
• cookie:服务器发送到用户浏览器并保存在本地的一小块数据，它会在浏览器下次向同一服务器再发起请求时被携带并发送到服务器上
• Set-Cookies：响应首部Set-Cookie 被用来由服务器端向客户端发送 cookie
• history接口(历史栈)允许操作浏览器的曾经在标签页或者框架里访问的会话历史记录
• 浏览器不会重新加载history.pushState()新定义的url地址,也不会检查该页面是否真实存在
• Web Worker 为 Web 内容在后台线程中运行脚本提供了一种简单的方法
• 监听文件的方法是绑定input输入框(type="file")的change事件，该事件对象是FileList{0: File, length: 1}
• WebSocket对象提供了用于创建和管理 WebSocket连接，以及可以通过该连接发送和接收数据的 API
• Socket.IO，客户端和服务器都搭建依赖来创建一个基本的聊天应用程序

第三周

知识整理：

• 当上传文件时会存在什么问题？
  当处理大文件时网络传输会造成时间耗费，时间会对网络请求进行阻塞，阻塞会造成没有足够的响应，网络请求是无状态的，当前请求当前响应，文件没有上传成功时是不会有响应的，而且每次的请求是独立的，没有状态联系的，所以会有大量的时间在等待，也无法得知上传的进度和上传的时间和后端是否正确的上传成功

• 如何解决上传问题？
  对大文件进行裁切slice，切片成一个小块chunk，并逐一按顺序同步上传至后端

• 什么是FFmpeg？
  FFmpeg是一套可以用来记录、转换数字音频、视频，并能将其转化为流的开源计算机程序。采用LGPL或GPL许可证。它提供了录制、转换以及流化音视频的完整解决方案。它包含了非常先进的音频/视频编解码库libavcodec，为了保证高可移植性和编解码质量，libavcodec里很多code都是从头开发

• FormData是什么？
  FormData接口提供了一种表示表单数据的键值对 key/value 的构造方式，并且可以轻松的将数据通过XMLHttpRequest.send() 方法发送出去，它是一个构造函数, 需要new FormData()创建

• FormData构造函数里有什么方法？
  append()/delete()/entries()/get()/has()/keys()/set()/values()等

• express-fileupload是什么？
  用于上传文件的简单快速中间件。

• express-fileupload如何使用？
  当您上传文件时，该文件将可以从req.files中获取信息

• 无序排列的数据无法进行迭代操作，如对象数据

• 什么是面向对象的设计模式？
  它是基于类的方式，定义类和类之间的关系的一种编程方式，具有继承，封装，多态三要素

• 什么时候用状态模式？

  • 切换主题
  • 夜间模式
  • 白天模式
  • 登录状态
  • 文件读取/文件上传/文件暂停/删除/完成删除

• 如何考虑代码是否是优质代码？
  判断是否符合设计原则

• 什么是设计原则？
  指的是计算机中所有程序设计对应的设计原则

  • 单一职责原则(S)，一个函数只做一件事
  • 开闭原则(O)，对拓展开放，对修改封闭，只能新增函数不能修改原有函数，避免重新测试
  • 里氏替换原则(L)，子类会继承替换父类，不会导致程序错误
  • 接口隔离原则(I)，多个专门的接口优于单一接口
  • 依赖倒置原则(D)，针对抽象接口编程，而不是实现过程编程

第四周

知识整理：