- 博客(24)
- 收藏
- 关注
RSS订阅原创 一个用来输出每行指定数量字符，指定行数，指定换行符的函数
这种需求遇到过挺多次了（如echarts的自定义formatter、v-html绑定的文本等），每次解决方法都不一样，其实还是很有共性的，觉得可以写一个方法用来处理这个字符串。
2022-11-11 10:50:19
328
1
原创 element-ui 的FormItem组件是如何进行绑定值校验的【源码解读】
使用element-ui框架有两年了，涉及到el-form组件的校验，只是根据官网给的示例使用。el-form绑定model，绑定prop属性，内的表单绑定v-model。只要v-model绑定的属性与prop属性一致再加上各种校验规则，即可实现某个表单的校验。所以个人就下意识的以为一定要用v-model绑定某个值才能实现校验，在封装自定义组件时，就会下意识的用组件实现v-model绑定值的功能。但是有次在使用同事封装的组件时，他并不是使用的v-model绑定的，而是用:xxx.sync。
2022-11-09 17:24:26
2052
1
原创 node版本与npm版本的关系以及如何安装指定版本的npm包
这样的node版本控制工具或者其它的导致node版本与npm版本不对应的情况的话，一味的升高降低node可能导致npm与node版本之间不对应从而无法正确安装前端依赖。正常情况下一个电脑装了node，就会自动安装好该node版本对应的npm包，但是有时候拿到一个新项目，很容易遇到node/npm版本过高或过低导致项目的依赖无法下载安装的问题。如果是卸载重新安装的话，npm和node版本肯定是对应的。这里可以查到指定某个版本的node与npm之间的关系。查到某个node版本对应的npm包以后。
2022-10-20 10:02:02
23641
原创 掘金批量关注用户JS脚本
先声明，大概率会被封号，不在乎的可以用一下。先放脚本代码：使用方法：能看懂代码的可以修改一下点击关注按钮的随机时间。就在这段代码里：1000表示1秒，自己酌情增加减少时间。代码中做了删除多余dom元素的操作，不会让页面下拉用户过多导致页面卡顿。
2022-10-19 10:05:20
394
原创 JS中的原型与原型链
当试图访问一个对象的属性时，它不仅仅在该对象上搜寻，还会搜寻该对象的原型，以及该对象的原型的原型，依次层层向上搜索，直到找到一个名字匹配的属性或到达原型链的末尾——null。，它和普通的函数没有任何区别，为了区分和普通函数的区别用了驼峰方式命名。有了上图的构造函数与实例对象之间的关系图以后，原型链就呼之欲出了。通过new关键字，可以创建多个实例，且子实例可以使用。注意：的是这两个原型并不存在于JS的所有对象中。这里只看到了显示原型，隐式原型在哪呢？存在于JS的所有对象中；，它存在于所有的对象上，
2022-10-18 09:46:43
57
原创 vue.config.js配置了哪些东西
vue.config.js是基于系统下的。所以先了解一下vue-cli。开发vue项目时必须要安装的一个插件就是了。vue-cli是一个基于vue.js进行开发的完整系统。它的作用主要有：快速创建一个vue.js脚手架项目并提供针对该项目的各种配置例如初始化一个vue项目时使用、这样的终端命令或图形化界面创建vue脚手架项目就是下的包提供的功能。另外，像packages.json文件中的选项中的、、等命令是下的包提供的功能。还有如、、等功能就是的插件功能提供的。具体功能可以直接看官网。这个在这里一个一个列出
2022-07-13 09:41:33
205
原创 canvas -页面背景泡沫效果代码解读
3.实现思路这个实现思路比较简单：其中处理泡泡的边缘渐变的是createRadialGradient方法，前面三个参数的圆对应第一个参数为1时的渐变色；后面三个参数的圆对应第1个参数为0的渐变色。
2022-07-05 17:25:28
243
原创 canvas-网页蜘蛛网特效代码解读
拿到代码第一感觉就是：这是人写的代码？感觉像是经过打包后的代码，但是看吧又能看得懂一点点。尝试下将其拆分成正常人能看懂的代码，发现还是有可能的，经过了一个下午的拆分，慢慢拆卸及修改变量名，改成了下面这样能让人基本不会害怕的代码：做完这一步，基本功能的实现逻辑就能懂一大半了。整个功能的基本实现是在页面上所有的随机点的随机运动下实现的。就类似下面这图：页面初始化时，给每个随机点都给一个随机方向。当这个点撞到屏幕边界时再做个镜面反射反弹继续运动。当没有鼠标时，如果某个点移动到另一个点的指定距离内时，将这两个
2022-07-05 11:13:15
593
原创 JS中的弧度与角度
一个角有两种计量单位：弧度、角度如一个圆。两条射线从圆心向圆周射出，形成一个夹角和夹角正对的一段弧。当这段弧长正好等于圆周长的360分之一时，两条射线的夹角的大小为1度。当角所对的弧长等于半径时，角的大小为1弧度，角所对的弧长是半径的几倍，那么角的大小就是几弧度。所以：。半圆（弧长 = 半径的Π倍）的弧度就是Π，整圆的弧度就是2Π。js中的Π就是这个常量。所以，拿一个圆举例：......
2022-07-04 17:29:33
1373
原创 canvas - 酷炫粒子文字效果代码解析
先看效果：再放源代码：以上代码复制到一个html文件中即可预览。接下来从程序运行顺序开始解读：就是这一段代码：其中、、、、四个变量没什么说的，说下其他三个：不懂什么意思的就先放这，继续往下看。先不看下面的构造函数。声明完全局变量后就是加载图片并绘制到canvas上了：就是下面一段代码：在图片在页面上加载完成以后，就要把图片绘制到canvas上了：上面的,是将屏幕宽度和高度减去图片宽度后除以二得到的canvas的左上角的x，y轴坐标位置，其目的是让canvas位于整个窗口的正中间。然后就是使用drawIm
2022-07-01 17:23:47
947
原创 vue3封装一个仿ant-design-vue的table组件
最近需要在不使用UI框架的情况下封装一个简单的表格，由于对antd-vue比较熟悉，所以仿照了antd-vue的样子写了个简化版的Table组件。使用技术：VUE3、SCSS用过antd-vue的都应该知道table组件主要的传参是两个：columns和dataSource，分别对应表头信息和表格的数据信息。表头的传参数据结构如下：key：必须，用来标志当前行label：非必须，当前列的列头显示内容子组件-表头的遍历：表格数据传参的数据结构如下：可以看到dataSource里面的key都是col
2022-06-30 08:43:10
959
原创 vue3-什么是expose，是如何使用的，以及defineExpose的用法
在使用单文件组件创建一个子组件时，可能遇到父组件需要调用子组件的方法，或者访问子组件的变量，在使用vue2或仅标签中只需要子组件上写一个变量，父组件通过就可以直接访问子组件的方法或变量。实现如下：如子组件有一个方法，vue2或非setup用法时，非的父组件是这么调用的：这里子组件里只要声明了的变量，父组件就可以直接访问到。但是子组件是时，父组件直接调用就会提示clear方法未定义。官网有这么一句话：因此，父组件是不能直接访问子组件的方法。需要子组件手动的抛出才行。子组件中需要如此修改：如此一来，非父组件
2022-06-30 08:42:31
2914
原创 前端在遍历对象时遍历出来的键的顺序不正确问题处理
在uniapp开发小程序的时候，后端有时候给的数据是这样的顺序给好的这样的键值对：但是使用for…in…循环遍历这个对象，并打印其key值，在uniapp开发小程序可能会出现最终访问的顺序和接口给的顺序不一致的情况，就像下面这样：这个问题在web端并没有遇到过，只是在使用开发小程序时处理接口给的数据时出现过这个问题导致了bug。使用uniapp开发小程序坑太多，所以具体原因并不想深究，这里只说一下处理办法:上面的方法，就是将map的key值重新拿出来排个序，再遍历排好序的key值，将原map对象对应的v
2022-06-30 08:41:25
729
原创 vue3+element-plus如何做一个动态增删同时具有校验功能的table表格
项目中有个比较麻烦的需求：一个表格：能手动向表格第一行增加一行每一行的每一列在点击某一格时要能输入每个表单控件需要有校验功能支持多选可以删除所选行保存后需要前端做一个仅前端部分的查询原型如下：上面这些要求看起来就很麻烦。但是更麻烦的是，这个原型还是修改过的，原来的原型已经实现功能了，刚写完，第二天领导又把原型改掉了。答：每个输入框给一个，就是每个表单都只有一个表单，每个表单的只有一个，有着对应的校验规则。在点击保存时获取到当前所有的，通过调用form表单的方法，实现每个表单都有校验功能。答：先定义一个字段模
2022-06-30 08:40:51
2844
原创 vue的v-model指令的基本原理，以及如何在自定义组件上使用v-model绑定值
v-model的用法都知道，表单控件使用v-model绑定一个data中的值即可实现双向绑定：2.v-model是什么它其实就是一个，这个在vue官网也明确说明了。以为例，它其实就是(v-bind:value)和(v-on:input)的简写。以下两个组件的双向绑定功能是一样的：只不过下面那个input控件是在input事件中将当前input元素绑定的value赋给了data中value这个变量；表单有各种不同的类型，如、、等类型。v-model指令所绑定的属性及事件也不尽相同。比如的text和tex
2022-06-29 10:21:02
3554
2
原创 git项目管理中如何fork别人的代码以及如何拉取最新的源项目代码
fork英文释义可以理解为分叉的意思。在git上就是从某个源项目上复制一个项目变成自己的私库，这个私库和源项目没有任何关系。在源项目右上方有一个的图标：点击它，然后来到选择页面：继续点击，等一会，你的项目列表就会出现一个一摸一样的项目。分支什么的也都一摸一样。这时候你把你的私库项目clone下来，跟其他正常项目一样操作就行了。这里直接使用命令拉取的是自己这个私库的代码，所以你不管怎么拉都是最新的。这时候你先用命令先看一下自己的远程分支，在没有添加过远程分支的情况下，会是如下情况：这里说明你只有一个别名为
2022-06-29 10:19:00
7355
原创 什么是js的原型以及原型链
JavaScript中其实并没有类的概念。从es6通过关键字才引入了这个概念，但是ES6的可以看作是一个语法糖，它的绝大部分功能，ES5都可以做到。。es6之前，实现生成实例对象的传统方法是通过构造函数。将实例对象与构造函数连接起来的就是与。JavaScript中有两个原型：但是，这两种原型并不存在于JavaScript的所有对象中。那么在哪里可以体现出这两个原型呢？先看代码：结果如下：可以看到：数组、对象、函数三个引用类型都有属性（隐式原型）只有函数除了之外还有一个属性（显式原型）所有的函数默认都会拥有
2022-06-29 10:16:11
1376
原创 js的函数与构造函数之间的关系
先说结论：构造函数和普通函数是一样的，没有任何区别。比如一个函数：这个函数可以直接这样调用：也可以当作一个构造函数：函数本身并不是构造函数，然而，当在普通的函数调用前加上关键字以后，就会把这个函数调用变成一个“构造函数调用”。实际上会劫持所有的普通函数并用构造对象的形式来调用它。函数不是构造函数，但是当且仅当使用时，函数调用会变成“构造函数调用”。**因此：**在JavaScript中对于“构造函数”最准确的解释是：所有带的函数调用。...
2022-06-29 10:15:15
127
原创 什么是js的闭包，它是如何产生的
先放let关键字声明变量的特点总结：let关键字可以将变量绑定到当前所在作用域（通常是{ … }内部）无法在块级作用域之外的地方访问使用let命令声明的变量不允许使用let关键字多次声明同一个变量不存在变量提升，使用let关键字声明的变量一定要在声明之后使用，否则将报错js的函数作用域不用说了，在函数内不论是用var还是let声明的变量是无法直接被外界访问到的。但是JS的块级作用域，如：、、等这种都是属于块级作用域，在这些块级作用域中使用var关键字声明的变量，是可以直接在块级作用域以外的地方访问到的，这样
2022-06-29 10:14:10
582
原创 es6中的let与const关键字及其与var关键字的不同
先放let关键字声明变量的特点总结：let关键字可以将变量绑定到当前所在作用域（通常是{ … }内部）无法在块级作用域之外的地方访问使用let命令声明的变量不允许使用let关键字多次声明同一个变量不存在变量提升，使用let关键字声明的变量一定要在声明之后使用，否则将报错js的函数作用域不用说了，在函数内不论是用var还是let声明的变量是无法直接被外界访问到的。但是JS的块级作用域，如：、、等这种都是属于块级作用域，在这些块级作用域中使用var关键字声明的变量，是可以直接在块级作用域以外的地方访问到的，这样
2022-06-29 10:11:40
186
原创 什么是js中的作用域
首先要知道一段JS程序执行过程中，有哪些角色在起作用：示例：这段代码是如何执行的：可以看到，JS代码执行过程都是围绕着作用域的。js代码中的变量都是放在作用域中的。JS有两种常见作用域：函数作用域就是一段代码如果用函数进行包裹，那么函数外界就无法访问到这个函数的作用域。还有一种作用域就是块作用域。如 ，，等这种都是属于块作用域，但是使用关键字在块作用域中声明的变量，却是可以在这个块作用域外访问到的，因此会有污染全局作用域变量的风险。不过要解决这个问题可以在块作用域中使用关键字来声明变量。可以将作用域想象成
2022-06-29 10:10:42
274
原创 js的this及this的指向是什么
this在日常开发中给人一种它好像用的不多，但是又好像无处不在的错觉。但是它确实无处不在。它是一个特殊的关键字，被自动定义在所有函数的作用域中。先说结论：先放不用this的代码：上面代码中通过将对象由形参的方式传递给函数，然后在函数内手动获取到此对象形参的属性进行操作。下面放上使用this的代码：两种方法实现的功能一样，但是随着使用模式越来越复杂，显式的传递上下文对象会让代码越来越混乱。但是this提供了一种更为优雅的方式来隐式“传递”一个独享引用，因此可以将API设计的更加简洁且易于复用。我们很容易把
2022-06-29 10:09:23
219
1
原创 最简单的防抖和节流
防抖和节流很长一段时间不太懂什么意思，总觉得它们是一个东西。但是花了时间着重了解以后发现它们还是有不少区别的。但是有个共同点就是都是使用setTimeOut定时器实现的。特点：一个函数，短时间多次触发，但是只执行最后一次触发的事件思路：将所有的消息推入消息队列，但是只执行最后一次的消息用处：如一个点击发送请求的按钮。为了防止用户由于误触导致的多次点击。所以只执行短时间内多次触发的最后一次触发。......
2022-06-29 10:04:10
206
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人