摘要：
随着新的一年的钟声敲响，祝大家2024年元旦快乐！愿你的代码如同流水般顺畅，bug远离你的键盘。在这个充满希望的新年里，愿你在编程的世界里发现更多的乐趣和创新。让我们一起在代码的海洋里航行，探索未知的领域，创造出更加精彩的作品。愿你在新的一年里，不仅技术日新月异，也能享受生活的每一个美好瞬间。新年快 阅读全文
摘要：
### 编译结果分析 #### 观察编译结果后，模拟打包模块 ``` // 改对象中保存了所有的模块，以及模块对应的代码 var modules = ((modules)=> { var moduleExports = {}; // 用于缓存模块的导出结果 // require函数相当于是运行一个模 阅读全文
摘要：
Vue数据响应式底层原理 数据响应式定义：（当数据变化的时候，会自动运行一些相关函数） 原理就是通过Object.defineProperty() 对属性进行劫持，当访问该属性时我们就收集依赖，当数据发生改变后就派发更新 function observe(obj) { for (const key 阅读全文
摘要：
深度克隆（深拷贝） export const deepClone = (targetObj)=> { return new Promise(resolve => { const { port1, port2 } = new MessageChannel(); port1.postMessage(ta 阅读全文
摘要：
/* * @Author: HuangBingQuan <17671241237@163.com> * @Date: 2024-07-07 21:16:08 * @LastEditTime: 2024-07-08 12:56:45 * @FilePath: /myCdn/index.js */ co 阅读全文
摘要：
所有的webpack内置插件都作为webpack的静态属性存在的，使用下面的方式即可创建一个插件对象 const webpack = require("webpack") new webpack.插件名(options) DefinePlugin 全局常量定义插件，使用该插件通常定义一些常量值，例如 阅读全文
摘要：
解决方法 配置vite-env追加element的类型文件 /// <reference types="element-plus/global" /> 阅读全文
摘要：
环境 直接跑一个vue组件，正常的命令是这样的 vue serve src/components/demo1.vue 输出提示： Command vue serve requires a global addon to be installed. Please run npm i -g @vue/c 阅读全文
摘要：
Webpack简介 Webpack是基于模块化的打包（构建）工具，它把一切视为模块； 它通过一个开发时态的入口模块为起点，分析出所有的依赖关系，然后经过一系列过程（压缩，合并），最终生成运行时态的文件。 webpack的特点： 为前端工程化而生：webpack致力于解决前端工程化，特别是浏览器端工程 阅读全文
摘要：
plugin loader的功能定位是转换代码，而一些其他的操作难以使用loader完成，比如： 当webpack生成文件时，顺便多生成一个说明描述文件 当webpack编译启动时，控制台输出一句话表示webpack启动了 当xxxx时，xxxx 这种类似的功能需要把功能嵌入到webpack的编译流 阅读全文
摘要：
const listeners = {}; export default { // 监听某一个事件 $on(eventName, handler) { if(!listeners[eventName]) { listeners[eventName] = new Set(); } listeners[ 阅读全文
摘要：
Array.prototype.sort((a, b)=> a.localeCompare(b)) ### 举个例子 ['b', 'a', 'd', 'c'].sort((a, b) => a.localeCompare(b)) 阅读全文
摘要：
export const AutoScale = (targetEl, options, root)=> { const el = document.querySelector(targetEl); if(!el) throw new Error("初始化失败"); const { width, h 阅读全文
摘要：
const fs = require('fs'); const path = require('path'); class File { constructor(fileName, name, ext, isFile, size, createTime, updateTime) { this.fil 阅读全文
摘要：
clip-path: polygon(50% 0, 0 100%, 100% 100%) 阅读全文
摘要：
/** * 导出excel * * @param {blob} data 后端返回的文件流 * @param {String} fileName 文件名 */ export const exportFile = (data, fileName) => { const binaryData = []; 阅读全文
摘要：
迭代器 背景知识 什么是迭代？ 从一个数据集合中按照一定的顺序，不断取出数据的过程 迭代和遍历的区别？ 迭代强调的是依次取数据，并不保证取多少，也不保证把所有的数据取完 遍历强调的是要把整个数据依次全部取出 迭代器 对迭代过程的封装，在不同的语言中有不同的表现形式，通常为对象 迭代模式 一种设计模式 阅读全文
摘要：
前言：为了更好的代码提示，我们可以使用ts的@types/node包来增强代码提示 yarn add @types/node -D || npm i @types/node -D || pnpm i @types/node -D 在浏览器 JavaScript 中全局对象是 window， 而 No 阅读全文
摘要：
什么叫做响应式呢？ 实际上是指一套代码能够在不同的设备下有着不一样的表现。响应式设计依托于 CSS3 中的媒体查询，通过查询当前设备的一个尺寸信息，然后应用不同的样式。 响应式设计在刚推出时非常的火，因为那个时候也没有什么专门针对移动设备设计的页面，而且一套代码就能解决 PC、平板和手机不同设备的各 阅读全文
摘要：
使用Key 对于通过循环生成的列表，应该给列表每一项一个稳定且唯一的key，这个有利于在列表变动时，尽量减少删除，新增，改动元素。 使用冻结的对象 冻结的对象不会被响应化，应用场景（当一个列表无需变化时可以使用） 使用函数式组件 在模板中 添加 functional标记 在js中添加function 阅读全文
摘要：
v-if能够控制是否生成vnode，也就间接控制了是否生成对应的dom。当v-if为true时，会生成对应的vnode，并生成对应的dom元素；当其为false时，不会生成对应的vnode，自然不会生成任何的dom元素。 v-show始终会生成vnode，也就间接导致了始终生成dom。它只是控制do 阅读全文
摘要：
分析打包结果 由于vue-cli是利用webpack进行打包，我们仅需加入一个webpack插件webpack-bundle-analyzer即可分析打包结果 // vue.config.js const BundleAnalyzerPlugin = require("webpack-bundle- 阅读全文
摘要：
在本地环境配置 https 证书 在使用 HTML5 的 API 时，很多 API 只能在 https 保证安全的情况下才能开启。这就要求我们在本地开发环境也能够配置 https，否则你需要每次部署到配有 https 的测试环境中才能看到预览效果，这对开发的敏捷度造成了极大的干扰。 本文和 WebA 阅读全文
摘要：
判断xy是否变化了 true 变化了 false没变化 // 此写法可能会出bug 因为没有考虑0和NaN的情况 const hasChanged = (x, y)=> { return x !== y; } // 最终写法 const hasChanged = (x, y)=> { if(x y) 阅读全文
摘要：
虚拟DOM 什么是虚拟DOM 虚拟DOM本质上就是一个普通的Js对象，用于描述视图的界面结构 为什么需要虚拟DOM树 主要为解决渲染效率问题。 在vue中，渲染试图会调用render函数，这种渲染不仅发生在组件创建时，同时发生在试图依赖的数据更新时。如果在渲染时，直接使用真实DOM，由于真实DOM的 阅读全文
摘要：
比如 npx serve 执行本地的 serve命令，如果serve没有安装，则npx会自动的、临时的安装serve，安装好后，自动运行serve命令 阅读全文
摘要：
防抖与节流的本质就是：通过闭包特性减少操作次数 举一个现实生活中的例子 // 两个大巴的故事 // 防抖， // A大巴：车上上去一个人，五分钟之内不上人，发车。 // 节流。 // B大巴：车上上去一个人之后，五分钟之后发车。 // 发车！网络请求（A => B) 提高利用率 减少B的压力。 // 阅读全文
摘要：
Promise.resolve = new Promise(()=> resolve()) 应用场景 我们可以使用Promise.resolve来完成模拟数据 function getData() { return Promise.resolve([ { id: 0, name: "张三"}, { 阅读全文
摘要：
contenteditable 全局属性 contenteditable 是一个枚举属性，表示元素是否可被用户编辑。如果可以，浏览器会修改元素的组件以允许编辑。 // 注入 打开F12 浏览器输入 document.documentElement.setAttribute('contentedita 阅读全文
摘要：
文件上传 流程： 客户端将文件数据发送给服务器 服务器保存上传的文件数据到服务器端 服务器响应给客户端一个文件访问地址 测试地址：http://xxx/api/upload 键的名称（表单域名称）：imagefile 请求方法：POST 请求的表单格式：multipart/form-data 请求体 阅读全文
摘要：
/** * 自定义组件全局注入 * @param app vue实例 */ import { defineAsyncComponent } from "vue"; export default function (app) { // 收集@/components所有.vue组件 const comp 阅读全文
摘要：
indexDB简介 indexDB本质上就是存储数据，优点不受大小限制，当数据大于 > 5MB 时我们无法通过localStorage、cookie（只能存4k）存储 // 连接数据库 （连接的过程是一个异步的）window.indexedDB.open('库名称', '库版本号') >= 0 co 阅读全文
摘要：
uni.chooseImage({ count: 1, // 图片张数 success: async res => { const reader = new FileReader(); reader.readAsDataURL(res.tempFiles[0]); reader.onload = a 阅读全文
摘要：
String.prototype.padStart() padStart() 方法从字符串的开头用另一个字符串填充一个字符串到一定长度，并返回一个达到一定长度的结果字符串。下面说明了 padStart() 方法： String.prototype.padStart(padLength [,padSt 阅读全文
摘要：
Symbol和访问器主要是来限制实例成员的 如果一个成员暴露出去只让读不让改，我们就可以在类中使用访问器 class Person { get name() { return "HuangBingQuan" } } 如果一个成员不让暴露出去（不让外界访问）那就使用Symbol作为属性值 functi 阅读全文
摘要：
Vite 是一个现代化的前端构建工具，它提供了内置的环境变量来辨别当前环境是生产环境还是开发环境。在 Vite 中，可以通过检查 import.meta.env 对象来获取当前环境的信息。 import.meta.env 对象包含了一些常用的环境变量，其中最重要的是 MODE 变量。MODE 变量表 阅读全文
摘要：
any 大法 ✨ 前期开发代码量少，快速简单。 🚨 由于未定义 interface 导致整个项目充斥着大量 any 类型，项目沦为 AnyScript。 🚨 无法获得健全的 ts 语法检测功能，弱化了使用 ts 的作用。 🚨 后期维护成本高，后端修改字段，ts 语法无法检测。 interfac 阅读全文
摘要：
前言 今天给大家分享一个在 React 项目中使用 TypeScript 遇到的错误 项目背景 React + TS 的项目配置，项目中关于 React 组件的使用 .tsx 后缀，其他单纯的文件使用 .ts 后缀 问题描述 在 React 组件附近定义泛型的箭头函数时产生 TS 报错警告，原本以为 阅读全文
摘要：
泛型 有时，书写某个函数时，会丢失一些类型信息（多个位置的类型应该保持一致或有关联的信息） 泛型：是指附属于函数、类、接口、类型别名之上的类型 泛型相当于是一个类型变量，在定义时，无法预先知道具体的类型，可以用该变量来代替，只有到调用时，才能确定它的类型 很多时候，TS会智能的根据传递的参数，推导出 阅读全文
摘要：
模块的加载机制 1、优先从缓存中加载 模块在第一次加载后会被缓存。 这也意味着多次调用 require() 不会导致模块的代码被执行多次。 注意：不论是内置模块、用户自定义模块、还是第三方模块，他们都会优先从缓存中加载，从而提升模块的加载效率。 2、内置模块的加载机制 内置模块是由 Node.js 阅读全文
摘要：
uni-app textarea placeholder在小程序中错乱不兼容问题 解决方案 将textarea替换成editor即可 阅读全文
摘要：
定义指令 全局定义 // 指令名称为：mydirec1 Vue.directive('mydirec1', { // 指令配置 }) // 指令名称为：mydirec2 Vue.directive('mydirec2', { // 指令配置 }) 之后，所有的组件均可以使用mydirec1和mydi 阅读全文
摘要：
overflow: hidden;// 超出的文本隐藏 text-overflow: ellipsis;// 溢出用省略号显示 display: -webkit-box; -webkit-line-clamp: 2; //多行在这里修改数字即可 overflow:hidden;// 将对象作为弹性伸 阅读全文