前端面试题2024.md · Mark/iOS_html

Vue 面试题

CDN的加速原理 是什么

Vue和react的相同点

性能优化的方式有哪些：

异步渲染 合并data更新

合理使用指令条件渲染，合理使用keep合理使用缓存 computed v-for需要Key

在定义的事件使用完后destroy销毁变量和定时器

合理使用 异步组件，动态组件

data设计的更好 递归到底

webpack方面的优化方式 图片 懒加载 SSR 的使用

- 组件化，数据驱动视图，都有虚拟DOM和DIFF比较更新操作DOM

区别：JSX和template的不同

React HOOKS和Vue组合API相似的
  
- React中的setState实现的机制和调用是什么

## 面试题

- v-show v-if区别是什么
- 为什么列表渲染需要Key React 也需要否则报错  答 节点的复用率更高的 DIFF判断Key和tag是否为sameNode
- 描述父子组件的生命周期 生命周期3各阶段介绍
- Vue组件的初次渲染和更新流程是啥
- Vue常见的组件通讯方式有哪些

设计题

- 实现自定义v-model, 封装表单组件
- El-tree/table组件的使用和实现

- 怎么实现El-form/El-form-item/内部表单子组件数据绑定和验证

React面试题

- 组件通讯的方式 context 顶级组件公用属性 props 传属性 函数还有类型检查DVA和react-redux通讯

```
  性能优化
  SCU不可变值纯函数组件的使用，封装公共逻辑HOC render props 函数组件用memo
  不需要优化的时候少用SCU和pureComponent
  reducer是一个纯函数 只返回object 没有逻辑
  Redux中间件的实现是对Store.dispatch函数的改造，可以前后执行自己的logger或其他插件 然后再执行action的代码
  Redux的使用有哪些
  action
   如何处理异步逻辑如何实现 怎么使用异步action 异步redux-thunk redux-promise redux-saga
   ArtUI artTS是什么语言开发
   
   四个基本概念
   单向数据流 回调tigger ->dispatch->action->reducer处理state>更新view
   
   history hash router as vue-router
   // React的原理的理解
   H5 history模式不常用 SEO需要配合后端的接口实现的 动态路由类似vue /:id动态参数
   react-router-dom 中的useParams获取参数解构赋值 lazy函数返回组件 并且用Suspense组件包括动态懒加载路由
   多人开发配置路由冲突如何解决的AllRoute方法的实现 单文件防止冲突ImportedWrapperFunc
   react-imported-component实现原理是什么 基本使用 webpack的异步加载JS文件
   
   
   React.createElement写法3种
   React.createElement('div', {...属性}, [Children1，Children2])
   React.createElement('div'， null，，Children1，Children2，Children3)
   React.createElement(组件的名称， null， 字符串，Children1，Children2，Children3)
   
   JSX总结
   createElement本质是h函数 返回虚拟DOM节点的函数
   第一个参数是HTML tag（小写的规则）或者React组件名称
   React组件首字母大写来区分的 List组件节点会继续往下拆分的，直到递归出来的是HTML节点
  ```

- JSX是什么东西 函数调用返回JS对象 Vue模版也是一样的不是HTML babel生成React.createElement调用 。混入Mixin还有使用HOC组件 render props函数

- 复用代码的方式有哪些

- SCU生命周期的作用是什么 性能优化必须配合不可变值使用，否则会出错的

- Redux单向数据流的实现 基本概念介绍tigger ->dispatch->action->reducer处理state>更新view

- setState为什么不是同步或异步 代码题内部的原理是什么 React事务机制 自动批处理在React 18不考虑这个问题了

- 不可变值的原则 setState的对象更新和数组更新的方式

- HOOK的常用函数，自定义Hook 使用原则和问题 优点缺点和代码逻辑复用

React基本原理

- 函数编程：纯函数（没有副作用的函数 只返回新的值， 入参和返回的类型是一样的）和不可变值是重要的原则 。Vue 和React的实现都不一样的DIFF算法 核心的思路都相同的
-  VDOM的区别 diff算法和event与Vue的区别
-  setState batchUpdate机制 slice concat filter 解构等方法保证， Object.assign拷贝对象的
-  路由和Vue的实现原理是类似的
- 2013年之前没使用VDOM， 数据驱动视图框架都需要DIFF提高性能 h函数返回vnode patch函数把vnode对比渲染到DOM上
- vnode是层级递归的解构的。 优化 只对比同层级| tag不同直接重新创建不深度比较节点|tag和key如果都相同的就是相同节点 不再比较。Vue2用的双端对比算法优化了算法复杂度
- 函数组件和类的不同：不能扩展没实例没生命周期没状态 返回JSX展示
- 受到state状态控制的组件叫受控组件。富文本和文件上传用非受控组件
- HOC render props 分离公共的逻辑 不推荐mixin
- Redux-thunk 异步中去dispatch一个action操作给reducer
- PureComponent需要配合不可变值使用，浅层比较实现了优化 项目自己实现了PureComponet 但是用的其他的方式 loadsh
- dispatchEvent机制

