- 博客(49)
- 收藏
- 关注
RSS订阅原创 复制内容到剪贴板
比如我这里创建一个方法将dom的内容传入到方法里，然后选择右键粘贴，即输入你想要复制的内容。记录一个非常好用的js api，自动将文字复制到剪贴板；触发了这个方法后会将当前选中的文字复制到剪贴板上；
2022-12-09 13:38:06
70
原创 vite.config.ts加载.env环境变量
本地开发代理proxy读取env环境变量，vite构建项目读取env，vite.config读取环境变量。
2022-11-29 10:21:01
557
原创 Vue基础之组件通信provide、inject
类似react中context的功能，vue的provide就非常适合在祖孙这种多层级的状态下进行通信。
2022-11-24 11:26:09
394
原创 [mysql]记录一些常用sql语句
select * from table where key like '%value%'模糊查询查询key里所有包含value的数据集合；其中value% 代表了以value开头的数据而%value则代表了以value结尾的数据;select count(*) from table查询返回表里所有数据的数量可以通过as count重命名countselect count(*) as count from table...
2022-04-27 16:08:40
608
原创 nodejs实现文件上传功能
基于koa2 实现前端上传图片到服务器的功能；前端部分我们就用原生input file上传 通过change事件手动触发上传事件<input type="file" ref="file" accept="images/*" @change="onChange" multiple />js 这里以上传一张图片为例 function onChange() { const list = (file.value as HTMLInputElement).files as FileL
2022-04-25 14:44:35
3489
原创 [javascript]手写一个懒加载组件
参考一下vantui里的List组件，实现一个印象中的懒加载功能（之所以说是印象中呢主要是vant打不开鸭，全凭记忆中的功能来摸索了）；不是我想重复造轮子，是我想自定义一些些功能。。。逻辑 主要是监听滚动条 计算设置好的滚动条到底部的高度来异步加载数据，期间异步加载尚未结束时不会重复执行加载操作，所以应该是用了节流。废话不多说，开始coding先声明一个组件 就叫他LazyLoad吧 <div class="lazy-load-ctx" ref="scrollRef">
2022-04-24 15:56:26
900
原创 [TypeScript]监听事件event.target无法正确的获取属性
在使用ts开发项目的背景下，一般给dom添加监听事件时函数会拿到当前的事件对象；在我们指定了参数是Event后，我们去获取e.target里的属性时ts会提醒我们target里没有这个属性；类似于这样明明我们已经指定了事件的类型，为啥获取target里的值的时候会报错呢？？经过我多方查阅方才得知，ts无法知道当前这个事件是什么元素的事件的类型，不同dom元素的事件里的target值都不相同；需要指定当前这个事件具体是什么元素里的HTMLElement类型比如我这个是div 那我指定他是HTML
2022-04-24 13:35:11
2607
原创 【牛客网】前端面试手撕题讲解
最近在准备金三银四，刚好看到有一些常见的前端手写原理题目，遂记录下解题的思路（不是全部，好几道我也不会啊）；地址： 20道前端面试手撕题下面正文开始FDE1 事件委托描述请补全JavaScript代码，要求如下：给"ul"标签添加点击事件当点击某"li"标签时，该标签内容拼接".“符号。如：某"li"标签被点击时，该标签内容为”…"注意：必须使用DOM0级标准事件（onclick）dom0级事件只有两个，一个是直接在dom上绑定onclick事件，另一个是获取dom元素并绑定o
2022-03-04 17:45:03
1561
1
原创 Vue3 双向绑定原理浅入
众所周知 vue2所使用的双向绑定原理是用了Object.defineProperty 来进行数据的拦截处理，而vue3使用了es6的 proxy代理拦截数据，那么 proxy是啥呢？菜鸟教程 ES6 Reflect 与 Proxyproxy小试牛刀先声明一个变量const obj = { name: 'dingzong'};创建一个proxy实例const _obj = new Proxy(obj, {})输出_obj构造函数proxy第二项是一个对象，对象里有内置十三种方法来捕
2022-02-14 11:15:43
1575
原创 钉钉h5微应用缓存可行性解决方法
最近有在开发钉钉h5微应用程序，坑爹的钉钉h5即使打包js做了hash串 每次打包上线依然会读取缓存。要手动清除掉手机里应用的缓存信息才可以读取最新的代码，这么做的话 用户体验着实太糟糕了。百度了下说是在入口引用js后面加上版本号就能不读取缓存，ok 那想办法每次打包去更新版本号就好了。要每次去更新版本号，那必然要用到node的fs模块来读写文件，开搞：所有的环境变量文件里声明一个版本号根目录新建一个js文件update.version.js引入文件操作模块和路径模块以及获取当前版本号cons
2021-09-14 10:42:22
2966
7
原创 理解js函数柯里化
函数柯里化用过loadsh的都大概了解过其中提供了一个curry方法，可以把传参拆分开延迟执行；把简单函数复杂化，复杂化是为了通用性，为了能够更灵活调用，重复使用。比如：function num(a, b, c) { console.log(a,b,c)}这个函数经过柯里化后const curryNum = curry(num);可以分开传参curryNum(1)(2)(3);curryNum(1)(2, 3);curryNum(1, 3)(3);// 或者const curr
2021-09-07 14:23:18
78
原创 vue3 ts组件实例类型
mark下获取组件实例并能不any指定类型正确调用组件的方法，非常好用！import导入组件后 使用InstanceType获取组件类型;例如import MoviesList from './components/list.vue';如果想使用这个组件的方法，正常不为了编辑器检测报错 只能指定组件的ref为any 但这样一点都不优雅，也没有提示方法。所以type FilmsType = InstanceType<typeof MoviesList><MoviesList
2021-07-16 17:12:58
2410
原创 vue开启Gzip性能优化
使用gzip能有效减少打包后的项目体积，但是需要配置nginx和vue.config.js文件；需要先安装compression-webpack-pluginnpm i compression-webpack-plugin如果配置了gzip 但是打包或者运行时显示Cannot read property ‘tapPromise’ of undefined 之类的报错 ，需要先删除当前的compression-webpack-plugin模块 再安装低版本的compression-webpack-pl
2021-05-21 14:39:05
243
1
原创 html转pdf
最近遇一需求 需要将网页部分内容转换成pdf保存下来；思路是将html转成canvas（html2canvas） 再根据canvas.toDataURL将canvas转换成图片，最后使用pdfjs将图片保存到pdf文件里;贴一下代码mark下需要用到上面那两个依赖；import html2canvas from 'html2canvas';import jspdf from 'jspdf'; const dom = document.getElementById('orderDetail'
2021-04-27 16:46:05
98
原创 flutter打包
mark下flutter打包流程1 需要用到keytool,所以要安装java jdk并配置好环境变量；（下载java jdk）安装完成之后进入到c盘java安装目录里 进入到bin复制文件地址右键此电脑点击属性 点击左侧高级系统设置-环境变量 在用户变量里选中path 点击新建将地址复制进去如果有KeyStore请跳到下一步；执行以下命令来生产keykeytool -genkey -v -keystore /D:/key.jks -keyalg RSA -keysize 2048 -val
2021-04-22 16:51:57
495
原创 vue3移动端开发rem问题
mark一下移动端开发rem插件使用问题根据官网提供的postcss-pxtorem 安装并配置了相关选项但打开报错的问题解决方法
2021-03-30 17:16:54
71
原创 github更新fork代码
mark下更新fork代码 怕麻烦的可以把仓库fork的代码删掉重新fork1、git clone fork后的分支到本地；git clone 你fork后的代码链接2、将源分支指定给upstreamgit remote add upstream '被fork的源码的地址'3、fetch源分支代码到本地git fetch upstream4、合并代码git merge upstream/master5、将合并后的代码推送上去git push origin master...
2021-03-10 16:42:05
200
原创 NodeJs爬虫速成
mark一次Nodejs爬虫入门经历需要用到的依赖cheeriosuperagentcheerio是类似于jquery 操作dom获取数据superagent则是请求对应的网址并返回网页dom数据具体详情可以百度npm init 初始化一个项目新建一个Index.js引入上述的依赖const superagent = require('superagent');const cheerio = require('cheerio');引入fs文件管理const fs = requir
2021-02-22 16:04:56
122
原创 js反向递归查找值
业务开发中tree树数据经常打交道，经常需要用到递归去操作更改数据。现在遇到一个后台传给你一个某个位置的id值且需要你向上一层一层获取数据的值，这个时候你就需要反向递归去获取数据。记录一次才坑经历吧思路1之前是想把源数据转成json字符串去查找，这样性能应该能更好，少了很多循环操作。后面发现自己正则似乎太菜了学的都还给老师了无奈只好放弃这种方法，思路2正常递归源数据数组 判断children值以及使用数组的some方法判断是否需要继续递归下去还是从头递归；贴代码 // 反递归查找 f
2020-12-02 14:19:58
2360
2
原创 Vue3 自定义指令实现按钮权限控制
业务需求除了路由需要控制外点击按钮也需要做到控制，百度了vue2相关资料发现大部分都是使用自定义指令实现控制按钮显示和隐藏，刚好手头上做了个demo 写个文档记录下；vue2和vue3directive的函数也不一样bind → beforeMountinserted → mountedbeforeUpdate: new! this is called before the element itself is updated, much like the component lifecycle ho
2020-11-27 15:20:29
2128
1
原创 Vue Router传参解耦
vue路由传参有params和query，实际开发中获取vue路由的参数，需要在组件中使用 $route， 会使之与其对应路由形成高度耦合，从而使组件只能在某些特定的 URL 上使用，限制了其灵活性。vue router为我们提供了路由解耦的功能，取代在组件上使用$route来获取路由参数；1、布尔模式在路由上新增一个属性props并设置为true路由{ path: 'detail/:id', name: 'customer-detail', meta: { title
2020-11-19 16:01:58
420
1
原创 前端手动分页
在后台没有做分页的情况下，前端可以自己写好算法并借用elementui之类的ui组件里的Page分页功能手动完成分页；具体思路是根据后台传回的源数据 处理成二维数组；1、总数量除以每页数量并向上取整获取总页数；Array(‘总页数’).fill([])获取一个基于总数索引的二维空数组；2、for循环总页数，每次向二维数组传入数据；具体代码如下// 手写分页数据 private sliceArray(arr: any[], size: number = 10) { // ar
2020-09-02 14:09:23
517
原创 :empty伪类和:only-child伪类
empty MDN 介绍 empty CSS 伪类 代表没有子元素的元素。子元素只可以是元素节点或文本（包括空格）。注释或处理指令都不会产生影响。// html<div class="empty-content"></div><div class="empty-content"> <p>爱江山更爱美人</p></div>// css.empty-content:empty{ height: 30px; }.emp
2020-05-11 15:02:57
342
原创 CSS filter属性详解
MDN filter介绍filter CSS属性将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像，背景和边框的渲染。CSS标准里包含了一些已实现预定义效果的函数。你也可以参考一个SVG滤镜，通过一个URL链接到SVG滤镜元素(SVG filter element)。filter定义的10种效果分别是：blur、opacity、grayscale、sepia、saturate、hue-...
2020-05-06 10:26:02
5149
6
原创 es5/es6 继承总结
一 原型链继承原型链继承的原理：直接让子类的原型对象指向父类实例，当子类实例找不到对应的属性和方法时，就会往它的原型对象，也就是父类实例上找，从而实现对父类的属性和方法的继承。// 父类function fat () { this.name = 'zaq'}// 父类上的原型方法fat.prototype.getName = function() { return this.nam...
2020-04-13 12:10:34
679
3
转载 Vuex与双向绑定冲突的解决方法
vuex里的值需要在Mutation里去修改，但是表单双向绑定了该用户修改时会尝试修改vuex里的state值，这在严格模式下会报错。不过一般是不会直接双向绑定vuex吧 如果绑定了请看官网文档的解决方法官网文档 ==> 电梯直达...
2020-04-11 13:43:59
804
原创 类数组对象转数组
mark一些常用的类数组转数组方法所谓类数组对象，即拥有一个 length 属性和若干索引属性的对象举个例子const arr = { 0: 'name', 1: 'age', 2: 'like', length: 3}以及形参argument等function getData (name, age, like) { /** * 此时的argument为 * { ...
2020-04-10 14:45:40
232
原创 封装axios拦截重复请求
偷个懒 用下别人的代码 原帖 （侵删）文中稍作修改 功能不变新建一个请求文件import axios from 'axios'//取消请求let CancelToken = axios.CancelToken//设置默认请求头，如果每次请求都携带token 建议写在这里axios.defaults.headers = {}// 请求超时的时间限制axios.defaults...
2020-04-09 21:29:42
814
3
原创 typeof、instanceof和Object.prototype.toString.call()的区别
mark下typeof返回一个字符串，指示未经计算的操作数的类型。const str = 'abcdefg'typeof str // string值得注意的是typeof 无法判断数组const arr = []typeof arr // objecttypeof 只能判断基本类型，除此之外Date null regExp等都只是object的拓展因此数组建议使用insta...
2020-04-09 20:47:18
290
原创 javascript 数组去重常用方法汇总
mark一些我常用的数组去重的方法1、set方法const arr = [1,2,3,1,1,2,3,4,2,1,2,3,4,4,2,2,1,2,3,4]function reset (arr) { return Array.from(new Set(arr))}let Arr = reset(arr)console.log(Arr) // [1, 2, 3, 4]Set...
2020-04-07 12:27:26
184
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人