程序员零塔的小破站

导读现在面试题会问到很多的场景题，例如【如何设计一个input框，输入内容请求数据，你会如何设计】。通常情况下可能只想到防抖功能，但却忘记了请求数据必定会请求接口，而基于用户侧来说，请求接口是异步的，用户并不清楚程序在后面干了什么；如果请求成功了最好，如果请求失败了呢？还有用户可能输入一些无效的或者不安全的内容，如果空白字符也就没有了请求接口的意义，如果是一些HTML片段，那么也容易构成XSS攻击。本文接下来从用户体验、性能优化（面向浏览器渲染、面向服务端请求）、前端安全、兼容性等四个大的维度展开。 用户体验用户体验的核心是流畅无卡顿、且有友好的反馈、错误提示等。 确保用户操作及时响应如果系统中除了该input框的交互以外，有其他任务执行，且任务涉及复杂计算、渲染的，有可能造成用户交互卡顿，因此尽量不在JS处理复杂计算和渲染；如确有必要，请使用Web...

导读最新面试被问到了如何去遍历一个Object，以下就简单记录一下几种方法和不同吧。 for…in…使用for...in...可以遍历一个对象，其可以迭代所有的字符串属性，包括从原型链继承来的。MDN 12345const object = { a: 1, b: 2, c: 3 };for (const property in object) { console.log(`${property}: ${object[property]}`);} 但如果只想用自己的属性，可以通过Object.prototype.hasOwnProperty判断 123456789const originObject = { a: 1, b: 2, c: 3 }const object = Object.create(originObject);object.d=4for (const property in object) { ...

导读最近了解到package.json中一直被忽略的一个属性sideEffects，其标识了模块是否会对全局应用产生副作用。下面将来解释一下吧。 sideEffects的工作原理1. Tree Shaking 的基础Tree Shaking 是打包工具通过静态分析移除未使用代码的优化技术。 如果模块被标记为无副作用，且未被其他模块使用，打包工具会将其移除。 2. 副作用的影响如果模块有副作用，即使未被其他模块使用，打包工具也不能移除它（因为副作用可能会影响应用的行为）。 通过 sideEffects 字段明确标记副作用，打包工具可以更安全地进行 Tree Shaking。 sideEffects 的注意事项1. 确保正确标记副作用如果错误地将有副作用的模块标记为无副作用，可能会导致应用行为异常。 例如，如果 polyfill 文件被错误地标记为无副作用，可能会被错误地移除。 2. 测试 Tree Shaking 效果在开发库时，建议使用打包工具（如 Webpack 或 Rollup）测试 Tree Shaking 的效果，确保 sideEffects 配置正确。 3. 与...

导读不管是vue还是react，都提到了副作用的概念，虽然大致知道是返回渲染视图之外对整个系统或者应用内部造成其它影响的叫做副作用，但具体哪些操作属于副作用，面试时常常答不上来，特以本文记录。 定义副作用（Side Effects）：指的是在组件渲染过程中，除了返回 JSX（React）或模板（Vue）之外，还会执行一些额外的操作，这些操作可能会影响组件之外的状态或环境。 两个关键点：额外的操作、组件之外的状态和环境。组件本身上其表达式为： 视图 = fn(props) fn即组件，而函数本身的定义上同样的输入必定得到同样的输出，具有确定性，也不会产生额外的作用。而副作用就相反，会额外的产生props到视图中额外地行为。 React 中的副作用React 中的副作用范围在React 中，副作用通常指的是: 修改全局变量。 操作 DOM 节点。 发起网络请求。 设置定时器或事件监听器。 修改 Redux 或 Context 中的状态。 React 如何处理副作用React 提供了 useEffect 钩子来处理副作用。useEffect...

导读笔者在学习React，经常混淆useEffect和useLayoutEffect，傻傻分不清楚。接下来简要结合我的个人博客的开发经历从其底层执行和具体影响来具体分析。 执行时机 useEffect 在浏览器完成（DOM）渲染后，异步执行，不会阻塞主线程。 useLayoutEffect 在浏览器完成（DOM）渲染后，立刻执行，会阻塞主线程，因此会导致性能问题。 使用场景获取文章数据使用useEffect1234567891011121314151617181920212223242526272829import React, { useEffect, useState } from 'react';function DataFetchingExample() { const [data, setData] = useState(null); useEffect(() => { // 模拟数据获取 ...

导读面试时被面试官问到了Vue的template和React的JSX有何不同，其中说到Vue3也能使用JSX，问Vue3是如何实现的。本文就来探讨一下这个功能。 React的JSX要说Vue的JSX，首先就需要谈到React的JSX。 比如一个App组件： 1234567891011import React from 'react';function App() { return ( <div> <h1>Hello, React 18!</h1> </div> )}export default App; 其使用webpack构建时，可以通过@babel/preset-react转为 1React.createElement("div",null,React.createElement("h1","Hello, React...

导读**在 React 中，**受控组件（Controlled Components）和非受控组件（Uncontrolled Components）是处理表单元素的两种不同方式。它们的核心区别在于数据由谁管理。 一、受控组件 (Controlled Components)定义：表单元素的值由 React 的 state 控制，用户输入会触发状态更新，组件状态与用户输入始终保持同步。 特点 **表单的 **value（或 checked）属性绑定到 React 的 state。 **通过 **onChange 事件监听输入变化，更新 state。 数据完全由 React 控制，是“单一数据源”。 代码示例12345678910111213141516171819function ControlledForm() {  const [inputValue, setInputValue] = useState('');  const handleSubmit = (e) => {    e.preventDefault();  ...

导读笔者最近在疯狂面试，有些面试官会经常问到前端安全相关的内容。我背八股文时老是在背：XSS(跨站脚本攻击)、CSRF(跨站请求伪造)、CSP(内容安全策略)、Clickjacking(点击劫持)等。但实际上面试官想知道的不仅仅是概念层面，而是我们求职者在平时开发上如何规避这些常规的安全性问题，避免产品上线后埋下隐患。 下文就将结合笔者本人的技术栈:Vue、React、Next.js，谈一谈总结到的解决方法。 XSS（跨站脚本攻击） Vue： 默认转义：使用 {{ }} 插值时自动转义 HTML。 风险点：v-html 指令会渲染原始 HTML，需用 DOMPurify 等库净化内容。 12345678910<div v-html="purifiedContent"></div><script>import DOMPurify from 'dompurify';export default { data() { return {...

导读Vue有一个注入全局上下文的机制，叫provide/inject，其可以向子级组件注入一些属性，无论嵌套得有多深。其效果和React的Context类似。本文将通过具体的源码详细说明其原理实现。 下方所述代码在 /core/packages/runtime-core/src/apiInject.ts provideprovide 接受两个参数，key和value，也就是注入数据的key值和具体注入的数据，key可接受string和Symbol类型。 先贴出源码 123456789101112131415161718192021222324export function provide<T, K = InjectionKey<T> | string | number>( key: K, value: K extends InjectionKey<infer V> ? V : T,): void { if (!currentInstance) { if (__DEV__) { ...

导读面试时被问到了如果监听一个嵌套属性很深的对象，直接使用watch可能会失效，因为Vue2的响应式系统默认是无法检测到深层嵌套属性的变化。和面试官讨论了一会儿，加上面试后问了一下DeepSeek，总结得到了可以采用的方法。 注意，以下内容，都将讨论对user.address.city的监听 12345678910111213export default { data() { return { user: { name: 'John', address: { city: 'New York', zip: '10001' } } }; }}; 使用options配置中的deep属性。12345678watch: { user: { handler(newVal,...