冒泡排序的优化方式

- 渲染list使用Key，合理使用异步路由加载 willUnmounted钩子销毁事件和定时器等资源
- 异步加载大组件
- 减少Bind(this)次数 
- 合理使用immutable.js
- 合理使用SCU PureComponent memo
- webpack优化 图片怎么加载 SSR怎么使用next.js

Webpack面试题

- 前端项目为什么需要打包 文件更多 需要合并和去掉不需要的代码和资源。**！tree-shaking 合并压缩更好 更好加载 转换高级语法LESS等东西 兼容老浏览器 css前缀和ESlint检查**

研发流程更统一的开发环境维护，统一的标准生产代码。更规范

- module **多个模块合成chunk** bundle**最后的代码包**分别是什么

- loader和plugin区别是什么 模块的less--css 转换器和 扩展插件

- webpack如何实现懒加载 组件 资源：import()语法 应用路由懒加载

- babel-runtime和polyfill的区别 污不污染全局

- babel只关心语法，webpack只打包

- webpack常见的性能优化配置有哪些

- Webpack.dell.js  **output配置path filename和library得到**

```
  merge各种环境的配置
  devServe解决跨域问题 测试环境的 配置域名白名单
  Pollyfill处理ES6的语法问题
  CSS和图片的打包处理
  
  高级配置
  多入口entry设置数组多个入口文件
  抽出CSS并压缩，分离loadsh和dayJS的按需加载
  JS文件的多个chunk懒加载
  多进程打包，vue-loader jsx处理
  
  生产优化babel-loader
  IgnorePlugin
  noParse加快速度
  happyPack和自带的webpack5多进程解决打包速度问题
  ParallelUglifyPlugin
  
  优化打包的代码
  小图片base64 file-loader url-loder
  bundle+hash利用浏览器缓存 chunk懒加载
  提取公共代码减少体积
  大图和CSS用CDN加速
  使用Scope Hosting？？？
  使用production模式打包 React和Vue都支持的
  
  热加载和自动刷新 dell不能用在生产环境的
  ```

按需使用babel polyfill 在babelrc文件配置presets usage 使用coreJS版本 corejs/modules/es.具体的模块.js体积更小

runtime是什么 babel polyfill 污染全局的变量。window.Promise可能会改变队友的代码 使用方会出现代码的冲突 不能这样干

所以需要用babel-runtime 不会污染全局的promise或includes数组API

方法替换

## Babel总结

配置

- babel polyfill 就是打包了coreJS 7.4版本使用runtime
- babel-runtime **不会污染全局更好的**
-

### TS基础语法 组合类型 函数重载 泛型

考察框架的使用，基本使用高级使用和插件的使用

框架的实际使用 设计能力的考察 data/state数据结构的设计

vue 基础

- vue-cli
- 计算属性和watch
- 常用指令
- 动态class和style
- 条件渲染 列表渲染
- 事件绑定和React的区别
- form表单 v-model

vue高级

- 生命周期

- props和默认值

- v-on指令和$emit

- 自定义事件

- $on和$off的使用

- 自定义v-model

- refs和slot的使用

- ：is=component动态组件的使用

- 异步组件的使用 路由懒加载

- keepAlive

- mixin

- 模版编译 template不是HTML 是什么

## vue3

- 新功能和区别

- createApp 多事件处理 fragment  去掉.sync 改用v-model参数语法

- 异步组件的使用方式

- 去掉filter

- Teleport组件 Suspense组件

- Composition API的重点有哪些

## Vuex

state

getters

action

mutation

Dispatch,cimmut,mapState mapGetters mapActions mapMutations

## vueRouter

动态路由

动态组件

to和push

hash和history 需要如何配置

## Storybook的优点

1. **组件驱动开发**：Storybook 提供了一个独立的环境来开发和测试 UI 组件，使开发者能够专注于组件的开发而不受应用程序其他部分的影响。
2. **文档生成**：Storybook 可以自动生成组件的文档，方便团队成员了解组件的使用方法和属性，大大提高了代码的可维护性和可读性。
3. **组件展示**：它提供了一个可视化的界面来展示所有的组件及其不同状态和用例，方便开发者和设计师进行沟通和协作。
4. **测试集成**：Storybook 可以与各种测试工具（如 Jest 和 Enzyme）集成，支持单元测试和可视化测试，确保组件的稳定性和可靠性。
5. **插件丰富**：Storybook 拥有丰富的插件生态系统，可以扩展其功能，如添加控件、文档、交互式调试等，提高开发效率。
6. **跨框架支持**：Storybook 支持多种前端框架（如 React、Vue、Angular 等），使其成为一个灵活且强大的工具，可以应用于不同的项目中。
7. **热模块替换**：支持热模块替换（HMR），使开发者能够在不刷新页面的情况下立即看到更改的效果，提高开发效率。
8. 面试如何回答

