- 博客(16)
- 收藏
- 关注
RSS订阅原创 利用Fabirc.js画封闭多边形
引言最近接到一个需求，要求在电脑端画电子围栏，其实质就是画封闭的多边形，而且不能相交。经过多方查找，找到了一个canvas的库Fabirc.js画多边形参考Fabirc.js中文文档Fabirc.js博客参考效果演示代码<!-- --><template> <div class="canvasbox"> <canvas id="label-canvas" class="canvas" width="500" height="500"
2021-11-22 10:16:30
1642
3
原创 vue compute和watch共用监听对象的多个属性
引言这周写的编辑页面时，给后端传值的时候需要传个字段，用来判断增加的信息的状态，但是这个字段的传的1还是0，是根据用户编辑的是前4个条件还是后4个条件判断的。这就要监听所传对象的多个对象，利用compute和watch即可实现，特此记录一下。实现过程data(){ return { airFormData: { courseName: "", provinceId: "", lanId: "", userId: "",
2021-11-05 17:06:49
391
原创 利用iview的Poptip组件和Tabs组件实现省市联动
引言这周的需求中，在查询的列表的数据的时候，要实现这样的类似的省市选择：最后实现为：实现过程Poptip里面一个input和div的插槽，插槽里面是Tabs组件，Poptip组件和tabs组件的用法不在这里论述了然后给每个省的span加上点击事件进而获取该省的数据和显示到input中，给市的数据加的点击事件同理逻辑如下：选择省，给表单赋值数据同时在input框显示省，然后请求该省的市的数据。选择市，在input框里拼接好数据这里监听提示框的显示以及显示的次数，是因为在inpu
2021-10-29 14:40:11
575
1
原创 经典vue难点----v-for中的key和diff算法
引言今天学习了v-for中的key和diff算法之间的关系，了解了vue是如何高效的渲染DOM。v-for中的key官方的解释key属性主要用在Vue的虚拟DOM算法，在新旧nodes对比时辨识VNodes如果不使用key，Vue会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法而使用key时，它会基于key的变化重新排列元素顺序，并且会移除/销毁key不存在的元素；好难理解！！！！直接上案例案例在[a,b,c,d]中插入f，有三种方法：数组变了，重
2021-10-08 22:21:13
594
原创 前端下载二进制文件以及解决从content-disposition获取文件名中文乱码问题
这种情况一般就是实际项目使用的ajax请求接口方式，比如post请求，前端传递若干参数，后端返回文件二进制流。首先把axios配置项返回结果为二进制格式axios({ method: 'post', url: "http://localhost:3000/download", data: { test: "test data" }, responseType: "blob" })拿到返回数据后，将二进制数据生成一个文件url，用URL.
2021-09-30 11:16:42
4716
原创 勇敢猿猿，不怕困难！！！---手写Promise（下）
这部分是手写Promsie的重头戏，没看我手写Promise（上）的同学，请先看完勇敢猿猿，不怕困难！！！—手写Promise（上）重头戏紧接上回，我们把promise基本特点已经写完了，这篇开始写调用.then方法返回一个新的Promise实例等进阶的promise特点.then方法在调用时，里面有两个函数参数（onfulfilled和onrejected），分别是在promise实例成功/失败时调用。而且这两个函数的执行是否成功，也决定着返回的新的实例的状态。只要这个两个函数执行报错，那么新实
2021-07-06 22:20:22
62
原创 勇敢猿猿，不怕困难-----手写Promise（上）
前言Promis方面的知识点一直都是前端面试的重点和难点，手写Promise更是对前端工程师的一大挑战。今天来写并讲一下一个通俗易懂的版本。话不多说，勇敢猿猿，不怕困难！！！！先来点简单的先写一个自执行函数，然后把自己写的Promise函数暴露出去，这样window中的Promise就是我们写的Promise。大家都知道，在创建Promise实例的时候，必须传进去一个函数，否则会报错，所以在函数里第一步就是判断传进拉的exeutor参数是否是函数，如果不是函数就抛出该错误。 (function
2021-07-04 21:48:37
107
原创 JQuery源码分析----解决全局的JQuery和$冲突问题
背景最近在学习JQuery源码，看到源码中,暴露给去全局的JQuery和$如果和当前全局的JQuery和$冲突解决办法，很值得学习。特此记录一下！解决冲突的方法（源码）var _jQuery=window.jQuery,_$=window.$;jQuery.onConflict=function onConflict(deep){ if(window.$===jQuery){ //把$的使用权归还给之前使用它的人 window.$===_$ } if(deep&&wind
2021-05-18 11:09:03
218
原创 Vue子组件中 data 从props中无法动态更新数据问题
问题最近在公司写vue项目的时候，发现一个渲染问题，父组件传给子组件的数据，当该数据在父组件的中发生改变的时候，子组件中的数据不会因其的改变而去改变。原因经上网查证得知，是因为父组件传给子组件的数据是通过子组件的mounted阶段进行的处理，才能通过data渲染到页面上，从而更新。但是数据发生变化的时候，mounted阶段已经过了，所以data捕获不到数据的更新，从而无法更新示例//父组件<add-model :addshow='addshow' ></add-model>
2021-05-17 15:12:50
10176
7
原创 闭包应用---compose函数
函数组合把处理的数据的函数像管道一样连接起来，然后让数据穿过管道最终得到最终结果const add1=(x)=>x+1;const mul3=(x)=>x*3;const div2=(x)=>x/2;div2(mul3(add1(add(0))) //3;这样的写法可读性太差，我们可以构建一个compose函数，它接受任意多个函数作为参数（这些函数只接受一个参数），然后compose返回也是一个函数，达到以下效果：const operate=compose(div2,mul
2021-05-16 21:09:52
119
原创 重构数组方法reduce
reduce 方法Array.reduce(function(){},m)依次处理数组的每个成员，最终累计为一个值(从左往右)第一个参数是一个函数，接收四个参数累积变量，默认为数组的第一个成员当前变量，默认为数组的第二个成员当前位置（从0开始）原数组函数返回每次的累计值第二个参数相当于设定了积累变量的默认值，当前变量从数组第一个成员开始重构reducefunction reduce(arr,callback,initValue){ let result=initValue,
2021-05-16 15:29:33
286
原创 闭包应用---惰性函数
背景在开发过程中,有时候需要对浏览器环境进行检测,比如封装一个可以获取元素样式的函数的时候，需要写一个函数进行检测,但是常规的写法有点累赘了,会检测很多遍,但是浏览器环境是固定不变的,检测只需要检测一遍.这样就会造成每次调用这个函数的时候浏览器都会浪费太多时间去再检测一次.这时候就应该用到惰性函数来解决这个问题惰性函数针对优化频繁使用的函数由于各大浏览器的差异，我们在实现一项功能的时候需要考虑不同浏览器之间的兼容性问题，因此需要进行浏览器嗅探惰性载入表示函数执行的分支只会在函数第一次掉用的时候执
2021-05-16 14:34:45
121
原创 移动端精灵图适配问题---------你是不是掉坑里了？
最近在学习移动的rem布局，写一个小案例的时候遇到了精灵图适配的问题，特此记录的一下。这是一张宽度为750px的设计图，我把它的宽度分成15份，每一份的大小作为html的字体大小，相当于1rem=50px,然后用媒体查询适配各种屏幕。当我写到这地方时：图标是一张宽520px高520px的精灵图：在750的屏幕下测量图标大小是100x100的，大家都知道精灵图在手机端要进行缩放，我就想当然的把精灵图缩放成260px X 260px 的，然后测量的图标位置代码如下：@baseFont:50
2020-07-22 22:27:42
755
原创 探究子元素宽高用百分比表示的计算方法
.big{ width: 0; height: 0; padding-right: 200px; padding-bottom: 200px; background: pink; margin-top: 200px; margin-left: 200px;}.inner { width: 50%; height: 50%; background: red; }<div class="big"> <div class="inner">
2020-07-18 21:02:58
677
原创 前端学习笔记----------------html、body元素的高度问题
最近看别人的代码，总有html,body{height:100%}这行代码，不知道为什么，特此记录一下。<!DOCTYPE html><html lang="en"><head> <title>test</title> <style> * { margin: 0; padding: 0; } .box {
2020-07-18 21:02:04
259
原创 前端学习笔记（2）nth-child和:nth-of-type的区别
最近学习css3结构伪类选择器:nth-child和:nth-of-type，这两个比较迷，特地记录一下<!DOCTYPE html><html><head> <meta charset="UTF-8" /> <title></title> <style> .box { width: 50%; margin: auto;
2020-07-18 21:00:50
295
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人