Codes►其他

考卷

前端

JavaScript & html

  1. function 创建(2),作用(3),子类型(3)
  2. object 创建(3),属性(3),创建属性,属性的描述 2*4
  3. Array of from isArray length prototype
  4. Array.prototype 修改添加 5 ，查找 5，遍历 4，排序 2，合并，其他
  5. Object 创建 2，获得对象的属性 5，修改对象的属性 2，其他 3
  6. Object.prototype constructor, hasOwnProperty, isPrototypeOf,propertyIsEnumerable,toString,valueOf
  7. String length, name, ptototype, fromCharCode, fromCodePoint, raw
  8. String.prototype 查找 11 ，拼接，截取 3，替换，转换 5，分割，填充，重复
  9. RegExp 属性 source，flags，global，ignoreCase，multiline，lastIndex
  10. RegExp 方法 exec，test，toString
  11. Promise 状态 4方法 3
  12. 方法统计
    • 正则相关 8
    • 回参新数组 4
    • 修改原数组 8
  13. 闭包
  14. 原型链
    1. 原型对象
    2. 对象的原型访问
    3. 继承
    4. constructor
    5. prototype
    6. Prototype __proto__
    7. 四个等式
  15. **运算符
    • instanceof object instanceof constructor
    • typeof（9）typeof obj 回参 string
    • ++前置后置
    • delete object['property'] 回参布尔
    • ?? ??=
  16. 运算顺序 括号，一元，算数，关系，相等，逻辑，赋值，逗号
  17. js 选择器 5
  18. 事件循环 （Event Loop）
    • 事件循环
    • 调用顺序 5
  19. es6 （5）
  20. this （6）
  21. 正则正则表达式
    • 表达式 3
    • 元字符
    • 量词 6
  22. HTML5 9
  23. Cookie 属性 6
  24. 严格模式 5

CSS

  1. CSS 选择器 CSS 选择器
    1. 基本选择器 #.tag ，
    2. 组合选择器 后代 ，子代 >，相邻兄弟 +，通用兄弟 ~
    3. 伪类选择器 链接，结构 :nth-child(n)，动态 :focus
    4. 伪元素选择器 ::before
  2. CSS 选择器权重!important 10000，内联 1000，id100，类属性伪类 10，元素伪元素 1，通用，子，兄弟，后代 0
  3. CSS 动画 CSS 动画
    1. 渲染过程 样式计算、布局、绘制和合成
    2. GPU 加速 transform，opacity
    3. 重排
      1. DOM 结构变化
      2. 元素尺寸变化
      3. 内容变化
      4. 样式计算
      5. 其他滚动条，元素聚焦
    4. 重绘 是指在元素的几何属性没有变化，但是元素的外观（如颜色、阴影、边框颜色等）发生变化时，浏览器需要重新绘制元素的过程 CSS滤镜效果
  4. CSS 居中居中
    1. 居中 水平 3，垂直 2
    2. 水平垂直 flex，grid，绝对定位+transform，table-cell
  5. CSS3 CSS3 新内容
    1. 布局相关 2
    2. 动画与效果 3
    3. 视觉效果 3
    4. 字体与文本 2
    5. 其他特性 3
  6. flex
    1. 容器 flex container
      • flex-direction：定义主轴的方向（是水平还是垂直）。
      • flex-wrap：定义项目是否应该在必要时换行。
      • flex-flow：flex-direction和flex-wrap的简写形式。
      • justify-content：定义项目在主轴上的对齐方式。
      • align-items：定义项目在交叉轴上的对齐方式。
      • align-content：定义多行项目在交叉轴上的对齐方式。
    2. 项目 flex items
      • order：定义项目的排序顺序。数值越小，越靠前。
      • flex-grow：定义项目的放大比例。如果容器有多余的空间，项目可以放大。
      • flex-shrink：定义项目的缩小比例。如果容器空间不足，项目可以缩小。
      • flex-basis：定义项目在主轴上的初始大小。
      • align-self：允许单个项目有与其他项目不同的对齐方式。
      • flex：flex-grow、flex-shrink和flex-basis的简写形式，默认值为0 1 auto。