在面试中回答关于React项目中Ant Design组件使用Storybook框架的问题时，可以从以下几个方面进行阐述：

1. 项目背景

：

- 介绍你参与的React项目，并简要说明项目的背景和目标。
   - 强调项目中使用了Ant Design作为UI组件库，以提升开发效率和用户体验。

2. 为什么选择Storybook

：

- **组件驱动开发**：解释选择Storybook的原因之一是它提供了一个独立的环境来开发和测试UI组件，从而避免了在大型项目中开发组件时受到其他部分的干扰。
   - **文档生成**：Storybook可以自动生成组件的文档，方便团队成员了解组件的使用方法和属性，提高代码的可维护性和可读性。
   - **组件展示**：Storybook提供了一个可视化的界面来展示所有的组件及其不同状态和用例，方便开发者和设计师进行沟通和协作。

3. 如何集成Storybook和Ant Design

：

- 说明在React项目中如何安装和配置Storybook。例如，通过运行命令`npx sb init`初始化Storybook配置。
   - 解释如何在Storybook中引入和配置Ant Design组件库，包括在`.storybook/config.js`中引入Ant Design的样式文件。

4. 具体使用案例

：

- 介绍一个具体的组件，例如一个自定义的Ant Design表单组件，并展示如何在Storybook中编写该组件的不同状态和用例。
   - 说明如何使用Storybook的插件（如Knobs、Actions等）来增强组件的展示和交互测试。

5. 优势和成果

：

- 强调通过使用Storybook，团队能够更好地进行组件开发和测试，减少了组件开发中的错误，提高了开发效率。
   - 分享一些具体的成果，例如组件库文档的生成、团队协作的改进等。

6. 总结

：

- 总结使用Storybook和Ant Design的经验，强调这种组合在提高开发效率、提升代码质量和促进团队协作方面的显著优势。

通过上述几个方面的详细说明，可以充分展示你在React项目中使用Ant Design和Storybook框架的经验和成果。

### Webpack面试题如何回答

在面试中回答关于Webpack的问题时，可以从以下几个方面进行阐述：

1. **Webpack的概念**：

- Webpack是一个现代JavaScript应用程序的静态模块打包工具。它会递归地构建依赖关系图，然后将这些模块打包成一个或多个bundle。

2. **Webpack的核心概念**：

- **Entry**：入口，Webpack从这里开始构建依赖图。
   - **Output**：输出，Webpack打包后的文件存放位置。
   - **Loaders**：模块转换器，用于在编译过程中转换模块的内容。
   - **Plugins**：扩展插件，用于执行更广泛的任务，如打包优化、资源管理等。
   - **Mode**：模式，Webpack 4引入的概念，分为开发模式和生产模式。

3. **如何配置Webpack**：

- 入口文件配置：

```jsx
     module.exports = {
       entry: './src/index.js'
     };
     ```

- 输出文件配置：

```jsx
     module.exports = {
       output: {
         filename: 'bundle.js',
         path: __dirname + '/dist'
       }
     };
     ```

- 加载器配置：

```jsx
     module: {
       rules: [
         {
           test: /\\\\.js$/,
           exclude: /node_modules/,
           use: 'babel-loader'
         },
         {
           test: /\\\\.css$/,
           use: ['style-loader', 'css-loader']
         }
       ]
     }
     ```

- 插件配置：

```jsx
     const HtmlWebpackPlugin = require('html-webpack-plugin');
     module.exports = {
       plugins: [
         new HtmlWebpackPlugin({
           template: './src/index.html'
         })
       ]
     };
     ```

4. **Webpack的构建打包过程**：

- **初始化**：从配置文件或CLI参数中读取并合并参数，初始化需要的插件和加载器。
   - **编译**：从入口文件出发，递归地解析每个模块的依赖关系，使用对应的加载器转换模块。
   - **输出**：将编译好的模块组装成一个或多个bundle，写入到输出目录。

5. **如何优化Webpack的构建速度**：

- 使用多入口配置，缩小构建范围。
   - 开启缓存，如babel-loader的缓存。
   - 使用更快的打包工具，如esbuild-loader。
   - 使用DLL插件预编译依赖。

通过上述几个方面的详细说明，可以充分展示你对Webpack的理解和实际操作经验。

在移动设备上实现Canvas签名功能，可以通过以下步骤和方法进行优化：

### 实现步骤：

1. **设置Canvas元素**：

- 在HTML文件中添加一个Canvas元素，并设置其宽度和高度。

```html
   <canvas id="signatureCanvas" width="300" height="150" style="border:1px solid #000;"></canvas>
   ```

2. **获取Canvas上下文**：

