摘要：
随着新的一年的钟声敲响，祝大家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 阅读全文
摘要：
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;// 将对象作为弹性伸 阅读全文
摘要：
yarn 的特别礼物 在终端命令上，yarn不仅仅是对npm的命令做了一个改名，还增加了一些原本没有的命令，这些命令在某些时候使用起来非常方便 yarn check 使用yarn check命令，可以验证package.json文件的依赖记录和lock文件是否一致 这对于防止篡改非常有用 yarn 阅读全文
摘要：
yarn 的核心命令 初始化 初始化：yarn init [--yes/-y] 安装 添加指定包：yarn [global] add package-name [--dev/-D] [--exact/-E] 安装package.json中的所有依赖：yarn install [--productio 阅读全文
摘要：
yarn 简介 yarn 官网：https://www.yarnpkg.com/zh-Hans/ yarn 是由Facebook、Google、Exponent 和 Tilde 联合推出了一个新的 JS 包管理工具，它仍然使用 npm 的registry，不过提供了全新 CLI 来对包进行管理 过去 阅读全文
摘要：
类和类之间的关系 A is-a B（A是一个B） 泛化（继承 实现） 继承关系 子类想要继承父类，通过extends关键字来实现 子类继承了父类，可以调用父类中的（public protected）的属性和方法 2.1 构造方法严格意义来说 不算做子类继承过来，只是单纯的在子类调用构造方法时，默认调 阅读全文
摘要：
属性描述符 Property Descriptor 属性描述符 是一个普通对象，用于描述一个属性的相关信息 通过Object.getOwnPropertyDescriptor(对象, 属性名)可以得到一个对象的某个属性的属性描述符 value：属性值 configurable：该属性的描述符是否可以 阅读全文
摘要：
普通符号 符号是ES6新增的一个数据类型，它通过使用函数 Symbol(符号描述) 来创建 符号设计的初衷，是为了给对象设置私有属性 私有属性：只能在对象内部使用，外面无法使用 符号具有以下特点： 没有字面量 使用 typeof 得到的类型是 symbol 每次调用 Symbol 函数得到的符号永远 阅读全文
摘要：
## 踩坑日记 npm install总是到最后不动，最后发现是npm淘宝镜像源地址更新了，所以我们同步一下即可； 1. 解决问题方法，npm淘宝镜像源换最新的 ``` // 切换新的镜像源 npm config set registry https://registry.npmmirror.com 阅读全文
摘要：
### 准备环境 全局下载依赖：`npm install -g @vue/cli-service-global` ### vue serve 1. 然后运行 vue serve 组件的url，这时候我们发现可以对单独的.vue进行测试了 ### 配置脚本 1. 打开项目根目录的package.jso 阅读全文
摘要：
## 过渡与动画 * 使用过渡和动画，可以让css属性变化的更加丝滑； * 过渡和动画无法对所有的css属性产生影响，能够产生影响的只有数值类属性，例如：颜色、宽高、字体大小等（支持数值类的过渡）。 ### 过渡 `transition: 过度属性 持续时间 过度函数 过度延迟` （谁过渡，过渡时间 阅读全文
摘要：
* log的二次封装 * 具体代码 ```js function print(info) { const contentArr = info.map(info => info.content); const styleArr = info.map(info => info.style).map(st 阅读全文