星Blog - Peter Qiu 的技术博客

面试题系列均来自鱼皮的知识星球——编程导航 说说你对 JS 模块化方案的理解，比如 CommonJS、AMD、CMD、ES Module 分别是什么？AMDAMD是一种异步模块加载规范，专为浏览器端设计，其全称是Asynchronous Module Definition，中文名称是异步模块定义。AMD规范定义模块的方式如下： 1define(id?, dependencies?, factory) 浏览器并不支持AMD模块，在浏览器端，需要借助RequireJs才能加载AMD模块。RequireJS是使用最广泛的AMD模块加载器，但目前的新系统基本不再使用RequireJS,因为大部分库都会提供对AMD模块的支持。 12345678// 匿名，无依赖模块，文件名就是模块名define(function() { function clone(source) { //此处省略代码 } return clone}) 上面的代码定义了一个匿名AMD模块，假设代码位于clone.js文件中，那么在index.js文件中可以像下面这样使 ...

今天弄项目，因为电脑有2个github账号，跟着相关教程配置了ssh的设置，但是还是出了问题(结果原因是github的权限设置，要拉取最新才能push) 以下都是费时间的坑（我菜） git 回滚版本我要回到过去！ 123456# 撤销 commit 操作git reset --soft HEAD~1 # git reset --soft commit_id# 撤销 commit 和 add 操作git reset --mixed HEAD~1 # git reset --mixed commit_id# 撤销 commit 和 add 操作同时撤销本地已追踪内容的修改git reset --hard HEAD~1 # git reset --hard commit_id github PR合并commitpr太多commit了，不好看 在 Git 中，这种操作就叫做 变基（rebase）。 你可以使用 rebase 命令将提交到某一分支上的所有修改都移至另一分支上，就好像“重新播放”一样。 变基的风险 呃，奇妙的变基也并非完美无缺，要用它得遵守一条准则： 如果提交存在于你的仓库之 ...

面试题系列均来自鱼皮的知识星球——编程导航 有哪些 CSS 性能优化的操作或技巧？ 使用合适的选择器：选择器的复杂度会影响 CSS 渲染性能。尽量使用简单的选择器，避免使用通配符和后代选择器等复杂的选择器。 避免使用 @import：@import 可以在 CSS 文件中导入其他 CSS 文件，但它会阻塞页面的渲染，影响性能。建议使用 link 标签来引入 CSS 文件。 避免使用 !important：!important 会影响 CSS 属性的优先级，而且会增加解析和渲染时间。建议尽量避免使用 !important。 避免使用 inline 样式：inline 样式的优先级最高，但它会增加 HTML 文件的大小，降低页面的加载速度。建议使用外部 CSS 文件和内部样式表。 压缩和合并 CSS 文件：压缩和合并 CSS 文件可以减小文件大小，提高页面加载速度。可以使用工具例如 CSSMin 和 YUI Compressor 等来进行压缩和合并操作。 使用 CSS Sprites：CSS Sprites 可以将多个小图片合并成一张大图片，并使用 CSS 来显示不同的部分，减少 HTTP ...

面试题系列均来自鱼皮的知识星球——编程导航 React.memo() 和 useMemo() 的用法是什么，有哪些区别？React.memo() 和 useMemo() 是 React 中用于性能优化的两个钩子函数。 React.memo() 是一个高阶组件，用于优化组件的性能。它会比较组件的新旧 props，如果 props 没有发生改变，则跳过渲染，直接使用上一次渲染的结果。使用 React.memo() 可以避免组件不必要的重新渲染，从而提高应用程序的性能。 用法示例： 1const MemoizedComponent = React.memo(MyComponent); useMemo() 是一个 Hook，用于缓存函数的计算结果。它可以缓存组件的 props 或其他数据的计算结果，只有当依赖项发生改变时才重新计算。 用法示例： 1const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]); 区别： React.memo() 用于优化组件的性能，它会比较组件的新旧 props，如果 ...

面试题系列均来自鱼皮的知识星球——编程导航 怎么使用 CSS3 来实现动画？你实现过哪些动画？css3 动画的实现的方案，大概有以下方案： js 的 animation() 方法实现动画 @keyframes + animation：这是一个实现动画的组合，必须一起使用。 @keyframes——创建动画 （1）在 @keyframes 中用 from 和 to 创建动画 （2）在 @keyframes 中用 “百分比” 创建动画 （3）将 @keyframes 嵌套进要添加动画的元素的样式里 animation 执行动画 transition：表示过渡。transition 可以单独使用 transform：表示变形。使用 transform 实现动画时有两种选择： transform + transition：一次性动画。transform 定义行为，transition 驱动，但一次仅能驱动一次。 transform + @keyframes + animation：支持循环动画。在 @keyframes 里使用 transform 定义行为，animatio ...