- 在JavaScript中获取Canvas元素的2D上下文，用于绘制签名。

```jsx
   const canvas = document.getElementById('signatureCanvas');
   const ctx = canvas.getContext('2d');
   ```

3. **添加触摸事件监听器**：

- 添加触摸事件监听器（如`touchstart`、`touchmove`和`touchend`）来处理签名输入。

```jsx
   let isDrawing = false;
   
   canvas.addEventListener('touchstart', function(e) {
       isDrawing = true;
       ctx.beginPath();
       ctx.moveTo(e.touches[0].clientX - canvas.offsetLeft, e.touches[0].clientY - canvas.offsetTop);
   });
   
   canvas.addEventListener('touchmove', function(e) {
       if (isDrawing) {
           ctx.lineTo(e.touches[0].clientX - canvas.offsetLeft, e.touches[0].clientY - canvas.offsetTop);
           ctx.stroke();
       }
   });
   
   canvas.addEventListener('touchend', function(e) {
       isDrawing = false;
   });
   ```

### 优化方法：

1. **性能优化**：

- 使用`requestAnimationFrame`来优化绘制过程，以提高性能和响应速度。

```jsx
   let isDrawing = false;
   
   function draw(e) {
       if (!isDrawing) return;
       ctx.lineTo(e.touches[0].clientX - canvas.offsetLeft, e.touches[0].clientY - canvas.offsetTop);
       ctx.stroke();
   }
   
   canvas.addEventListener('touchstart', function(e) {
       isDrawing = true;
       ctx.beginPath();
       ctx.moveTo(e.touches[0].clientX - canvas.offsetLeft, e.touches[0].clientY - canvas.offsetTop);
   });
   
   canvas.addEventListener('touchmove', function(e) {
       if (isDrawing) {
           requestAnimationFrame(() => draw(e));
       }
   });
   
   canvas.addEventListener('touchend', function(e) {
       isDrawing = false;
   });
   ```

2. **防抖处理**：

- 为了防止绘制过于频繁，可以使用防抖技术来减少绘制次数。

```jsx
   function debounce(func, wait) {
       let timeout;
       return function(...args) {
           clearTimeout(timeout);
           timeout = setTimeout(() => func.apply(this, args), wait);
       };
   }
   
   canvas.addEventListener('touchmove', debounce(function(e) {
       if (isDrawing) {
           ctx.lineTo(e.touches[0].clientX - canvas.offsetLeft, e.touches[0].clientY - canvas.offsetTop);
           ctx.stroke();
       }
   }, 10));
   ```

3. **提高触摸精度**：

- 处理触摸事件的偏移量，以提高触摸精度。

```jsx
   function getTouchPos(canvas, touchEvent) {
       const rect = canvas.getBoundingClientRect();
       return {
           x: touchEvent.touches[0].clientX - rect.left,
           y: touchEvent.touches[0].clientY - rect.top
       };
   }
   
   canvas.addEventListener('touchstart', function(e) {
       isDrawing = true;
       const pos = getTouchPos(canvas, e);
       ctx.beginPath();
       ctx.moveTo(pos.x, pos.y);
   });
   
   canvas.addEventListener('touchmove', function(e) {
       if (isDrawing) {
           const pos = getTouchPos(canvas, e);
           ctx.lineTo(pos.x, pos.y);
           ctx.stroke();
       }
   });
   
   canvas.addEventListener('touchend', function(e) {
       isDrawing = false;
   });
   ```

通过以上步骤和优化方法，可以在移动设备上实现流畅且高性能的Canvas签名功能。

### WebSocket的原理

WebSocket是一种在单个TCP连接上进行全双工通信的协议。它使得客户端和服务器能够实时地相互发送数据，而不需要通过HTTP请求-响应的方式。WebSocket的工作原理如下：

1. 握手过程

：

- 客户端通过HTTP请求发起WebSocket连接。请求头包含一个特殊的字段`Upgrade`，表示希望升级到WebSocket协议。
   - 服务器收到请求后，如果同意升级，会返回一个101状态码的响应，表示协议切换成功。

2. 建立连接

：

- 握手成功后，客户端和服务器之间建立起一个持久的TCP连接，此连接可以用于双向通信。

3. 数据传输

：

- 数据通过帧（frame）的形式在连接上传输。每个帧都包含一个小的头部，用于描述帧的长度和类型。
   - 数据可以是文本或二进制数据。

4. 关闭连接

：

- 任一方可以随时发送关闭帧来关闭连接。连接关闭后，双方都不能再发送或接收数据。

### 优化大文件断点续传

断点续传是一种在文件传输中断后，可以从中断处继续传输的方法。以下是一些优化大文件断点续传的策略：

1. **文件分块**：

- 将大文件分成多个小块（chunk），每个小块独立传输和校验。
   - 记录每个小块的传输状态，确保传输中断后可以从未完成的小块继续。

