- 博客(127)
- 资源 (11)
- 收藏
- 关注
RSS订阅原创 模块联邦（Module Federaton）
模块联邦 通过动态代码共享和依赖协调，为微前端、跨应用协作提供了轻量化解决方案，兼顾性能与灵活性。其核心价值在于打破应用边界，实现”模块即服务“ （Modules as Service），是构建现代分布式前端架构的重要基石。
2025-04-01 14:18:35
776
原创 SEO 优化
前端 SEO 需从代码结构、内容质量、技术选型多维度切入，结合工具（如 Google PageSpeed insights、SEMrush）持续监测优化。重点包括语义化标签、TDK 精准化、URL 规范化及性能提升，同时关注移动适配与预渲染技术。
2025-04-01 13:14:50
725
原创 Vue 3.0 知识点
速度更快 ( 重写了虚拟 Dom 实现，编译模块的优化，更高效的组件初始化，update 性能提高 1.3 ~ 2 倍，SSR 速度提高了 2 ~ 3 倍 )Composition Api ，组件根据逻辑功能来组织的，一个功能所定义的所有 API 会放在一起（更加的高内聚、低耦合），可以优化代码组织。diff 算法优化 （在会发生变化的地方添加一个 flag 标记，下次发生变化的时候直接找该处进行比较）静态提升 （对不参与更新的元素，会做静态提升，智慧创建一次，在渲染时直接复用）减少程序体积（更小）
2025-03-24 13:27:23
273
原创 前端常用的设计模式及使用场景
一. 创建型模式1. 单例模式（Singleton Pattern）2. 工厂模式（Faciory Pattern）二. 结构性模式1.装饰器模式（Decorate Pattern）2.代理模式（Proxy Pattern）3. 适配器模式（Adapter Pattern）三. 行为型模式1. 观察者模式（Observer Pattern）2. 发布-订阅模式（Pub-Sub Pattern）3. 策略模式（Strategy Pattern）四、设计原则与模式选择核心原则：模式选择建议
2025-03-21 13:48:34
253
原创 vue 知识点整理
维度对象形式函数形式数据隔离性所有实例共享同一对象，导致数据污染每个实例拥有独立数据副本复用安全性不适用于可复用组件支持组件安全复用语言机制引用传递引发副作用函数返回值实现作用域隔离（闭包）框架约束仅根实例允许使用组件必须使用data 函数在每次调用时形成闭包，返回的对象属于当前组件实例的作用域链，不会被其他实例访问或修改Vue 自定义指令是一种针对 DOM 元素底层操作的复用逻辑机制，允许开发者封装（如焦点控制、样式操作、事件监听等行为）。
2025-03-13 17:41:52
1099
原创 css 知识点整理
/ 私有变量（加 - 前缀）// 公开变量default;// 2.7.2 引入模块 main.scssbody {// 报错（无法访问私有变量）
2025-03-12 15:11:26
1088
原创 JavaScript 知识点整理
AST Abstract Syntax Tree抽象语法树，用于表达源码的树形结构Babel：一个广泛使用的 JS 编译器，将ES6+ 或 JSX 等现代语法转换为兼容性较好的 ES5 代码。Eslint：JS 静态代码分析工具，它基于 AST 来分析代码中潜在问题和违反的代码规范。Terser：JS 压缩工具，使用 AST 进行代码压缩和混淆webpack 和 Rollup：构建工具使用AST 来优化 JS 和其他前端资源的打包过程。
2025-03-03 16:51:43
961
原创 常用的 Web API
Clipboard API 是浏览器提供的 JavaScript 接口，允许网页安全地读写剪切板内容，支持文本、图片、富文本等数据类型。Interserction API 是一种用于异步检测模板元素月视口（或者指定父元素）交叉状态变化的浏览器原生接口，主要那个用于解决传统滚动监听性能差、实现复杂的问题，适用于懒加载、慢点曝光、无线滚动等场景。Web Animation API 是浏览器原生提供的 JavaScript 接口，用于通过编程方式控制 DOM 元素，替代或补充传统 CSS。
2025-02-27 16:09:38
305
原创 Vue-Cli 使用 vue-cli-plugin-dll 进行预编译，提升构建速度
本质是将大量复用模块且不会频繁更新的库进行预编译，且只需要编译一次，编译完成后产出指定文件（可以称为动态链接库）。一般可以将第三方模块进行预编译，如 vue、vue-router、vuex等，只要这些依赖模块不更新，就不需要再重新编译。注意事项：每当生成过dll中存在依赖需进行升级或更新的时候，都要执行 生成dll文件（ npx vue-cli-service dll ） 的命令来生成新的文件。4. 启动、打包项目。
2024-06-11 15:14:38
543
原创 git commit 设置 eslint + pretter 格式化校验，导出报告
3.1 在.eslintrc 的 rules 中加入"quotes": ["error", "single"]， 不允许使用双引号。4.1 在package.json scripts 新增脚本 "prepare": "husky install"3.3 在main.js 中加入 console.log("hello world")，触发eslint。3.2 在 package.json scrtipt 中加入 "lint": "eslint src"4.2 生成 .husky 文件夹(当前文件夹)
2023-05-11 18:55:53
1251
1
原创 vue2-ace-editor 代码编辑器、格式化代码
ace-editor 代码编辑器格式化使用插件使用 beautify 格式化代码 （github）使用 beautify
2022-06-22 09:31:41
2453
原创 VScode 插件路径修改（自用）
Plan A: 使用 mklink （是 NTFS 文件系统中指向文件系统中的另一个对象的一类对象），先找到 C盘的 vscode 插件目录，先备份然后再删除，然后用管理员打开 CMD ，输入mklink /D "C:\Users\{username}\.vscode\extensions" "D:\vscode\extensions"Plan B: 先找到 vscode的快捷方式的图标，将 目标 加入 --extensions-dir "D:\vscode\extensions"
2022-05-18 09:02:16
1204
原创 算法问题集合
说说你对树的理解？二叉树：本身是有序树 树中包含的各个结点不能超过 2，即只能是 0、1 或者 2满二叉树、完成二叉树前序：根左右中序：左根右后序：左右根
2022-04-24 10:36:13
135
原创 node 问题集合
Node.js 的理解？优缺点？应用场景？Node.js 是一个开源与跨平台的 Javascript 运行时环境。在浏览器外运行 V8 Javascript，利用事件驱动、非阻塞和异步输入输出模型等基础提高性能可以理解为 Node.js 就是一个服务端的、非阻塞式I/O（输入/输出）、事件驱动的 Javascript 运行环境优点：处理高并发场景性能更佳 适用 I/O 密集型应用，指的是应用在运行极限时，CPU 占用率仍然比较低，大部分时间再做 I/O 硬盘内存读写操作缺点：不适用.
2022-04-18 15:18:12
749
原创 Typescript
Typescript 的理解，与 JavaScript 的区别理解： Typescript 是 JavaScript 的超集，支持 ES6 语法，支持面向对象编程的概念，比如类、接口、继承、泛型等特性：类型批注和编译时的类型检查：在编译时批注变量类型 类型推断：ts 中没有批注变量类型会自动推断变量的类型 类型擦除： 接口：ts 中用接口来定义对象的类型 枚举 Mixin 泛型编程 名字空间 元祖Typescipt 数据类型新增有哪些？tuple （元祖类型
2022-04-18 10:00:01
510
原创 前端笔试整理
// 第一题window.name = 'NB'function A() { this.name = 123}A.prototype.getA = function () { console.log(this) return this.name + 1}let a = new A()let funA = a.getAfunA()// Window// NB1// 第二题var length = 10function fn(){ return this.le.
2022-04-14 15:35:45
138
原创 ES6 问题集合
1. ES6 中数组新增了哪些扩展？扩展运算符 Array.from() [ 类似数组的对象和可遍历(iterable)的对象（ 包括 Set 和 Map ）转换为真正的数组] 和 Array.of() 将一组值转换为数组 数组实例对象新增的方法 （copyWithin()、find()、findIndex()、fill()、entries()、keys、values()、includes()、flat()、flatMap()）2. ES6 对象新增了哪些扩展？属性的简写（在 ES6 中，当.
2022-04-06 13:20:16
1212
原创 渲染 10W 条数据
主要思路是：使用文档碎片 ( createDocumentFragment) + 逐帧加载（requestAnimationFrame）// 10W 数据源const total = 100000// 每次插入的条数const once = 30// 插入需要的次数,可能除不尽，向上取整const loopCount = Math.ceil(total/once)// 渲染的次数let countRender = 0// 获取插入的父节点const ul = document.q
2022-04-02 11:16:14
212
原创 JavaScript 判断对象是否为数组中的七种方法
let obj1 = {}let obj2 = [1,2,3]let obj3 = new Date()console.log( obj1, obj2, obj3)// 第一种console.log( Array.isArray(obj1), Array.isArray(obj2), Array.isArray(obj3),)// 第二种console.log( obj1 instanceof Array, obj2 .
2022-03-25 09:21:16
946
原创 虚拟 DOM 和 DIFF 算法
虚拟 DOM 就是 js 对真实 DOM 的模拟，是一个对象Vue 基于 Snabbdom 库 实现虚拟 DOM虚拟 DOM 的好处比较变化，计算最小需要更新的视图，然后在操作 DOMdiff 算法1. 遍历老的虚拟 DOM2. 遍历新的虚拟 DOM3. 重新排序只比较同一层级，不跨级比较只比较标签名，1. 标签名不同，直接删除，不继续深度比较； 2. 标签名相同，key 相同，就认为是相同节点，不继续深度比较；...
2022-03-19 12:53:07
862
原创 Vuex 状态管理
1. 什么是 VuexVuex 是实现组件全局状态( 数据 )管理的一种机制，可以方便的实现组件之间数据的共享。2. 使用 Vuex 统一管理状态的好处能够在 Vuex 中集中管理共享的数据，易于开发和后期维护 能够高效地实现组件之间的数据共享，提高开发效率 存储在 vuex 中的数据都是响应式的，能够实时保持数据与页面的同步3.用法1. stroe 文件 : index.jsimport Vue from 'vue'import Vuex from 'vu...
2022-03-18 15:05:48
1044
原创 npm 整理
1.NPM 包的语义化版本规范包的版本号是以 “点分十进制” 形式进行定义的，共有三位数字，例如 2.24.0其中每一位数字代表含义如下：第 1 位数字 ： 大版本第 2 位数字 ：功能版本第 3 位数字 ：Bug修复版本版本号提升规则： 只要前面的版本号增长了，则后面的版本号就要归零2.快速创建 package.jsonnpm init -y3. devDependencies( 开发依赖包 ) 和 dependencies( 核心依赖包 )如果某些包只在项目
2022-03-16 10:33:09
1254
原创 var 、let 和 const 区别
1. var var 定义的变量可以修改，如果不初始化会输出undefined，不会报错； 在相同作用域里，可以重复声明同一个变量; 会声明提升；（ if 内的 {} 不是作用域） 2. let let是块级作用域，函数内部使用let 定义后，对函数外部无影响； 在相同作用域里，不可以重复声明同一个变量； 声明的变量不会存在变量提升；（ if 内的 {} 是作用域 ） “暂时性死区”，在代码块内，使用let命令声明变量（或者con
2022-03-11 16:07:56
902
原创 px、em、 rem、vh、vw 的区别
1、px：相对长度单位。像素px是相对于显示器屏幕分辨率而言的。2、em：相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。3、rem：相对长度单位。r’是“root”的缩写，相对于根元素<html>的字体大小。4、vh and vw：相对于视口的高度和宽度，而不是父元素的（CSS百分比是相对于包含它的最近的父元素的高度和宽度）。5、vmin and vmax：关于视口高度和宽度两者的最小值或者最大值。...
2022-03-11 14:49:26
6622
2
原创 VUE 项目中遇到的问题归总
正常项目平时运行的好好，突然有一天项目启动报错了，多由于项目中的某些包的版本出现问题1.nodo 版本号和 npm版本号不匹配有时候手贱升级了node 版本，导致了 npm run serve 项目跑不起来 。解决方案：方案一：node 版本回退方案二： 如要一定要升级高版本的话，先回退node版本，再升级npm到指定版本，然后最后升级node 版本npm install -g npm@X.X.X2.node 版本号V16.12.0 对应的node-sass 和
2022-03-09 16:00:11
1874
原创 ES6 Class
// console.log('hello')// function Father () {// this.name = '父亲'// this.age = '66'// this.say = function () {// console.log(" I'm father")// }// }// const abb = new Father()// console.log(abb.name) // 父亲// ES6 新写法class Father {.
2022-03-08 11:09:58
133
原创 ES6 模块化 和 COMMON模块化
ES6 模块化// util.js// 模块私有成员const a1 = 1const a2 = 2// 默认导出export default { a1, a2 }// 按需导出export function show () { console.log('world')}export function say () { console.log('say')}/** 默认导出和按需导出*** 1. 有{}花括号的为按需导入，没有花括号的为默认导入*** 2
2022-03-08 09:51:28
147
原创 vue-router 路由整理
什么是路由？Hash 地址与组件之间的对应关系前端路由的工作原理？1.用户点击了页面上的路由链接；2.导致URL地址栏中的Hash值发生了变化；3.前端路由监听到了Hash地址变化；4.前端路由把当前Hash对应的组件渲染到浏览器中；vue-router 安装和配置的步骤1.安装vue-router 包npm i vue-router@3.5.2 -S2.创建路由模块,并声明路由的匹配规则在src 源代码目录下，新建router/index.js，并初始
2022-03-01 11:26:40
549
原创 async 函数
什么是async？async 函数是什么？一句话，它就是 Generator 函数的语法糖。// 前文有一个 Generator 函数，依次读取两个文件。const fs = require('fs');const readFile = function (fileName) { return new Promise(function (resolve, reject) { fs.readFile(fileName, function(error, data) {
2022-02-28 14:17:00
113
原创 使用 Ant Design Vue 的 RangePicker 组件
<template> <div> <a-form :form="searchform" layout="inline"> <a-form-item label="日期"> <a-range-picker :show-time="{ format: 'HH:mm:ss', defaultValue: defaultDate }" format="YYYY-MM-DD HH:m.
2022-02-24 16:23:58
2236
转载 使用MultiTab过程中，解决NavigationDuplicated: Avoided redundant navigation to current location: 问题
import VueRouter from 'vue-router'Vue.use(VueRouter)// 缓存原型上的push函数const originPush = VueRouter.prototype.pushconst originReplace = VueRouter.prototype.replace// 给原型对象上的push指定新函数函数VueRouter.prototype.push = function (location, onComplete, onA...
2022-02-21 14:47:28
448
原创 JavaScript 数据类型 ( 深拷贝和浅拷贝 )
简单类型 ( 值类型 ) 和复杂类型（ 引用类型 ）简单类型又叫做基本数据类型或者值类型，名值存储于栈内存中，String、Number、Boolean、null、undefined、Symbol、BigInt(ES10)复杂类型又叫做引用类型，（名在栈内存中，值存在于堆内存中 ），在存储时变量中的存储仅仅是地址（ 引用），通过 new 关键字创建的对象 （ 系统对象、 自定义对象），如Object、Function、 Array 、Date 等堆和栈（ JS 中没...
2022-02-14 16:07:20
589
原创 JavaScript 预解析----遍历提升和函数提升
浏览器分成两部分： 渲染引擎和JS引擎渲染引擎： 用来解析HTML与CSS,俗称内核，比如chrome浏览器的blink，老版本的webkitJS引擎：JS解析器。用来读取网页中的JavaScript代码，对其处理后运行，比如chrome浏览器的V8浏览器本身并不会执行JS代码，而是通过内置的JavaScript引擎（解释器）来执行JS代码。JS引擎执行代码时逐行解释每一句源码（转换为机器语言），然后由计算机去执行，所有JavaScript语言归为脚本语言，会逐行解释执行。作用域（如果在
2022-01-28 10:10:07
940
原创 javascript 基础汇总
文章目录javascript 汇总Javascript 由三部分组成继承， 继承可以使得子类别具有父类的的各种方法和属性（六种）闭包在浏览器中从输入Url并回车发生了什么？CSRF(跨站请求伪造)Referer原生javaScript节点BOM 浏览器对象模型遍历对象作用域函数表达式（匿名函数）深拷贝、浅拷贝预解析字符串浏览器的同源策略( 跨域 )javascript 汇总Javascript 由三部分组成ECMAScript 语法DOM 页面文档对象模型BOM 浏览器对象模型继承， 继承
2022-01-28 09:05:27
1154
原创 Generator 函数的语法
执行 Generator 函数会返回一个遍历器对象，也就是说，Generator 函数除了状态机，还是一个遍历器对象生成函数。返回的遍历器对象，可以依次遍历 Generator 函数内部的每一个状态。形式上，Generator 函数是一个普通函数，但是有两个特征。一是，function关键字与函数名之间有一个星号；二是，函数体内部使用yield表达式，定义不同的内部状态（yield在英语里的意思就是“产出”）。Yield 表达式由于 Generator 函数返回的遍历器对象，只有调用ne
2022-01-27 17:28:26
351
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人