![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
技术点
文章平均质量分 55
易风有点疯
我就是个小菜鸡,每天都要笑嘻嘻
展开
-
使用Echarts绘制中国七大区地图
先上效果图(文字是否显示,显示什么字,各种颜色之类的,都能随便改)直接上完整代码地图是需要输入数据初始化的以下是地图 json 文件原创 2024-03-07 09:59:56 · 937 阅读 · 0 评论 -
技术点:实现大文件上传
作为切片 Hash,这样做文件名一旦修改就失去了效果,而事实上只要文件内容不变,Hash 就不应该变化,所以正确的做法是根据文件内容生成 hash,所以我们修改一下 Hash 的生成规则。控制的,目的是能够并发合并多个可读流到可写流中,这样即使流的顺序不同也能传输到正确的位置,所以这里还需要让前端在请求的时候多提供一个。由于前端在发送合并请求时会携带文件名,服务端根据文件名可以找到上一步创建的切片文件夹。无论是前端还是服务端,都必须要生成文件和切片的 Hash,之前我们使用。文件名 + 切片下标。原创 2023-12-15 10:23:30 · 572 阅读 · 0 评论 -
vueuse常用hooks
vue 项目常用 hooks。原创 2023-04-28 15:35:13 · 1112 阅读 · 1 评论 -
vueuse常用hooks
vue 项目常用 hooks。原创 2023-04-24 15:26:55 · 906 阅读 · 0 评论 -
技术点:前端缓存分类及使用
和浏览器缓存:比如,localStorage,sessionStorage,cookie 等等。这些功能主要用于缓存一些必要的数据,比如用户信息。比如需要携带到后端的参数。亦或者是一些列表数据等等。比较基础,不做过多赘述。原创 2023-02-06 13:44:03 · 408 阅读 · 0 评论 -
技术点:weekMap和Map的区别
当使用 map 时,由于对键值是强引用,map 的 obj 属性被赋值为空时,obj 所对应的 'xxxx’值其实还是存在的,并没有被回收,所以真正去清空应该使用 delete 方法,然后再清空 obj 的引用。解析:WeakMap 的键是对象的时候,如果该对象被赋值为空时,垃圾回收机制会对那个对象所对应的值也进行垃圾回收。而使用 WeakMap 的时候,想处理属性,直接清空 obj 的引用就行了,obj 所对应的值也会直接被回收。答案: WeakMap 是弱引用。原创 2023-02-01 15:30:52 · 451 阅读 · 0 评论 -
技术点:sequelize基础入门
对于 UUID,使用 DataTypes.UUID. 对于 PostgreSQL 和 SQLite,它会是 UUID 数据类型;原创 2023-01-31 13:46:51 · 497 阅读 · 0 评论 -
技术点:手写axios
/ // 请求url。// // 请求类型。// // 请求参数。// // 请求体。原创 2023-01-29 13:53:58 · 855 阅读 · 0 评论 -
技术点: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 · 397 阅读 · 0 评论 -
JavaScript常用技巧:stroage封装
【代码】JavaScript常用技巧:stroage封装。原创 2022-12-12 10:26:30 · 220 阅读 · 0 评论 -
技术点:vue3 使用 ref 绑定 router-view,想调取某个子路由中的方法来重载数据
当前有一个页面为父路由页面(/system)他的子页面是他的两个下级(/system/user /system/auth)由于搜索框及添加按钮都在父级母版中,现在需要在点击添加按钮或者搜索框搜索时都触发子路由页面对应的方法,如:在tab选中用户列表时,触发子页面内的添加用户方法,tab选中角色权限时,触发子页面的添加角色方法在 /system 中在 /system/user , /system/auth中原创 2022-12-07 10:28:45 · 1743 阅读 · 0 评论 -
优雅的解决uniapp 页面多个组件调用同一个生命周期时的冲突
page 页面定义一个对象,储存所有上拉刷新要触发的方法,再定义两个添加或删除属性的函数// 下拉的方法组成的对象 const pullRefreshEvent = {};/*** 添加事件* @param {string} key 事件的key(唯一值)* @param {function} fun 要执行的方法}page 页面监听 onPullDownRefresh 事件,循环管理方法的对象,执行所有的方法} });父组件向外暴露方法,供子模块调用。原创 2022-09-28 10:06:51 · 1419 阅读 · 0 评论 -
技术点:前端缓存(web 缓存)详解
web 缓存主要指的是两部分:浏览器缓存和 http 缓存浏览器缓存: localStorage,sessionStorage,cookie 等等http 缓存: 通过配置 http 请求头来达到缓存的效果,分为强缓存和弱缓存值得注意的一点是,不同于 cache-control 是 expires 的完全替代方案(说人话:能用 cache-control 就不要用 expiress)。ETag 并不是 last-modified 的完全替代方案。原创 2022-09-19 11:33:51 · 1554 阅读 · 0 评论 -
技术点:使用vue和element实现地图选点功能
通过腾讯地图组件与页面通信的原理,实现一个点击选择地图进行选点的功能原创 2022-08-26 20:40:04 · 2551 阅读 · 0 评论 -
安装 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 · 615 阅读 · 0 评论 -
使用auto-imgport插件实现vue3等API的自动引入
大多数页面都会有一堆 import 来引入一些函数,会非常麻烦,但如果我们使用了 unplugin-auto-import 这个插件之后,我们就可以省去这些常用的 import。声明文件 auto-imports.d.js 时自动生成的,可以去看看文件内容,里面会标明自动引入了哪些东西。第二步:引入到项目的配置文件中,此处以 vite 为例(更多场景使用请自行查阅官网。第一步:安装 unplugin-auto-import 依赖。这样项目代码写起来就简单多了!...原创 2022-08-11 10:22:52 · 730 阅读 · 0 评论 -
微信小程序实现人脸识别
目前项目有个需求,需要在微信小程序里实现一个自定义相机,然后用户可操作来拍照,最后将拍出来的照片进行人脸识别原创 2022-07-15 23:00:00 · 2776 阅读 · 2 评论 -
JavaScript 函数高阶用法
将函数的参数通过连续调用分开来传实现偏函数用途在多次调用某个函数时,将函数的公共参数进行封装,返回一个新的函数实现惰性函数用途在多次调用某个函数时,只返回第一次调用的结果,类似缓存,原理是重写函数函数组合用途在需要对某一个值进行多个函数的过滤时,可以使用函数组合实现函数记忆用途某个函数在多次调用时,如果参数没变,直接拿缓存下来的数据...原创 2022-06-22 01:00:00 · 79 阅读 · 0 评论 -
JavaScript=》简单实现柯里化
P:讲一个函数进行封装,传递给该函数的参数可以分多次进行传递例如:原创 2022-06-20 14:08:56 · 119 阅读 · 0 评论 -
js使用用最简单的方法实现call,看了就会
手写一个call方法可以利于自己更好的理解this,而且面试有时候也会遇到原创 2022-06-07 10:14:52 · 351 阅读 · 0 评论 -
前端监控体系搭建(错误、异常、白屏、性能监控、卡顿、pv等,接入日志、告警系统)
前端监控体系搭建(错误、异常、白屏、性能监控、卡顿、pv等,接入日志、告警系统)原创 2022-06-02 09:39:47 · 2207 阅读 · 1 评论 -
前端常见的一些配置文件
前端常见的一些配置文件原创 2022-06-02 20:45:00 · 871 阅读 · 0 评论 -
async语法
async语法async是什么?Generator 函数的语法糖为什么会有async这个语法(1)内置执行器。Generator 函数的执行必须靠执行器,所以才有了co模块,而async函数自带执行器。也就是说,async函数的执行,与普通函数一模一样,只要一行。asyncReadFile();上面的代码调用了asyncReadFile函数,然后它就会自动执行,输出最后结果。这完全不像 Generator 函数,需要调用next方法,或者用co模块,才能真正执行,得到最后结果。(2)更好的原创 2022-04-13 16:32:43 · 410 阅读 · 0 评论 -
vue3->调用子组件的属性和方法
vue3->调用子组件的属性和方法原创 2022-04-08 23:36:38 · 4642 阅读 · 1 评论 -
给插槽(slot)绑定事件·
给插槽(slot)绑定事件背景: 现在有一个组件,它里面有一个插槽,需要实现不管往插槽里面添加什么,都要能让他点击之后可以让组件里面的数据的值+1实现思路 可以运用 vue 的作用域插槽先将需要点击之后运行的方法通过作用域插槽传递给调用该组件的页面<template> <div> <h1>{{ num }}</h1> <slot :add-num="addNum"> <button @click="原创 2022-02-14 12:00:48 · 6323 阅读 · 4 评论 -
单线程与多线程(Worker)
参考文档worker-阮一峰js 是单线程还是多线程?为什么?js 是一个单线程,原因是最初 js 只是用来做表单验证的,单线程就够了,并且以前的内核也没有现在的内核牛逼。但是现在的内核比较强大,所以 js 可以支持多线程为什么使用多线程有一些 js 操作,比如递归,遍历大量数据,如果由主线程来操作会导致进程有点卡顿,如果只让主线程来进行 ui 操作,分线程来进行运算操作,将会相当丝滑多线程的优缺点优点不会耽搁主线程的进度缺点浪费资源(所以建议使用完成之后尽快关闭)使用新建单线程W原创 2021-12-20 10:05:43 · 403 阅读 · 0 评论 -
柯里化的实现
柯里化的实现面试中经常会遇到这个题目:写一个函数,实现可多次调用,并且不限制参数个数add(1, 2, 3, 4); //10add(1, 2)(3)(4, 5, 6); //21add(1)(2)(3)(4)(5); //15最终代码:function curry(fn) { // 保存预置参数 const presetArgs = [].slice.call(arguments, 1); // 返回一个新函数 function curried() { // 新函数原创 2021-08-31 17:52:41 · 445 阅读 · 0 评论 -
技术点:uniapp,小程序:页面组件获取所在页面的实例,重写生命周期
使用带来的好处:不用一层层传递:页面组件可以直接获取到所在页面的实例上的数据,而不用通过prop一层层传下去,在页面组件所在的层级较深时极其好用解耦:页面组件实现某些功能需要借助所在页面的生命周期钩子来进行一些操作的时候,使用该方法可以不用将处理的代码写在所在页面的钩子里,而是直接将代码写在页面组件里。例如:视频组件在滑动到某个节点才开始自动播放,就需要所在页面的 onPageScroll钩子里面进行视频处理逻辑,这样复用性极低。而且耦合度比较高,而是用本技巧可以直接在本组件里写逻辑,而不用修改所在原创 2021-08-19 16:46:50 · 1642 阅读 · 0 评论 -
屏幕截图(将 html 元素转换成图片进行下载)
屏幕截图(将 html 元素转换成图片进行下载)场景:写了一个 div 用来做海报、名片之类的,需要对他进行截取,并下载<style> .box { width: 300px; height: 300px; background-color: red; }</style><div class="box"></div><button>生成名片</button>实现:引入 html2c原创 2021-07-08 10:05:09 · 327 阅读 · 0 评论 -
webpack打包优化
webpack打包优化开发环境优化1.开启热模块替换(HMR)**原因:**如果不开启 HMR功能 的话,修改某一个模块的时候,所有模块都会重新打包实现:给devServer添加 hot:truehot:true给js添加HMR功能(除了入口文件以外)在入口js里监听需要热替换的js文件if (module.hot) { // 一旦 module.hot 为true,说明开启了HMR功能。 --> 让HMR功能代码生效 module.hot.accept('./print.原创 2021-04-21 09:34:32 · 2908 阅读 · 3 评论 -
JavaScript:Excel表格的内容用js进行输出
将Excel表格的内容用js进行输出问题:在vue项目中使用js获取Excel表格里面的数据解决方法:第一步:下载插件cnpm i xlsx第二步:新建一个js文件,将方法进行写入,并导出import XLSX from 'xlsx'function get_header_row (sheet) { const headers = [] const range = XLSX.utils.decode_range(sheet['!ref']) let C c原创 2021-01-05 17:46:11 · 1026 阅读 · 1 评论 -
将下载路径转为file文件
将一个图片的下载地址转换成file文件场景: 后端给了一个图片的下载地址,但是需要返给他一个file文件解决方法: fetch("imgUrl001") //使用fetch方法发请求,参数是该图片的下载地址 .then((res) => res.blob()) //使用.then()方法将数据传给下一级 .then((blob) => { let t原创 2020-12-30 19:51:24 · 1100 阅读 · 0 评论 -
element-UI:el-table 表格排序
el-elment 表格排序elementUI虽然表格列本身就有 sortable 属性可以对表格的数据进行排列,但是为了提高网页性能,我们从后端一般拿到的只是当前页的数据,并不是直接拿到所有的数据都放在表格里,那这样的话我们如何对表格进行排序呢?以下是我对表格进行排序的详细步骤第一步:给el-table设置事件@sort-change="changeTableSort"sort-change:当表格的排序条件发生变化的时候会触发该事件第二步:给需要排序的表格列设置属性:sortable="'原创 2020-12-28 12:01:59 · 14107 阅读 · 9 评论