```jsx
   function createChunks(file, chunkSize) {
       const chunks = [];
       let start = 0;
       while (start < file.size) {
           const end = Math.min(start + chunkSize, file.size);
           chunks.push(file.slice(start, end));
           start = end;
       }
       return chunks;
   }
   ```

2. **上传进度管理**：

- 维护一个上传进度表，记录每个小块的传输状态（未上传、正在上传、已上传）。
   - 当传输中断时，可以从进度表中获取未完成的小块进行重新传输。

```jsx
   const progress = new Array(chunks.length).fill(false);
   
   function uploadChunk(chunk, index) {
       // 上传逻辑
       progress[index] = true;
   }
   ```

3. **并行上传**：

- 使用并行上传方式，同时上传多个小块以提高传输速度。
   - 控制并行上传的数量，避免占用过多带宽。

```jsx
   function uploadChunks(chunks, concurrency = 3) {
       const queue = [];
       for (let i = 0; i < chunks.length; i++) {
           if (progress[i]) continue;
           queue.push(uploadChunk(chunks[i], i));
           if (queue.length === concurrency) {
               await Promise.all(queue);
               queue.length = 0;
           }
       }
   }
   ```

### 优化文件Hash前端计算的速度

文件Hash计算通常用于文件完整性校验和去重。以下是一些优化前端文件Hash计算速度的方法：

1. **使用Web Worker**：

- Web Worker可以在后台线程中执行计算任务，避免阻塞主线程，提高计算效率。

```jsx
   const worker = new Worker('hashWorker.js');
   worker.postMessage(file);
   worker.onmessage = function(e) {
       console.log('Hash:', e.data);
   };
   ```

2. **分块计算**：

- 将文件分块后逐块计算Hash，减少单次计算的工作量。

```jsx
   async function calculateHash(file, chunkSize) {
       const hash = new SparkMD5.ArrayBuffer();
       for (let start = 0; start < file.size; start += chunkSize) {
           const chunk = file.slice(start, start + chunkSize);
           const arrayBuffer = await chunk.arrayBuffer();
           hash.append(arrayBuffer);
       }
       return hash.end();
   }
   ```

3. **使用更快的Hash算法**：

- 选择性能更好的Hash算法（如XXHash、MurmurHash），提高计算速度。

```jsx
   import xxhashjs from 'xxhashjs';
   
   function calculateXXHash(buffer) {
       const hash = xxhashjs.h32(0xABCD).update(buffer).digest();
       return hash.toString(16);
   }
   ```

通过这些方法，可以有效优化大文件断点续传和文件Hash计算的速度，提高用户体验和系统性能。

文件上传断点续传的原理包括以下几个方面：

### 前端需要的API

1. **文件分块上传**：

- 将大文件分成多个小块，每次上传一个小块。前端需要使用`Blob`和`File` API进行文件的分块。

2. **上传进度管理**：

- 记录每个小块的上传状态（未上传、上传中、已上传），可以使用`localStorage`或其他持久化存储方法来保存这些状态。

```jsx
   const progress = new Array(chunks.length).fill(false);
   
   function uploadChunk(chunk, index) {
       // 上传逻辑
       progress[index] = true;
   }
   ```

3. **并行上传**：

- 同时上传多个小块以提高上传效率，但需要控制并行上传的数量。

```jsx
   async function uploadChunks(chunks, concurrency = 3) {
       const queue = [];
       for (let i = 0; i < chunks.length; i++) {
           if (progress[i]) continue;
           queue.push(uploadChunk(chunks[i], i));
           if (queue.length === concurrency) {
               await Promise.all(queue);
               queue.length = 0;
           }
       }
   }
   ```

### 后端需要的接口

1. **初始化上传**：

- 接收前端传递的文件信息（如文件名、大小等），生成唯一的上传标识符（如`uploadId`），并返回给前端。

```jsx
   app.post('/upload/init', (req, res) => {
       const { fileName, fileSize } = req.body;
       const uploadId = generateUniqueId();
       // 存储初始化信息
       res.json({ uploadId });
   });
   ```

2. **上传文件块**：

- 接收文件块和对应的`uploadId`，保存文件块并记录其上传状态。

```jsx
   app.post('/upload/chunk', (req, res) => {
       const { uploadId, chunkIndex } = req.body;
       const chunk = req.files.chunk;
       // 保存文件块
       saveChunk(uploadId, chunkIndex, chunk);
       res.json({ status: 'success' });
   });
   ```

3. **合并文件块**：

- 在所有文件块上传完成后，合并这些块生成完整的文件。

```jsx
   app.post('/upload/complete', (req, res) => {
       const { uploadId } = req.body;
       const filePath = mergeChunks(uploadId);
       res.json({ status: 'success', filePath });
   });
   ```

通过以上步骤，前后端可以实现文件上传的断点续传功能。在上传过程中，如果传输中断，前端可以根据已有的上传进度状态，从中断处继续上传未完成的文件块。

