- 博客(79)
- 收藏
- 关注
RSS订阅原创 技术掉：PDF显示，使用pdf.js
其实直接显示 pdf 可以用 iframe 标签，但产品觉得浏览器自带的 pdf 预览太丑了，而且无法去除那些操作栏。然后将下载好的文件放进项目的静态文件夹，我用的是 vite 项目，所以是 public。filte 是你的 pdf 的路径，本地路径和 url 路径都是可以的。直接去修改 viewer.html 里面的代码就行了。首先此插件跨域的话会报错，需要注释掉部分代码。下载稳定版的 pdf.js 文件。设置好之后就可以预览了。注释掉之后就可以解决了。
2023-03-17 17:29:48
942
原创 技术点：前端缓存分类及使用
和浏览器缓存：比如,localStorage,sessionStorage,cookie 等等。这些功能主要用于缓存一些必要的数据，比如用户信息。比如需要携带到后端的参数。亦或者是一些列表数据等等。比较基础，不做过多赘述。
2023-02-06 13:44:03
280
原创 技术点：weekMap和Map的区别
当使用 map 时，由于对键值是强引用，map 的 obj 属性被赋值为空时，obj 所对应的 'xxxx’值其实还是存在的，并没有被回收，所以真正去清空应该使用 delete 方法，然后再清空 obj 的引用。解析：WeakMap 的键是对象的时候，如果该对象被赋值为空时，垃圾回收机制会对那个对象所对应的值也进行垃圾回收。而使用 WeakMap 的时候，想处理属性，直接清空 obj 的引用就行了，obj 所对应的值也会直接被回收。答案： WeakMap 是弱引用。
2023-02-01 15:30:52
71
原创 技术点：sequelize基础入门
对于 UUID,使用 DataTypes.UUID. 对于 PostgreSQL 和 SQLite,它会是 UUID 数据类型;
2023-01-31 13:46:51
34
原创 TypeScript 入门知识点记录
可以使用对象索引签名声明、Record 工具类两种方法。默认 circle 为真时，radius 一定存在。用于构造一个含有 Type 函数的返回值的类型。左侧为可选择的属性，右侧为需过滤掉的属性。左侧为可选择的属性，右侧为选择好的属性。含义是取 T 和 K 未共有的字段。含义是取 T 和 K 共有的字段。左侧为属性类型，右侧为值。
2023-01-10 16:39:28
17
原创 技术点：JavaScript的几种常用高阶函数及其应用场景
维基百科中对偏函数 (Partial application) 的定义为：翻译成中文：在计算机科学中，局部应用是指固定一个函数的一些参数，然后产生另一个更小元的函数。什么是元？元是指函数参数的个数，比如一个带有两个参数的函数被称为二元函数。return a + b } // 执行 add 函数，一次传入两个参数即可 add(1 , 2) // 3 // 假设有一个 partial 函数可以做到局部应用 let addOne = partial(add , 1) addOne(2) // 3。
2023-01-05 14:52:09
177
原创 技术点：vue3 使用 ref 绑定 router-view，想调取某个子路由中的方法来重载数据
当前有一个页面为父路由页面(/system)他的子页面是他的两个下级(/system/user /system/auth)由于搜索框及添加按钮都在父级母版中，现在需要在点击添加按钮或者搜索框搜索时都触发子路由页面对应的方法，如：在tab选中用户列表时，触发子页面内的添加用户方法，tab选中角色权限时，触发子页面的添加角色方法在 /system 中在 /system/user ， /system/auth中
2022-12-07 10:28:45
343
原创 monaco-editor（code编辑器插件）使用及常用配置与方法
2.在 vite.config.js 中配置3.新建组件code-editor.vue4.使用常用方法// 常用设置// 监听事件editor.getValue()editor.setValue(‘77777’)editor.dispose() //销毁实例monaco.editor.setModelLanguage(editor.getModel(), ‘javascript’) //语言设置editor.getAction(‘editor.action.formatDocument’).r
2022-12-06 15:01:39
855
原创 前端开发规范：JavaScript 规范
下列关键字后必须有大括号（即使代码块的内容只有一行）：if, else, for, while, do, switch, try, catch, finally, with。通常情况下，参数超过两个意味着函数功能过于复杂，这时需要重新优化你的函数。过多的参数将导致难以采用有效的测试用例对函数的各个参数进行测试。Promises 是较回调而言更好的一种选择，但 ES7 中的 async 和 await 更胜过 Promises。注释并不是必须的，好的代码是能够让人一目了然，不用过多无谓的注释。
2022-10-17 09:16:14
191
原创 前端开发规范：CSS 代码规范指南
样式书写一般有两种：一种是紧凑格式 (Compact)一种是展开格式（Expanded）统一使用展开格式书写样式。
2022-10-13 14:05:23
453
原创 微前端：使用qiankun框架的注意点
解决方案： 使用 vite-plugin-qiankun 包，暂未使用过，不过看有部分人是使用的这个。第一个微应用 mount 后需要调用的方法，比如开启一些监控或者埋点脚本。初始化完成后进入默认的子应用。
2022-10-11 16:58:13
339
原创 微前端：使用qiankun框架从 0-1 搭建vue构成微前端项目
最终一个简单的微前端就配置好了，可通过主应用的路由来控制显示哪个子应用。新建 main 主应用和两个使用 vue/cli 创建的子应用。如果报错了 就降级 vue/cli 到 4 版本。main 项目中的 main.js。main 项目中的 App.vue。
2022-10-11 11:54:12
478
原创 优雅的解决uniapp 页面多个组件调用同一个生命周期时的冲突
page 页面定义一个对象，储存所有上拉刷新要触发的方法，再定义两个添加或删除属性的函数// 下拉的方法组成的对象 const pullRefreshEvent = {};/*** 添加事件* @param {string} key 事件的key（唯一值）* @param {function} fun 要执行的方法}page 页面监听 onPullDownRefresh 事件，循环管理方法的对象，执行所有的方法} });父组件向外暴露方法，供子模块调用。
2022-09-28 10:06:51
477
原创 技术点：前端缓存（web 缓存）详解
web 缓存主要指的是两部分：浏览器缓存和 http 缓存浏览器缓存： localStorage,sessionStorage,cookie 等等http 缓存： 通过配置 http 请求头来达到缓存的效果，分为强缓存和弱缓存值得注意的一点是，不同于 cache-control 是 expires 的完全替代方案(说人话:能用 cache-control 就不要用 expiress)。ETag 并不是 last-modified 的完全替代方案。
2022-09-19 11:33:51
667
原创 js算法之旅：二叉搜索树实现
二叉树中的节点最多只能有两个子节点：一个是左侧子节点，另一个是右侧子节点。这些定义有助于我们写出更高效的向/从树中插入、查找和删除节点的算法。二叉树在计算机科学中的应用非常广泛。二叉搜索树（BST）是二叉树的一种，但是它只允许你在左侧节点存储（比父节点）小的值，在右侧节点存储（比父节点）大（或者等于）的值。......
2022-08-30 09:46:35
251
原创 安装 commitlint 和 husky 约束项目提交规范
添加 hook 之后，每次 git commit 之前都会先运行 npm run lint，通过之后才会提交代码。现在提交信息不合法就会被拦截导致提交失败，规范可见 commitlint ，你也可以根据需要修改提交信息规范。然后把 commitlint 命令也添加 Husky Hook。然后在 package.json 中添加脚本 prepare 并运行。通过 Husky 在 Git commit 时进行代码校验。运行命令后会在项目根目录创建 .husky 文件夹。现在给 Husky 添加一个 Hook。.
2022-08-17 15:46:25
309
原创 js数据结构与算法：链表
什么是链表？链表存储有序的元素集合，但不同于数组，链表中的元素在内存中并不是连续放置的。每个元素由一个存储元素本身的节点和一个指向下一个元素的引用（也称指针或链接）组成例子火车实现function LinkedList() { let Node = function (element) { // {1} this.element = element; this.next = null; }; let length = 0; // {2} let head =
2022-08-12 16:35:35
23
原创 js数据结构与算法：优先队列
一般来说，队列讲究先进先出，后进后出就像排队一样。但现实中往往有人有特权，比如机场vip，医院急症室，这些都属于需要优先处理的，即使他是后来的，但人家优先级比较高。
2022-08-12 11:08:13
391
原创 使用auto-imgport插件实现vue3等API的自动引入
大多数页面都会有一堆 import 来引入一些函数，会非常麻烦，但如果我们使用了 unplugin-auto-import 这个插件之后，我们就可以省去这些常用的 import。声明文件 auto-imports.d.js 时自动生成的，可以去看看文件内容，里面会标明自动引入了哪些东西。第二步：引入到项目的配置文件中，此处以 vite 为例（更多场景使用请自行查阅官网。第一步：安装 unplugin-auto-import 依赖。这样项目代码写起来就简单多了！...
2022-08-11 10:22:52
294
原创 js算法之旅：用队列和栈计算出扑克玩：拖板车（小猫钓鱼） 游戏的结果
小哼先拿出手中的第一张扑克牌放在桌上，然后小哈也拿出手中的第一张扑克牌，并放在小哼刚打出的扑克牌的上面，就像这样两人交替出牌。出牌时，如果某人打出的牌与桌上某张牌的牌面相同，即可将两张相同的牌及其中间所夹的牌全部取走，并依次放到自己手中牌的末尾。假如游戏开始时，小哼手中有 6 张牌，顺序为 2 4 1 2 5 6，小哈手中也有 6 张牌，顺序为 3 1 3 5 6 4，最终谁会获胜呢？现在你可以拿出纸牌来试一试。存储数据的方式，先进后出、后进先出，例如手枪上膛了，先打出得永远是最后上进去那发子弹。...
2022-08-05 10:37:27
939
原创 踩坑：uniapp写hooks时，响应式丢失
拿到数据时，可以打印，但是页面没更新！！然后想通过监听，来看看是不是ref的响应丢失了但从上图发现，watch是可以监听到变化的，那是啥子原因？？？突然，发现了编辑器出现了一行小字，黄色警告setData数据传输长度为1076KB，存在有性能问题！我想，我一行代码咋会有16kb呢，难道是接口数据的问题？然后瞅了一眼接口返回的数据，好家伙，五万多条！破案了，就是数据太大的原因，到时页面由于性能问题无法响应，页面遭不住，数据太多了。...
2022-07-28 14:42:16
369
原创 JavaScript算法之旅：简易桶排序、冒泡排序、快速排序
每次排序的时候设置一个基准点，将小于等于基准点的数全部放到基准点的左边，将大于等于基准点的数全部放到基准点的右边。这样在每次交换的时候就不会像冒泡排序一样只能在相邻的数之间进行交换，交换的距离就大得多了。当然在最坏的情况下，仍可能是相邻的两个数进行了交换。因此快速排序的最差时间复杂度和冒泡排序是一样的，都是O(N2)，它的平均时间复杂度为O(NlogN)。小哼的班上只有5个同学，这5个同学分别考了5分、3分、5分、2分和8分，哎考得真是惨不忍睹（满分是10分）。...
2022-07-26 15:18:04
293
原创 打开vscode时，提示：尝试在目标目录创建文件时发生一个错误，拒绝访问
打开vscode时，提示尝试在目标目录创建文件时发生一个错误，拒绝访问。等更新好之后就可以了。
2022-07-19 08:52:16
1602
原创 uni-app 项目搭建流程指南
一般是选择默认模板或者uni-ui项目（uni-ui是一个uni的ui组件库，还是很好用的），然后点击下面的创建。
2022-07-15 10:33:56
1974
原创 干货：Vue3 与 Vue2 的区别（详细）
vue2 的 options APIvue3 的 composition APIv-if 和 v-for 优先级的区别vue3 中 v-if 比 v-for 优先级更高，而 vue2 中 v-for 优先级更高由于 vue3 使用 typeScript 重构了，所以对 ts 的类型提示特别友好mixin 由于会导致变量来源不明确等问题，所以 vue3 借鉴了 react 中很强大的 hooks低情商：我们抄了 react 的 hooks高情商：我一部分的灵感来自于 react 中的 hooks...
2022-07-13 09:19:45
686
1
原创 JavaScript 函数高阶用法
将函数的参数通过连续调用分开来传实现偏函数用途在多次调用某个函数时，将函数的公共参数进行封装，返回一个新的函数实现惰性函数用途在多次调用某个函数时，只返回第一次调用的结果，类似缓存，原理是重写函数函数组合用途在需要对某一个值进行多个函数的过滤时，可以使用函数组合实现函数记忆用途某个函数在多次调用时，如果参数没变，直接拿缓存下来的数据...
2022-06-22 01:00:00
33
原创 JavaScript类数组对象与arguments
所谓的类数组对象:举个例子：即便如此，为什么叫做类数组对象呢？那让我们从读写、获取长度、遍历三个方面看看这两个对象。长度遍历是不是很像？那类数组对象可以使用数组的方法吗？比如：然而上述代码会报错: arrayLike.push is not a function所以终归还是类数组呐……如果类数组就是任性的想用数组的方法怎么办呢？既然无法直接调用，我们可以用 Function.call 间接调用：类数组转对象在上面的例子中已经提到了一种类数组转数组的方法，再补充三个：那么为什么会讲到类数组
2022-06-17 09:14:25
50
原创 js继承的多种方式和优缺点
本文讲解JavaScript各种继承方式和优缺点。但是注意：这篇文章更像是笔记，哎，再让我感叹一句：《JavaScript高级程序设计》写得真是太好了！问题：1.引用类型的属性被所有实例共享，举个例子：2.在创建 Child 的实例时，不能向Parent传参优点：1.避免了引用类型的属性被所有实例共享2.可以在 Child 中向 Parent 传参举个例子：缺点：方法都在构造函数中定义，每次创建实例都会创建一遍方法。原型链继承和经典继承双剑合璧。优点：融合原型链继承和构造函数的优点，是 JavaS
2022-06-14 11:27:07
141
原创 JavaScript中的闭包详解
MDN 对闭包的定义为：那什么是自由变量呢？由此，我们可以看出闭包共有两部分组成：举个例子：foo 函数可以访问变量 a，但是 a 既不是 foo 函数的局部变量，也不是 foo 函数的参数，所以 a 就是自由变量。那么，函数 foo + foo 函数访问的自由变量 a 不就是构成了一个闭包嘛……还真是这样的！所以在《JavaScript权威指南》中就讲到：从技术的角度讲，所有的JavaScript函数都是闭包。咦，这怎么跟我们平时看到的讲到的闭包不一样呢！？别着急，这是理论上的闭包，其实还有一个实践角度
2022-06-09 09:20:22
267
1
原创 一图彻底搞懂事件队列 js中的Event Loop
主线程从"任务队列"中读取执行事件，这个过程是循环不断的，这个机制被称为事件循环。此机制具体如下:主线程会不断从任务队列中按顺序取任务执行，每执行完一个任务都会检查microtask队列是否为空（执行完一个任务的具体标志是函数执行栈为空），如果不为空则会一次性执行完所有microtask。然后再进入下一个循环去任务队列中取下一个任务执行。
2022-06-03 21:30:00
86
2
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人