面试题系列均来自鱼皮的知识星球——编程导航 use strict 是什么？有什么作用？“use strict” 是 ECMAScript 5 引入的一种严格模式，它用于指示 JavaScript 引擎采用更严格的解析和执行模式。 当在 JavaScript 代码中使用 “use strict” 声明时，代码将会在严格模式下执行。严格模式包含了一些额外的规则和限制，有助于开发者避免一些常见的错误。 使用 “use strict” 的主要作用包括： 消除 JavaScript 中的一些不合理、不安全的语法，减少代码出错的可能性。 防止使用未声明的变量、函数，强制开发者进行声明。 强制函数中的 this 值只能在函数内部使用，避免在全局作用域中误用 this 值。 禁止删除变量、函数等，避免意外删除重要的变量和函数。 提高代码性能，因为 JavaScript 引擎可以更好地进行优化。 使用 “use strict” 的方式有两种： 在 JavaScript 文件开头使用 “use strict”。 在函数体内第一条语句中使用 “use strict”。 例如，在 JavaScript ...

面试题系列均来自鱼皮的知识星球——编程导航 为什么 JS 要被设计为单线程？JS 被设计为单线程的主要原因是为了避免多线程编程所带来的复杂性。如果 JS 是多线程的，那么在处理并发问题时，需要考虑锁、同步等一系列复杂的问题，这会增加代码的复杂度和开发难度。 此外，JS 最初是为了解决网页交互的问题而诞生的，而网页交互的需求大部分是基于用户事件的，比如点击按钮、输入文本等。这些操作的响应速度要求很高，如果在响应事件的同时还要处理其他任务，可能会导致网页卡顿、响应变慢等用户体验不佳的问题。 因此，为了避免多线程所带来的复杂性和降低开发难度，并且满足网页交互的高响应速度需求，JS 被设计为单线程。虽然单线程有局限性，但是可以通过异步编程、事件循环机制等技术手段来实现高效的并发处理。 TypeScript 中的 Declare 关键字有什么用？TypeScript 中的 declare 关键字用于声明一个变量、函数、类等的类型信息，但不实现其具体实现。它主要用于在编译时进行静态类型检查，并在编译后移除声明的代码，以减少 JavaScript 文件的大小。 使用 declare 关键字声明的类型 ...

面试题系列均来自鱼皮的知识星球——编程导航 Vue Router 的 $route 和 $router 对象有什么区别？在 Vue.js 中，$route 和 $router 都是 Vue Router 提供的对象，但它们的作用不同。 $route 对象代表着当前激活的路由信息，它包含了当前 URL 解析得到的信息，如当前路径、参数、查询参数等。$route 对象是一个只读对象，我们无法通过改变 $route 对象来改变当前路由。 $router 对象则是 Vue Router 的实例对象，它负责管理整个路由的状态，包括当前路径、路由参数、路由切换等。$router 对象可以通过编程的方式来改变当前路由，如通过 $router.push()、$router.replace()、$router.go() 等方法。 总的来说，$route 对象是获取当前路由信息的方式，$router 对象则是控制当前路由状态的方式。 介绍下从 HTTP/1.0、HTTP/1.1 到 HTTP/2 再到 HTTP/3 的演化过程，各个阶段相对前一阶段做了哪些优化HTT ...

面试题系列均来自鱼皮的知识星球——编程导航 怎么解决跨域问题？跨域问题（Cross-Origin Resource Sharing，CORS）是由于浏览器的同源策略（Same-Origin Policy）导致的。同源策略指的是，如果两个 URL 的协议、主机名和端口号都相同，那么它们就是同源的，否则就是跨域的。当网页发起跨域请求时，浏览器会根据同源策略限制请求。解决跨域问题的方法有以下几种： JSONP（JSON with Padding） SONP 是一种跨域请求数据的方式，它利用了 <script> 标签不受同源策略限制的特性，可以从不同的域名请求数据。实现原理是在服务端生成一个 JavaScript 函数，客户端使用 <script> 标签请求该函数，服务端返回该函数的调用，并将需要传输的数据作为函数参数传入。 CORS（Cross-Origin Resource Sharing） CORS 是一种通过添加一些 HTTP 头来允许浏览器跨域访问资源的机制，主要是服务端配置。服务端需要在响应头中添加 Access-Control-Allow-Origin ...

面试题系列均来自鱼皮的知识星球——编程导航 什么是箭头函数？能使用 new 来创建箭头函数么？箭头函数是 ES6 中新增的一种函数定义方式，可以用来简化函数的定义和书写。箭头函数的特点是：简洁的语法、绑定 this 关键字、不能用作构造函数。 箭头函数使用箭头（=>）来定义，基本语法如下： 1(parameters) => { statements } 其中，parameters 是函数的参数列表，可以是一个或多个参数，多个参数之间用逗号分隔；statements 是函数的执行语句，可以是一个或多个语句，多个语句之间用花括号包裹起来。 在箭头函数中，this 关键字指向的是函数定义时所在的对象，而不是执行时所在的对象。这个特性有助于避免 this 的指向问题，使得代码更加简洁易读。 需要注意的是，箭头函数不能用作构造函数，也就是不能通过 new 关键字来创建实例。因为箭头函数没有自己的 this，而是继承了外层作用域的 this。如果用 new 来创建实例，就会出现意料之外的结果。 什么是 webpack 的热更新？它的实现原理是什么？web ...