在断点续传中使用文件Hash主要用于以下几个方面：

1. **文件完整性校验**：通过计算文件的Hash值，可以在上传完成后对比文件的Hash值，确保文件在传输过程中没有被篡改或损坏。
2. **去重**：在上传文件之前计算文件的Hash值，可以快速判断服务器上是否已经存在相同的文件，从而避免重复上传。
3. **断点续传管理**：在断点续传过程中，文件的Hash值可以用于标识和管理文件的各个分块，确保每个分块在重新上传时都能正确拼接到原文件中。

通过以上方式，文件Hash在断点续传中起到了关键的作用，确保了文件传输的可靠性和效率。

# 项目简历

## 个人简介

- **姓名**：张三
- **经验**：8年
- **职位**：高级前端开发工程师
- **技术栈**：React, Redux, JavaScript (ES6+), HTML5, CSS3, Ant Design, Webpack, Babel, Git

## 项目经验

### 后台管理系统

### 项目描述

该项目是一个基于Ant Design的后台管理系统，主要用于公司内部的业务管理。系统包括用户管理、权限管理、数据统计等功能。项目采用React进行开发，实现了高效的前端界面和良好的用户体验。

### 主要职责

1. **项目架构设计**：负责系统的整体架构设计，确保项目的可维护性和可扩展性。
2. **组件开发**：基于Ant Design开发了一系列的自定义组件，满足业务需求。
3. **状态管理**：使用Redux进行全局状态管理，确保数据流的统一和可控。
4. **接口对接**：与后端团队合作，定义接口规范，使用Axios进行接口调用和数据处理。
5. **性能优化**：通过代码分割、懒加载和缓存机制等手段优化系统性能，提升用户体验。
6. **单元测试**：使用Jest和Enzyme编写单元测试，确保代码的可靠性和稳定性。
7. **持续集成**：配置CI/CD流程，确保代码的自动化测试和自动化部署。

### 技术重点

- **React**：使用React Hooks和函数组件，提高代码的简洁性和可读性。
- **Ant Design**：利用Ant Design的丰富组件库和主题定制功能，快速构建高质量的用户界面。
- **Redux**：通过Redux和Redux Thunk管理全局状态，处理异步操作。
- **Axios**：使用Axios进行HTTP请求，处理接口调用和数据交互。
- **Webpack**：配置Webpack进行项目打包和构建，优化构建速度和打包体积。
- **Babel**：配置Babel进行代码转换，支持最新的JavaScript特性。
- **Git**：使用Git进行版本控制，确保代码的安全和可追溯。

### 项目成果

- **提高效率**：通过使用Ant Design和自定义组件库，提高了开发效率，缩短了项目周期。
- **优化性能**：通过性能优化手段，系统的加载速度和响应速度显著提高，用户体验得到改善。
- **稳定性提升**：通过单元测试和持续集成，保证了代码的稳定性和可靠性，减少了线上Bug的发生。
-

除了 Redux 和 Context API，以下是一些其他常用的开源框架和库，用于管理 React 状态：

1. **MobX**：一个简单、可扩展的状态管理库，使用观察者模式来管理状态的自动更新。
2. **Recoil**：由 Facebook 开发的状态管理库，提供了细粒度的状态管理和订阅机制。
3. **Zustand**：一个轻量级的状态管理库，使用简单的 API 和 React hooks。
4. **Jotai**：一个基于原子的状态管理库，提供了灵活的状态管理方式。
5. **XState**：一个状态机和状态图库，适用于复杂的状态逻辑管理。

### 其他项目

（列举其他相关项目经验）

## 教育背景

- **学位**：计算机科学与技术本科
- **学校**：某某大学
- **毕业时间**：2014年

## 证书

- **React高级开发证书**
- **前端工程师证书**

## 联系方式

- **邮箱**：zhangsan@example.com
- **电话**：123-4567-890

## 个人评价

拥有8年的前端开发经验，精通React和Ant Design，具备扎实的编程功底和丰富的项目经验。善于解决复杂问题，注重代码质量和用户体验，具备良好的团队合作精神和沟通能力。

要解决iOS 10上的Vue 3项目白屏问题，可以通过配置Babel来确保兼容性。以下是具体步骤：

要使 `@vue/cli-plugin-babel/preset` 兼容 iOS 10，你需要在 `babel.config.js` 文件中进行一些配置。以下是具体步骤：

1. **安装必要的依赖**： 确保安装了 `core-js` 和 `@babel/preset-env`。

```bash
   npm install --save core-js @babel/preset-env
   ```

2. **修改 `babel.config.js` 文件**： 配置 Babel 以兼容 iOS 10。在 `babel.config.js` 文件中添加或修改如下内容：