网络

  1. TCP/IP 协议
    1. 链路层 以太网、Wi-Fi、PPP
    2. 网络层 IP
    3. 传输层 TCP、UDP
    4. 应用层 HTTP、FTP、DNS、SSH
  2. OSI（开放系统互连）七层模型：物理层，数据链路层，网络层，传输层，回话层，表示层，应用层
  3. http HyperText Transfer Protocol，超文本传输协议
    • http 请求 请求头，请求体；
    • http响应 状态行，相应头，响应体
    • 特点 无状态，无连接，媒体独立，简单快速
    • http2/3 二进制分帧、多路复用、服务器推送、头部压缩，性能和可靠性
    • https Secure
  4. WebSocket 在单个 TCP 连接上进行全双工通信的方式
    • 特点
      • 长连接 持久连接
      • 全双工通信 服务器和客户端之间同时进行数据的发送和接收
      • 基于 HTTP 的握手->WebSocket 握手-> WebSocket 连接
      • 支持二进制数据传输Blob 或 ArrayBuffer
    • WebSocket API
      • 属性
        • readyState 0,1,2,3
        • bufferedAmount表示已发送但尚未被浏览器传输的数据量（以字节为单位）
        • extensions表示服务器选择的 WebSocket 扩展
        • protocol
        • url
      • 方法
        • constructor(url, [protocols])
        • send(data) 向服务器发送数据
        • close([code], [reason])
      • 事件 socket.addEventListener('open',(e)=>{}) 等价 ws.onopen
        • open：当 WebSocket 连接成功建立时触发。
        • error：当 WebSocket 连接发生错误时触发。
        • message：当从服务器接收到数据时触发。
        • close：当 WebSocket 连接关闭时触发。
    • 工作流握手, 数据传输，关闭
    • 心跳用于维持客户端与服务器之间长连接的一种保活机制
      • 客户端建立连接
      • 客户端定时发送心跳数据包
      • 服务器在设定时间内没有收到心跳，会发送关闭连接请求
      • 服务器定时发送心跳数据包，客户端接收并返回响应
      • 客户端在设定时间内没有收到心跳，会重新连接

Vue

  1. Vue 基本知识
    • 基础
      • 初始化
      • 常用模板语法
      • 生命周期函数
      • 数据和方法 data() & methods
      • 计算属性和侦听器 computed & watcher
    • 组件
      • 组件 component
        • 全局，局部
        • 命名方式
      • 组件传值
      • 插槽 slot 和具名插槽
      • 动态组件和异步组件
    • 动画
    • 高级语法
      • 混入mixin
      • 自定义指令directive
      • 传送门teleport Vue3
      • render
      • plugin
    • composition api
      • setup
      • ref 和 reactive
      • toRef 和 toRefs
      • context 参数 3
      • 计算属性computed
      • watch和watchEffect
      • provide, inject
      • 模版 ref
  2. Vue 特点 数据绑定，虚拟 DOM，事件，计算属性和侦听器，指令系统，keep-alive，$属性 6，$ 方法 8
  3. Vue 组件通信
    • props 和 $emit
    • none-props 和 $attrs
    • 插槽 slot
    • Vuex/Pinia
    • provide/inject
  4. Vue 生命周期函数
    1. Vue2
      • 创建 beforeCreate，created
      • 挂载beforeMount，mounted
      • 更新 beforeUpdate，updated
      • 销毁 beforeDestroy，destroyed
      • keep-alive activated，deactivated
    2. Vue3
      • setup 在 created，移除创建 2 个
      • 挂载beforeMount，mounted
      • 更新 beforeUpdate，updated
      • 销毁 beforeUnmount，unmounted
      • keep-alive activated，deactivated
      • 渲染onRenderTracked，onRenderTriggered
  5. Vuex
    • state 存储应用的状态
    • mutations 用于同步修改状态的方法
    • actions 用于异步操作，最终通过调用 mutations 修改状态
    • getters 类似于 Vue 的计算属性，用于派生状态
    • 顺序
      1. dispatch 方法，派发一个 action，名字叫做change
      2. 感知到 change 这个action，执行store 中 actions 下面的 change 方法
      3. commit 提交一个叫做 change 的数据改变
      4. mutation 感知到提交的change改变，执行 change 方法改变数据
  6. pinia State（状态）：存储需要共享的数据。Getters（计算属性）：基于状态的派生值。Actions（操作方法）：用于修改状态的函数
  7. Vue 插件 Vue-devtools，router，Vuelidate，Axios，状态管理，lazyload

其他

  1. 兼容性
    • CSS 解析差异
    • JavaScript API
    • 响应式布局
    • 图片兼容性
    • 字体兼容性性
  2. 安全 https，数据加密，安全储存，权限控制，输入验证
  3. 跨域 CORS 域名、协议或端口不同
    1. CORS 头部
    2. jsonp 淘汰
    3. 文档域
    4. PostMessage
    5. WebSocket
    6. 代理服务器
  4. 登录鉴权
    1. cookie 自动携带，服务器存储；安全风险，太小，
    2. token（JWT JSON Web Token）无状态，安全，支持跨域；需要手动携带，有存储风险
    3. Session 安全，服务控制；服务器负担，跨域限制
    4. OAuth2.0 标准化，安全；复杂
  5. cookie 设置 HttpOnly 和 Secure 标志，防止跨站脚本攻击和非安全传输
  6. electron
    1. 主进程
    2. 渲染进程
    3. preload
    4. 通信 ipcMain 和 ipcRenderer
    5. 常用模块
      1. dialog
      2. menu 和 MenuItem 模块
      3. shell 模块用于在系统中打开外部链接、文件管理器等
      4. clipboard 模块用于读写系统剪贴板的内容
      5. powerMonitor 模块用于监听系统电源状态，如系统唤醒、待机
      6. systemPreferences 模块用于访问系统偏好设置，如颜色模式
      7. globalShortcut 模块用于注册全局快捷键，即使应用不活跃时也能捕获键盘输入
      8. fs
      9. chokidar 监听文件变化
    6. 缓存