摘要：
随着新的一年的钟声敲响，祝大家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 阅读全文
摘要：
git 常用命令。 创建SSH Key $ ssh-keygen -t rsa -C "youremail@example.com" 配置用户信息 $ git config --global user.name "Your Name" $ git config --global user.email 阅读全文
摘要：
为防止不符合规范的数据存入数据库，在用户对数据进行插入、修改、删除等操作时，MySQL提供了一种机制来检查数据库中的数据是否满足规定的条件，以保证数据库中数据的准确性和一致性，这种机制就是完整性约束。 MySQL中主要支持以下几种种完整性约束，如表所示。 其中Check约束是MySQL8中提供的支持 阅读全文
摘要：
DDL修改，删除数据库表 -- 修改表结构 -- 增加一列 ALTER TABLE t_student ADD score DOUBLE(5, 2); -- 增加一列（放在最前面） ALTER TABLE t_student ADD score DOUBLE(5, 2) FIRST; -- 增加一列 阅读全文
摘要：
修改，删除数据 DML -- 修改操作 UPDATE t_student SET age = 23 WHERE sno = 2056035; -- 删除操作 DELETE FROM t_student WHERE sno = 2056035; 总结 关键字，表名，字段名不区分大小写。 默认情况下，内 阅读全文
摘要：
插入数据 SELECT * FROM t_student; -- 在t_student数据库表中插入数据 INSERT INTO t_student VALUES (2056035, '张三', '男', 18, NOW(), '移动2002', '666666@163.com'); INSERT 阅读全文
摘要：
hash模式 <html> <head> <meta charset="UTF-8"> <title>Hash</title> <style> .nav_container { display: grid; justify-content: center; width: 100%; height: 阅读全文
摘要：
vite.config.js中配置esbuild import { fileURLToPath, URL } from 'node:url' import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' export 阅读全文
摘要：
webpack+Terser 代码压缩 // webpack.config.js const TerserPlugin = require('terser-webpack-plugin'); const OptimizeCSSAssetsPlugin = require('optimize-css- 阅读全文
摘要：
圣杯模式 圣杯模式的核心就是拿一个空的构造函数去当中间人,解决组合模式的缺陷。 举个例子 function Person(name, age) { this.name = name??""; this.age = age??""; }; Person.prototype.say = function 阅读全文
摘要：
组合模式 前置知识 原型 原型链 apply 举个例子 function Person(name, age) { this.name = name??""; this.age = age??""; }; Person.prototype.say = function () { console.log 阅读全文
摘要：
数据模式，结构，Props Vue双向绑定，修改数据自动更新视图，React单向数据流，需要手动setState。 Vue template 结构表现分离，React jsx 结构表现融合。 Vue Props 要声明才能使用，React 不需要声明直接使用。 阅读全文
摘要：
使用ref 可以使用 ref 创建一个响应式的数据： <template> <div>{{ name }}</div> </template> <script setup> import { ref } from 'vue' // 现在的 name 就是一个响应式数据 let name = ref( 阅读全文
摘要：
// 该函数就是接受不了多个参数 // function add(x, y) { // return x + y; // } // console.log(add(1, 2)); // 3 // console.log(add(5, 7)); // 12 // 接下来我们要将其进行柯里化 // fu 阅读全文
摘要：
/* * @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 请求体 阅读全文