摘要：
题目：设计一个js抽奖程序，一共分为三等奖，每一个等级的中奖概率及中奖人数都可自定义。 解法核心： 设定概率： 一等奖概率：10%（即 0 - 0.1 的范围） 二等奖概率：30%（即 0.1 - 0.4 的范围） 三等奖概率：40%（即 0.4 - 0.8 的范围） 剩余 20% 不中奖（即 0. 阅读全文
摘要：
特性WebpackRollupViteRspackSWCEsbuild 文件输入 单文件或多文件 单文件或多文件 单文件或多文件 单文件或多文件 单文件或多文件 单文件或多文件 原目录输出 ✅ 支持 ✅ 支持 ✅ 支持 ✅ 支持 ❌ 不支持 ✅ 支持 文件捆绑 ✅ 支持 ✅ 支持 ✅ 支持 ✅ 支持 阅读全文
摘要：
一、webpack热更新原理 1.使用 webpack-dev-server (后面简称 WDS)托管静态资源、提供websocket服务 2.webpack打包时会将HMR Runtime和源代码一起编译成 bundle 文件。HMR Runtime主要 负责接收服务发送的websocket消息， 阅读全文
摘要：
刚接触bable的同学可能会认为使用了Babel，配置了preset预设后就可以愉快的使用 es6+做开发了，事实上，在默认情况下Babel只会做语法转换(let、const、class、箭头函数等)，而不做新api的转换，新的api总结起来分为两类： 全局对象和全局对象相关的方法，例如Promis 阅读全文
摘要：
一、配置文件 几乎所有的前端工程师都知道可以用babel将es6+的语法转换为es5，转换工具要么使用babel-cli，要么使用webpack的babel-loader，不管使用哪种转换工具，通常都需要一个配置文件来建立转换规则（也可以在webpack的babel-loader的配置项，原理都一样 阅读全文
摘要：
一、场景 0.1 + 0.2 = 0.30000000000000004 1.5 - 1.2 = 0.30000000000000004 19.9 * 100 = 1989.9999999999998 0.3 / 0.1 = 2.9999999999999996 二、原因 js中的数字只有 Numb 阅读全文
摘要：
事件绑定方法有三种，如下： Html事件处理程序-直接在元素上指定事件及相应的处理程序，事件处理程序中可直接访问event对象（不需要用参数接收event独享），this指向当前元素，同时还扩展了this和document的作用域，即访问对象的属性或方法时可以省略this或document Dom0 阅读全文
摘要：
一、惰性载入函数(lazy function) 使用场景：当一个函数中的判断分支只用执行一次（第一次调用时执行），后续不会再变化，则可以使用惰性函数来提高性能。 var addEvent = function(elem, type, handler) { if (window.addEventLis 阅读全文
摘要：
因为 Math.random() 制造的随机数范围是[0, 1)想要生成16到22之间的随机数(即最小值m=16，最大值n=22)，首先需要计算出最大值与最小值的差range=m-n 随后把[0, 1)这个区间的随机数乘以range，区间就拓展到[0, 6)。在此基础之上再加最小值，范围就移动到[1 阅读全文
摘要：
一、Loader写法及执行顺序 从webpack2起，loader的格式如下： module: { rules: [ {test: /\.css$/, use: ['style-loader','css-loader']}, ] } webpack1中的写法如下： module: { loaders 阅读全文
摘要：
一、什么是BFC css布局主要采用盒子模型（BOX），元素的类型和 display 属性，决定了 Box 的类型，常见的盒子类型有两种： block-level box:display 属性为 block, list-item, table 的元素，会生成 block-level box。 inl 阅读全文
摘要：
在 Git 中，拉取代码的常用方式有两种模式：git pull 和 git fetch。它们的主要区别在于拉取的行为以及是否会自动合并。 1. git pull 模式 git pull 是 拉取代码并自动合并 的操作，等价于以下两步操作的组合： git fetch git merge 特点 将远程分 阅读全文
摘要：
一、作用： 清理提交历史：当在开发过程中频繁提交（如修复小的编译错误或调试输出），并希望将这些提交合并为一个更有意义的提交时，可以使用Git Rebase。 在共享分支上保持历史线性：在团队协作中，如果你正在一个需要保持清晰线性历史的分支（如master或main分支）上工作，Git Reba 阅读全文
摘要：
在 Webpack 插件开发中，apply 方法是插件的核心入口。每个 Webpack 插件都是一个包含 apply 方法的对象，Webpack 在运行时会调用这个方法，将 Webpack 的编译器（compiler）对象作为参数传递给它，从而允许插件挂载到 Webpack 的事件系统中，并通过钩子 阅读全文
摘要：
一、前端错误的捕获 在 JavaScript 日志系统中，捕获错误的范围应该全面，涵盖前端应用中可能出现的各类问题，包括语法错误、运行时错误、资源加载错误以及用户行为异常等。以下是不同类型错误的捕获方法： window.onerror: 可捕获常规错误（例如语法错误，变量未定义、函数调用错误等）、计 阅读全文
摘要：
ES6 的 Symbol 是一种独特的原始数据类型，用于生成唯一的标识符。它的主要特点是每次创建的 Symbol 值都是唯一的，即使描述相同，也不会相等。 1.定义对象的唯一属性键，防止命名冲突 在对象中定义键值时，通常使用字符串作为键，但这可能导致命名冲突。而使用 Symbol 作为键可以确保属性 阅读全文
摘要：
分为数据结构上的堆和栈，操作系统中的堆和栈 一、数据结构中的堆和栈 堆：堆是满足一定限制的树型结构（比如父亲节点的权值要大于儿子节点的权值，左儿子又要大于右儿子）。 栈：是一种先进后出的数据结构，只能对栈顶进行操作 二、操作系统中的堆和栈 栈区（stack）— 由编译器自动分配的连续内存空间 ，申请 阅读全文
摘要：
在前端播放一个大小为 10GB 的视频时，直接下载整个视频文件然后播放显然是不切实际的，因为这样会导致极大的延迟和带宽消耗。为了尽快开始播放大文件，可以采用以下几种技术来优化视频播放体验。 1.视频流式传输 (Streaming) 流式传输允许前端在不下载完整文件的情况下，就能开始播放视频。具体的方 阅读全文
摘要：
发布订阅模式（Publish-Subscribe）与观察者模式（Observer Pattern） 发布订阅模式和观察者模式都属于常见的设计模式，用于在一个对象的状态变化时，通知其他对象。然而，它们的实现方式和适用场景略有不同。接下来，我们分别解释这两种模式的差异，并提供 JavaScript 示例 阅读全文
摘要：
在 React 中，通过 React.forwardRef 和 useImperativeHandle 可以实现将父组件的 ref 转发给子组件，从而引用子组件的 DOM 或方法。以下是实现的步骤和代码示例： import React, { forwardRef, useImperativeHand 阅读全文