```jsx
   module.exports = {
     presets: [
       ['@vue/cli-plugin-babel/preset', {
         useBuiltIns: 'entry',
         corejs: 3,
         targets: {
           ios: '10'
         }
       }]
     ]
   }
   ```

3. **在入口文件中引入 polyfills**： 在你的项目入口文件（通常是 `src/main.js` 或 `src/index.js`）中引入 `core-js` 和 `regenerator-runtime`。

```jsx
   import 'core-js/stable';
   import 'regenerator-runtime/runtime';
   ```

通过以上配置，你的 Vue 3 项目应该能够更好地兼容 iOS 10，避免因不支持某些现代 JavaScript 特性而导致的白屏问题。

1. **添加 Polyfill**： 在入口文件中引入 `core-js` 和 `regenerator-runtime`。

```jsx
   import 'core-js/stable';
   import 'regenerator-runtime/runtime';
   ```

2. **配置 Babel**： 在 Babel 配置文件中添加 `@babel/preset-env`，并设置目标浏览器。

```json
   {
     "presets": [
       ["@babel/preset-env", {
         "targets": {
           "ios": "10"
         },
         "useBuiltIns": "entry",
         "corejs": 3
       }]
     ]
   }
   ```

3. **使用 PostCSS 自动添加浏览器前缀**： 在 PostCSS 配置文件中使用 `autoprefixer`。

```jsx
   module.exports = {
     plugins: {
       autoprefixer: {
         overrideBrowserslist: ['iOS >= 10']
       }
     }
   }
   ```

通过这些配置，可以提高Vue 3项目在iOS 10上的兼容性，避免出现白屏问题。

iOS 10 不支持 Vue 3 项目出现白屏的可能原因包括：

1. **浏览器兼容性问题**： Vue 3 使用了一些较新的 JavaScript 特性，这些特性在较旧的浏览器（如 iOS 10 自带的 Safari 浏览器）中可能不受支持。
2. **缺少 Polyfill**： 为了在老旧的浏览器中支持新的 JavaScript 特性，可能需要引入 polyfill。可以使用 `core-js` 和 `@babel/preset-env` 来添加必要的 polyfill。
3. **构建配置问题**： 确保在构建过程中正确配置 Babel 和 PostCSS，以支持较旧的浏览器。
4. **ES6 模块问题**： 确保构建工具（如 Webpack）将所有 ES6 模块转换为 ES5。

解决方法包括：

1. **添加 Polyfill**： 在入口文件中引入 `core-js` 和 `regenerator-runtime`。

```jsx
   import 'core-js/stable';
   import 'regenerator-runtime/runtime';
   ```

2. **配置 Babel**： 在 Babel 配置文件中添加 `@babel/preset-env`，并设置目标浏览器。

3. **使用 PostCSS 自动添加浏览器前缀**： 在 PostCSS 配置文件中使用 `autoprefixer`。

```jsx
   module.exports = {
     plugins: {
       autoprefixer: {
         overrideBrowserslist: ['iOS >= 10']
       }
     }
   }
   ```

通过以上方法，可以提高 Vue 3 项目在 iOS 10 上的兼容性，避免白屏问题。

在 Webpack 1 中，可以通过在配置文件中设置 `babel-loader` 的选项来启用 `loose` 模式。以下是一个示例配置：

```jsx
module.exports = {
  module: {
    loaders: [
      {
        test: /\\\\.js$/,
        loader: 'babel-loader',
        query: {
          presets: ['es2015'],
          plugins: [['transform-es2015-classes', { loose: true }]]
        }
      }
    ]
  }
};
```

在这个配置中，我们使用了 `babel-loader` 来处理 JavaScript 文件，并在 `query` 选项中设置了 Babel 的 `presets` 和 `plugins`。`transform-es2015-classes` 插件的 `loose` 选项被设置为 `true`，以启用松散模式。

如果项目中只有一个 `.babelrc` 文件，您可以通过在该文件中设置 `plugins` 选项来启用 `loose` 模式。以下是一个示例配置：

```json
{
  "presets": ["es2015"],
  "plugins": [
    ["transform-es2015-classes", { "loose": true }]
  ]
}
```

在这个配置中，我们使用了 `presets` 和 `plugins` 选项。`transform-es2015-classes` 插件的 `loose` 选项被设置为 `true`，以启用松散模式。

要解决 "Cannot assign to read only property '__esModule' of #Object" 的问题，可以尝试以下几种方法：

1. **检查依赖版本**： 确保所有相关依赖的版本兼容，特别是 Babel 和 Webpack 等工具的版本。

2. **使用 `import` 代替 `require`**： 如果你在使用 `require` 导入模块，尝试使用 ES6 的 `import` 语法。例如：

```
   import myModule from 'my-module';
   ```

3. **确保模块的正确导出**： 确保模块正确导出了 `__esModule` 属性。可以使用 `babel-plugin-add-module-exports` 来帮助解决这个问题。

