- 博客(33)
- 收藏
- 关注
RSS订阅原创 利用contenteditable属性实现div可编辑，控制插入节点
富文本编辑器或者text是没有办法插入一个自定义的html节点，所以最后决定用div的contenteditable属性，使其变成可编辑的状态，控制光标的位置来插入。一、html <div class="ant-input" id="edit" ref="url" contenteditable="true" placeholder="请输入链接" @blur="changeUrl" @
2021-10-13 13:57:00
4514
7
原创 js位移运算符（＜＜、＞＞）
移位运算就是对二进制进行有规律低移位一、 << （左移运算符）在移位运算过程中，符号位始终保持不变如果右侧空出位置，则自动填充为 0；超出 32 位的值，则自动丢弃console.log(5 << 2); // 20演算过程：其实来说，左移运算符就是*2的n次方上面的例子可以换算为：5 << 2 = 5 * 2^2 = 208 << 5 = 5* 2^5 = 256二、 >> （右移运算符）有符号右移位运算把
2021-07-23 09:55:03
1573
1
原创 解决gif图片只加载一次的问题
由于浏览器对图片有缓存的机制，所以对于一次性型的gif图，只会加载动效一次，后面再次使用时就不会出现我们想要的效果，因此我们需要解决这种缓存问题，可以使用添加时间戳的问题让浏览器认为这不是同一张gif图，从而再次加载图片，实现每次都有动效。代码：<img v-show="show" :src="onceImg" /><script>export default { name: 'home', data() { return { show: true, s
2021-06-24 11:16:49
1973
原创 vue 按钮点击防止多次点击导致重复提交（节流）
按钮多次点击时，不进行节流操作的话，会导致重复提交或者请求，这时就需要控制，在某一个时间段内，只执行一次操作编写指令在项目中添加一个plugins.jsimport Vue from 'vue'// 防止重复提交指令const preventReClick = Vue.directive('preventReClick', { inserted (el, binding) { el.addEventListener('click', () => { if (!e
2021-05-07 09:46:18
2642
原创 antdv 带radio的table表格头反选
最近做了一个项目，其实使用的是antdv提供的rowSelection中的radio模式，但是这个有一个缺点，就是没有办法做反选，就是说，我想提供一个已经选中的值给到表格显示，让选中的表格的radio选中。那既然antdv没有提供相应功能的话，我们就只能radio自己添加进去控制。具体代码如下：<a-table :columns="columns" :data-source="tableData" :pagination="paginationList" rowKey=
2021-05-06 14:36:15
577
原创 【leetCode】求只出现一次的数值（异或运算符^）
之前上学的时候学习的知识，很多时候在工作中没有使用就完全忘完了，最近开始刷leetCode，就发现这个异或运算，就重新复习了一下 在二进制中，存在异或 ^ 操作，也就是位数值相同的为0，位数值相异的为1，也就是1.交换律：a ^ b ^ c <=> a ^ c ^ b2.任何数于0异或为任何数 0 ^ n => n3.相同的数异或为0: n ^ n => 02.任何数于0异或
2021-04-15 16:44:32
97
原创 【2021面试】算法编程篇
目录1、数组去重2、计算1～n的和3、判断回文4、冒泡排序以及它的优化5、斐波那契数列6、快速排序7、二分查找1、数组去重1）ES6 的 Set此时，有些面试官会刨根问底，为什么es6的Set()这个就可以去重?回答：因为Set是类数组对象类型的，它的特性就决定它内部都是不重复的数据此时，如果面试官还继续问，Set()里面是怎么进行重复数据去重的？回答： a、set() 函数中会先调用对象的__hash__()方法，获取 hash 结果；&nb
2021-04-14 15:55:41
127
原创 【2021面试】性能优化、网络篇
目录1、讲一下get、post的区别2、用过node管理包工具么，有哪些，分别有什么区别3、回流和重绘3、HTTP状态码4、vue首屏加载优化5、说说http和https6、长连接和短连接7、websocket8、四大浏览器内核9、fetch和axios10、网页从输入网址到渲染完成经历了哪些过程？11、浏览器页面渲染的过程12、网页加载慢的原因以及解决方案13、cookie是干嘛的，有什么用，里面一般放着什么14、如何实现图片懒加载（渲染几万条数据且不卡顿）15、web安全中的xss是什么16、协商缓存与
2021-04-13 16:22:05
271
原创 【2021面试】js篇
目录1、js的数据类型2、null和undefined的区别3、闭包（必问）4、谈谈异步编程5、let 和 const 以及 var 的区别6、call()、apply()、bind()的区别7、== 与=== 区别8、防抖和节流的区别8.1 原生编程9、使用new调用函数的时候，会执行怎样的流程9.1 原生编程10、解释一下js中的原型、原型链11、如何判断数据类型12、列举强制类型转换和隐式类型转换13、请讲述一下事件委托 / 事件代理13.1 原生编程14、addEventListener和onCli
2021-04-13 13:54:24
258
原创 【2021面试】vue篇
目录1、vue的生命钩子2、组件通信传值1、vue的生命钩子回答该问题时，最好能将每个周期内做的事情讲出来，因为有时面试官会让你详细讲每个周期内发生了什么beforeCreated()：在实例创建之间执行，数据未加载状态。created()：在实例创建、数据加载后，能初始化数据，DOM渲染之前执行。beforeMount()：虚拟 DOM 已创建完成，在数据渲染前最后一次更改数据。mounted()：页面、数据渲染完成，真实 DOM 挂载完成。 beforeUpadate()：重新渲染之前触发
2021-04-12 16:55:52
228
原创 【2021面试题】css篇
1、伪类和伪元素的区别主要在于有没有创建一个文档树之外的元素伪类：用于选择DOM树之外的信息，包含那些匹配指定状态的元素 ，比如 :visited，:active等。或者是不能用简单选择器进行表示的信息 ，包含那些满足一定逻辑条件的DOM树中的元素，比如 :first-child，:first-of-type，:target等。伪元素：为DOM树没有定义的虚拟元素。不同于其他选择器，它不以元素为最小选择单元，它选择的是元素指定内容。比如 ::before表示选择元素内容的之前内容，也就是""；::
2021-03-27 23:56:30
280
原创 浅析http缓存
一、作用能够帮助服务器提高并发性能，很多资源不需要重复请求直接从浏览器拿二、作用范围至少两次http请求才有作用：第一次响应到第二次请求的时候三、分类web缓存：数据库缓存、服务器缓存、浏览器缓存浏览器缓存：http缓存、indexDB、cookie、localstorage三、基本术语四、http缓存分类通过资源的http请求头信息来判断是什么类型的缓存1、强缓存不用发送请求到服务器，直接拿缓存，状态status是200（1）判断：在chorm的检查中，networ
2021-03-19 17:57:19
144
原创 浅析前端安全（XSS、CSRF）
XSS（跨站脚本攻击——Cross-site scripting）表现形式： 攻击者在网站上注入恶意的客户端代码，通过恶意脚本对客户端网页进行篡改，从而在用户浏览网页的时候，对用户浏览器进行控制或者获取用户隐私数据的一种攻击方式。1、恶意脚本分类：表现步骤：注入恶意的脚本例如js，html等将一些隐私的数据像cookie、session发送给攻击者，将受害者重定向到一个有攻击者控制的网站，在受害者的机器上进行一些恶意操作反射性（非持久型）当浏览器进行请求的时候，注入恶意代码到服务器上，将一些
2021-03-19 17:19:44
159
原创 前端异步编程六种方案
1、回调函数优点：简单、容易理解和实现缺点：就是容易写出回调地狱(各个部分之间高度耦合，使得程序结构混乱、流程难以追踪) ajax(url, () => {});2、事件监听特点：异步任务的执行不取决于代码的顺序，而取决于某个事件是否发生优点：比较容易理解、可以绑定多个事件，每个事件可以指定多个回调函数，而且可以"去耦合"，有利于实现模块化缺点：将整个程序都要变成事件驱动型，运行流程会变得很不清晰。阅读代码的时候，很难看出主流程 f1.on('done', f2); // 事件f1完
2021-03-19 16:52:44
1086
原创 【js】arguments浅析
Arguments 对象在一个函数中形参：函数定义的参数实参：函数调用时实际传的参数参数的匹配时从左到右的，当实参个数 < 形参个数，后面对应的形参赋值为undefined实参格式 > 形参个数， 可以通过argument访问概念Javascrip中每个函数都会有一个Arguments对象实例arguments（类数组对象），它是函数的实参集合，可以用数组下标的方式"[]"引用arguments的元素(function(i) { console.log(arguments);
2021-03-19 00:03:54
114
原创 【vue】cropperjs图片裁剪
在一些需求中，需要上传图片，而且有时上传的图片是要裁剪成一定的比例才能上传，这时我们就可以用cropperjs实现这个功能。 cropperjs可以进行非常灵活的配置来实现图片的裁剪，可以生成一个裁剪之后的canvas对象，还可以利用toDataURL方法生成Base64格式的图片。如果不使用canvas的方式，利用该工具丰富的api可以拿到裁剪区域相对于原图的各项数据，使用这些数据进行css绝对定位即可展示裁剪
2021-01-15 10:36:00
556
2
原创 【js】计算一行字符串的像素长度
getTextWidth(str, fontSize) { let result = 0; let ele = document.createElement("div"); ele.style.position = "absolute"; ele.style.whiteSpace = "nowrap"; ele.style.fontSize = fontSize; ele.style.opacity = 0; ele.innerText = str;
2021-01-13 10:55:52
2432
原创 让div呈现类似于background-size中contain的等比(16:9)缩放的自适应效果
做移动端的项目，最重要的就是页面的自适应。比如让一个子盒子在父盒子中等比缩放居中显示，以便整个子盒子能最大程度的显示在手机上，而不变形。首先，我们需要了解background-size中contain和cover的含义与区别。在no-repeat情况下，如果容器宽高比与图片宽高比不同时1、contain：图片自身的宽高比不变，缩放至图片自身能完全显示出来，所以容器会有留白区域2、corver：图片宽高比不变、铺满整个容器的宽高，而图片多出的部分则会被截在repeat情况下1、contai
2020-10-21 22:37:34
753
原创 【vue】element-ui select结合checkbox实现全选和反选
在有些项目中会出现，select与checkbox的结合体，有的时候还需要全选与反选的功能，效果如下：代码如下：<template> <div style="font-size: 14px; width: 50%;margin: 0 auto;"> <p>选择的省份：{{provinceType.join('，')}}</p> <el-select class="pop_select" size="min
2020-08-08 14:45:41
4398
4
原创 利用vue-seamless-scroll实现无缝轮播多行跑马灯
你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。新的改变我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客：全新的界面设计 ，将会带来全新的写作体验；在创作中心设置你喜爱的代码高亮样式，Markdown 将代码片显示选择的高亮样式 进行展示；增加了 图片拖拽 功能，你可以将本地的图片直
2020-06-01 15:13:40
1338
原创 移动端h5调起手机app
当所做的h5页面在微信端打开时，想要调起手机内的app，一般我们会用scheme协议监测本地的应用，要是没有则下载app，有的话就直接打开。但是微信上是屏蔽了，所以我们要是在微信端，则得提示用户用浏览器打开页面再进行监测本地的应用。tips：如何判断是否在微信浏览器端：const u = navigator.userAgent;const isWeixin = u.toLowerCase().indexOf("micromessenger") !== -1;一、scheme协议scheme 是
2020-05-16 22:51:58
1819
1
原创 sortablejs拖拽排序功能（vue）
有些需求是要求有表格拖拽，或者是一些普通的楼层div拖拽所以我们可以用sortablejs进行，官方文档为：http://www.sortablejs.com/一、下载npm install sortablejs --save二、使用例子1: table拖拽（element-ui）<template> <div class="home"> <div class="floor"> <div class="column_box" v
2020-05-15 22:34:45
3160
原创 mac搭建本地的服务器
mac系统有自带的apache服务，所以我们就只需要启动它就可以了sudo apachectl start //启动sudo apachectl restar //重新启动sudo apachectl stop //停止打开终端：执行 sudo apachectl start 启动服务器，打开浏览器，地址栏输入：127.0.0.1,如果页面出现 it works，则代表访问成...
2020-04-14 18:39:02
547
原创 macOS 修改网卡地址出现basicipv6validationerror
1、列出你的网卡networksetup -listallnetworkservices查看你要修改配置的网卡名称是哪个2、关闭ipv6networksetup -setv6off "USB 10/100 LAN(你网卡名字)"3、设置ip地址networksetup -setmanual "USB 10/100 LAN" 192.168.6.62 255.255.255.0 1...
2020-02-14 14:01:32
244
原创 高德地图进行省市下钻（vue）
高德地图本身就提供了省市下钻的功能，但是官网提供的下钻功能带有一个省份树，一般我们开发的过程中，主要是要用到下钻的功能而已，所以在这我就用vue的方式，只提取出来了下钻的功能。官网地址：https://lbs.amap.com/api/amap-ui/demos/amap-ui-districtexplorer/index/?_=1580992896523步骤：一、引入高德地图找到publ...
2020-02-14 13:47:07
3951
4
原创 iframe中子页面访问父页面的某个元素，产生跨域访问
在同域情况下，子页面如果想要访问父页面中的window对象中的方法的话，直接在当前页面中使用window.parent就可以啦但是当iframe嵌入的地址与父页面的地址不在同一网段里，就出现跨域问题解决办法：1、子页面iframe中的代码:<script type="text/javascript"> $("#secondaryDownload").click(...
2020-02-14 12:54:14
1054
原创 百度地图api只显示某个省市的行政区域
有些时候我们只需要某个省份的行政区域，那么运用百度地图如何实现呢？ 我们先上效果图： 步骤： 创建map实例var map;createMap() { map = new BMap.Map('main'); map.centerAndZoom(new BMap.Point(106.714476, 26.60403), 8); // 将地图在水平位置上移动x像...
2019-06-03 11:29:54
24765
16
原创 https站点调用百度地图api
百度地图的js中，有很多额外功能的js是代码中动态生成的，所以我们只改写密钥的链接为https也是无法控制其余js是否是https请求的。解决：查询原生代码发现有控制请求地址域名的代码判断：window.HOST_TYPE的类型（0/1/2）就决定了请求的地址（http/https），因此，我们只要给window.HOST_TYPE赋值为1或者2就可以让百度地图的请求地址为https。但是由...
2019-05-31 16:45:47
1772
原创 echart-词云图
词云（world-cloud）功能已经在echart官网上找不到相应的简介或者介绍了，然而我们又想用echart中的词云怎么办呢，那么我就分享一下我的经验。一、引入echart.js⚠️ 在使用的过程中发现公司的项目中，已经存在的版本为echart4，但是echart4中不支持词云功能，总是报以下的错误：然后就引入了echart3，但是一个项目内如何使用两个echart版本呢。下载ec...
2019-05-28 11:42:32
2676
2
原创 nodejs连接MySQL，报错：Access denied for user 'root'@'localhost' (using password: YES)
按照网上的教程，在连接数据库的时候会下载 mysql@2.0.0-alpha9，可是这样在运行的时候就会出现：解决的办法是：卸载mysql@2.0.0-alpha9，重新安装：npm install mysql...
2018-09-21 16:47:48
5395
3
原创 Chrome远程移动端调试
有的时候我们做好的APP想在chorm浏览器中进行调试，方法如下：（1）在Chrome上，按F12打开开发者工具，在开发者工具的右上角选择更多工具(More tools)->检查设备(Reromte devices)；（2）利用USB数据线连接个人手机，并在手机上启用USB调试者模式；（3）点击第二个选项：（4）手机上打开想要调试的APP；（5）点击旁边的“Inspe...
2018-09-14 14:35:01
258
原创 ionic4调用手机内部App
ionic4调用手机内部Appionic3升级为ionic4，有许多地方发生了重大的改变，由于现在ionic4还在处于bate版本，所以有很多地方还没有进行完善，现在就来讲一下在ionic4-bate版本中如何进行手机内部APP的调用功能。一、安装可检测 APP 是否安装的插件 npm install –save @ionic-native/app-availability ...
2018-09-14 14:25:01
2218
5
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人