4. **配置 Babel**： 在 Babel 配置中添加以下插件：

直接在 `__esModule` 属性的原型上进行修改不是一个推荐的解决方案，因为这可能会导致其他不可预见的问题，并且破坏模块的标准行为。更好的方法是查明问题的根源并正确解决它。

不过，如果你确实需要一种非常规的解决方法来临时绕过这个问题，可以尝试以下代码，但请记住这只是一个临时解决方案，不推荐用于生产环境：

### 临时解决方案：修改属性的可写性

可以尝试使用 `Object.defineProperty` 来修改 `__esModule` 属性的可写性：

```jsx
   Object.defineProperty(module.exports, '__esModule', {
     value: true,
     writable: true,
     configurable: true
   });
   ```

### 示例代码：

```jsx
   // 在你的入口文件或模块文件中添加以下代码
   Object.defineProperty(module.exports, '__esModule', {
     value: true,
     writable: true,
     configurable: true
   });
   
   // 你的其他代码
   ```

### 注意事项

1. **稳定性**：这种方法只是一个临时解决方案，可能会引入其他问题，不推荐在生产环境中使用。
   2. **代码可维护性**：这种修改方式可能会影响代码的可维护性，建议查找问题的根本原因并正确解决。

### 更好的解决方法

更好的方法是排查导致 `__esModule` 属性只读的原因。可能的原因包括：

1. **错误的 Babel 配置**：检查你的 Babel 配置是否正确。
   2. **第三方库问题**：可能某些第三方库或模块导致了这个问题，尝试更新或替换它们。
   3. **版本不兼容**：确保使用的 Babel 及其插件版本相互兼容，避免版本冲突。

### 示例项目结构

确保你的项目结构类似如下：

```
   my-project/
   ├── node_modules/
   ├── src/
   │   └── index.js
   ├── .babelrc
   ├── package.json
   └── webpack.config.js
   ```

### 清除缓存和重新安装依赖

有时，缓存问题可能导致配置未生效。你可以尝试删除 `node_modules` 目录和 `package-lock.json` 文件，然后重新安装依赖：

```bash
   rm -rf node_modules package-lock.json
   npm install
   ```

### Babel 配置示例

确保你的 .babelrc 文件配置正确：

```json
   {
     "presets": ["es2015", "stage-2"],
     "plugins": ["transform-runtime"]
   }
   ```

通过以上方法，你可以尝试临时解决 `Cannot assign to read only property '__esModule' of #Object` 错误，但建议尽量查明问题根本原因并正确解决。如果问题依然存在，请提供更多的错误信息和代码示例，以便进一步排查和解决问题。

5. **升级依赖**： 确保升级所有相关依赖到最新版本，因为一些旧版本可能存在此类问题。

这些步骤应该能帮助你解决 "Cannot assign to read only property '__esModule' of #Object" 的问题。

```

Visual Studio Code通常在每个版本中都支持其插件。然而，某些插件可能需要特定的VS Code版本才能正常工作。为了确定一个插件所需的最低VS Code版本，可以查看该插件在VS Code商店页面中的“要求”部分。

如果你想安装低版本的CocoaPods，你可以按照以下步骤操作：

1. 在终端输入以下命令来卸载当前版本的CocoaPods：

```bash
   sudo gem uninstall cocoapods
   ```

2. 在提示选择要卸载的版本时，选择全部卸载。

3. 卸载完成后，输入以下命令来安装指定版本的CocoaPods，例如安装1.5.3版本：

```bash
   sudo gem install cocoapods -v 1.5.3
   ```

请注意，替换上述命令中的"1.5.3"为您想要安装的CocoaPods版本。

在许多电视剧的开头，男女主角通常会通过一系列的事件和冒险逐渐建立起深厚的感情，并最终成为情侣。这些事件可能包括共同面对困难，互相帮助，或者一起经历一些能够加深他们之间关系的重大事件。

`addEventListener` 方法的第3个参数可以是一个布尔值或一个对象。默认值为 `false`。当不传递第3个参数时，默认情况下会进行事件冒泡（即 `capture` 为 `false`）且不会启用 `once` 和 `passive` 特性。

具体默认值如下：

1. **capture**: 默认值为 `false`，表示事件在冒泡阶段执行。
2. **once**: 默认值为 `false`，表示事件监听器可以被多次执行。
3. **passive**: 默认值为 `false`，表示事件监听器可以调用 `preventDefault()`。

例如，以下两个 `addEventListener` 调用是等效的，因为未传递第3个参数时，默认值为 `false`：

```jsx
element.addEventListener('click', handler);
element.addEventListener('click', handler, false);
```

Mark/iOS_html

简介

发行版

贡献者

语言

近期动态

Mark/iOS_html .gitee-modal { width: 500px !important; }

简介

发行版

贡献者

语言

近期动态

搜索帮助

Mark/iOS_html