- 博客(45)
- 资源 (2)
- 收藏
- 关注
RSS订阅
原创 JS执行机制详解
引题JS是单线程语言Event Loop是JS的执行机制。深入了解JS的执行,就等于深入了解JS里的event loop（JS执行机制是一样的，但运行机制可能不一样 nodejs中）解释为什么JS是单线程？为什么需要异步？单线程是如何实现异步的？一、为什么JS是单线程JS作为浏览器脚本语言，它的主要用途是与用户互动，以及操作DOM，因此js是单线程，也避免了同时操作同一个...
2019-07-28 10:08:04
4502
1
原创 使用vue-quill-editor实现图片截图复制粘贴上传
运营需要用多张图片进行OCR识别，图片来源一般是运营的截图，直接粘贴过来，然后需求请求OCR截图提交图片list，粘贴图片的同时需要上传图片到cdn地址；
2024-03-27 19:54:42
310
原创 iview爬坑之旅——select分组（optionGroup）展示，允许多选情况下，组内元素只能单选
需求描述：下拉选框select支持分组（OptionGroup）多选，组内元素只能选择一个，（组外元素支持多选，组内元素支持单选，不支持多选）；解决方案根据on-select 和on-change返回值不同，并且on-select的返回优先于on-change的返回时间的原理，得到本次选中的元素和本次返回的结果。在根据当前选中的id找到当前元素的兄弟元素，将除自己的兄弟元素从选中的集合中删除，从而达到组内单选的效果；<Select v-model="runGroupTagList" style=
2021-08-23 16:26:43
1054
原创 iview爬坑之旅——Modal点击‘确定’按钮时弹框自动关闭问题
最近在做Angular项目到Vue项目重构迁移，之前Angular用的UI框架是NG-ZORRO，Vue现在用的是Iview； 但是当用Iview-modal 做表单或者条件校验时遇到了一个问题，当校验不通过时，点击确定，当校验不通过时，弹框也自动关闭了；解决方案方案一 （自用）利用Modal的slot,自定义写底部按钮，这样就可以避开组件内置的 @On-ok, @on-cancel；在按钮点击事件里面去做数据的验证，通过v-model控制模态框的显示与隐藏。 <!--解决弹框自动关闭--&g
2021-07-29 17:08:40
2676
原创 iView树型图Tree增加编辑、新建、删除以及虚线样式
前言今天做数仓需要个树形图，想着本来UI用的就是iView，不想再引入别的插件了，但是iView得Tree和产品要求的有些不一样。要求：要求前面要用加减号图标，不要箭头图标，要有同级虚线连接，需要可编辑、可添加、可删除节点；但是Iview貌似没有现成的配置，只有个添加、删除大致的配置，如图（一）；因此在参考几篇的帖子之后，决定用iView Tree强大的 render 改造一番；最终效果图 如图（二）代码部分<template> <div class="v-tree
2021-05-14 20:47:26
2239
5
原创 Vue中引入静态资源的几种方式
最近修改一些老项目，好多组件里面引入图片的方式不太一样，总感觉自己没有好好总结过，今天有时间参考了几篇帖子，就总结一下；在总结之前看了一下vue-cli的文档，突然感觉之前可能是我忽略它了基本没有看过，官方文档这块写的清清楚楚，还是应该多看文档，天天看掘金、简书这些碎片化知识也不太好；Vue中静态资源引入机制Vue.js关于静态资源的官方文档静态资源可以通过两种方式进行处理：在 JavaScript 被导入或在 template/CSS 中被引用。这类引用会被 webpack 处理。诸
2021-04-26 12:56:57
14990
原创 a标签的 href 与 onclick
今天调试接口遇到一些问题，最后发现是a标签href的问题，所以总结一下关于a标签的href和onclickhrefhref 一般是指向一个URL地址，也可以调用 javascript ,如href="javascript:xxx();",文档中推荐这样写：<a href=" javascript:void(0)" onclick="xxx();">xx</a>,但是这种方法在复杂环境有时会产生奇怪的问题，尽量不要用javascript:协议做为 a 的 href 属性，这样不仅会
2021-04-13 19:30:21
1012
原创 Vue的8种通信方式
最近又读了一次Vue的官方文档，每次读感触都不一样，在看到禁用Attribute继承时有些不太理解，继而读了几篇帖子，突然意识到这不是平时面试时背的8种组件间的通信方式之一吗，但是项目中基本没用过；这里想归纳一下Vue组件间的几种通信方式，针对于一些难于理解的方式，之后会出具体的文章。概述Vue是数据驱动视图更新的框架, 所以对于Vue来说组件间的数据传递通信非常重要，那么组件之间如何进行数据通信的呢？在回答这问题之前我们要先了解组件之间都存在什么关系？在组件树中可以看到：AB、AC、AD、CE
2021-04-06 16:27:34
2280
原创 JS实现复制粘贴的方式
最近在项目中遇到了需要复制粘贴的功能，虽然是个简单的小功能，我竟然没做过，所以根据查找的资料还有实践在这里总结一下；JS实现复制粘贴方式：原生通过document.execCommand(‘copy’)的方式实现使用第三方框架clipboard的方式实现IE大神一、execCommand方式document.execCommand(),文档对象的 execCommand方法允许运行命令来操纵可编辑区域的内容，具体可以查看这里。只需要选中要复制的内容，执行document.execComm
2021-03-24 13:27:42
2787
原创 如何学习一项新技术/新框架
前端发展这些年日新月异，之前在三线城市没有察觉，直到来了北京突然感觉我之前的3年工作经验等于白干了，没有自己的总结，没有自己的知识体系，技术相对落后，像是活在远古社会一样。。。而想从头开始学习一个新框架，如果还用老的方法，学习官网API然后照搬已经不可取了。说真的以前用Jquery真的就是这样，照着API套用就行了，反正就是操作DOM；实现结果就行了；但是现在框架已不再是简单的操作DOM，而是多封装了一层，如果只用官网的API现套基本功能可以实现，优化呢？遇到一堆奇怪的报错无从下手？最根本就是不懂得原理！浏
2021-03-10 11:16:15
427
原创 Mac好用小工具小技巧推荐
工具一、Vanilla简介：如果Mac菜单栏看起来越来越杂乱，显示各种菜单栏图标，那么您可能会对一个名为Vanilla的小巧免费实用程序感兴趣。它允许您通过将Mac菜单栏图标放置在菜单栏中包含的可折叠且可扩展的各种架子中来隐藏它们。注意事项：这款软件只适用于OS X10.1及以上系统版本，但不支持最新的11.0（BigSur）系统版本。此软件为免费软件，但有内购（专业版），请同学们根据使用需求决定是否购买专业版。二、Mate Translate简介：Mate Translate是为iOS，
2021-03-04 14:04:54
196
1
原创 Mac垃圾文件清理指南
场景应用程序打开缓慢甲：我这XXX程序怎么打开的这么慢呢，我可是高贵的固态硬盘啊！乙：不是吧，你看你这硬盘都满了，怎么能不慢呢？！电脑整体运行速度下降甲：啊啊啊，我电脑怎么这么卡！！！乙：不是吧，你看你这硬盘都满了，电脑怎么能不卡呢？！硬盘，可以说是所有文件的“家”了，各种程序所产生的冗余文件和缓存文件也就可以说是“家”中的垃圾了，但是“家”中怎么能有大量的垃圾呢？清理指南一、下载安装清理程序CleanMyMac（一款强大的扫描清理软件）OmniDiskSweeper（功
2021-03-04 12:26:00
434
1
原创 重新认识cookie、session和localStorage、sessionStorage
前言本文将会系统的梳理一下cookie、session和localStorage、sessionStorage的发展史，概念，作用场景等，其中主要的两处作用场景：浏览器缓存机制和token、jwt、单点登录单独总结文章，有需求的小伙伴可以看一下；一、cookie和session1.1 发展史在Web发展史中，浏览器和服务器之间的是通过HTTP协议交流的，但HTTP协议最重要的特点之一就是无状态；最开始Web基本就是文档的浏览，所以服务端无需知道是谁在请求，客户端每次请求都是一个新的HTTP协议；
2021-02-28 23:19:34
374
2
原创 前端实现仿谷歌无总页数分页查询组件
背景项目中的审核系统每天都有至少十几万条数据需要审核，因此列表的分页会有几万页，虽说数据还可以但是server端数据库这些年一直没有升级优化，因此大数据量查询server数据库压力太大导致线上经常报502超时或者500错误；而这个问题就出现在获取列表总条数上面。解决思路（内部系统）开始为了快速解决这个问题我们做了假分页查询，也就是server返回假的总条数（就是后端写死的一个值），报错的问题解决了，但是这样做对用户太不友好了。这个问题最好是做数据库优化，但是由于种种原因暂时还做不了；所以第二种思路
2021-02-24 19:58:45
907
原创 前端开发必备的VSCode插件
本文总结了一下前端开发人员一些经常用的可以提高开发效率的VSCode插件，好的工具可以事半功倍。主要分为：基础通用篇，框架工具篇，自由可选篇（按照我自己的想法分的）基础通用篇1. Chinesevscode编辑器汉化包，安装后，在 locale.json 中添加 “locale”: “zh-cn”，即可载入中文（简体）语言包。2. Auto Rename Tag自动重命名成对的HTML标记，修改开始标签，结束标签会同步修改。3. Auto close tag自动闭合 HTML / XML
2021-02-16 23:21:34
3664
2
原创 vuex基础用法及modules的理解
前言（可不看）今天写一个简单的需求里面涉及到vuex，然后我想在组件中获取一个getters，就那么下手的一瞬间不知道怎么取了。很懵逼，迅速看了一下官网；还是基础知识不扎实，借着中午的休息时间总结一下vuex的基础用法，以及看官网不太好理解的modules,namespaces（朋友们你们也可以直接看vuex官网）。基础用法1. 安装注入import Vuex from 'vuex'Vue.use(Vuex)const store = new Vuex.Store({ state: {
2020-12-03 16:42:49
914
原创 webpack从基础到实战——前言
从来没有系统需学习过webpack，都是用到什么loader,什么插件就直接搜索，很多原理没有仔细研究过，以至于现在稍微有点复杂的配置都无从下手；所以打算仔细系统的学习一下，这里也算是我的笔记了，嘻嘻嘿嘿哈哈。。。一、为什么会出现webpack随着前端工程越来越复杂，单独建立几个文件写项目代码，已经无法保证项目的可维护性了；所以我们想把不同的业务逻辑拆分成模块，然后分别引入这些模块，模块自己做自己的事情，这样就可以保证项目的可维护性和可扩展性了。但是假如项目有几千个模块，那么我们能在页面上引入几千个
2020-11-30 18:43:58
176
原创 前端导出csv/excel文件的几种方式
前言经常做后管项目，里面必然会遇到的就是导出（下载）各种列表，一般就是excel或者csv格式的，有时候也会要求pdf格式，因为今天改了一个关于导出文件乱码的bug,就顺便小结一下。一、Excel和CSV格式文件在开始说导出（下载）方式之前，先来提一下Excel和csv格式是什么，有什么区别？直接下载Excel不就行了。可以仔细看一下下表，也可直接跳过看主要内容；ExceCSV这是一个二进制文件，它保存有关工作簿中所有工作表的信息CSV代表Comma Separated Va
2020-11-03 14:12:28
6168
3
原创 Vue常见问题——Vue路由跳转、切换、返回页面不刷新问题
前言最近用iview-admin做后台管理系统，遇到了个问题，列表页面点击进入详情页面编辑，编辑完成自动跳转到列表页，需要页面重新刷新请求列表（后管就是这么简单粗暴），然并卵~，再次回到列表页页面不会重新刷新；问题很好解决，因为iview-admin的路由设置会默认缓存页面notCache:false,因此我直接设置notCache:true就ok了，页面可以重新刷新。但是我觉得这个问题简单也不简单，所以参考网上一些文章加上自己之前遇到过得一些相似问题小结一下；针对不同的需求分为两部分：一、需求—
2020-10-09 13:56:26
17268
2
原创 大数据接口处理时间过长，前端访问超时解决方案
引言：最近项目在做一个图片指纹的功能，根据上传图片去筛查出全服务相似图片，筛查部分由算法那边去开发，但是由于数据量巨大，算法给出的接口处理时间可能需要10s（公司网关是6s）。接口的响应时间太长了，网关会报504超时，页面就挂掉了。。。关键点是技术方案要让前端直接跟算法联调（不是应该有个中间服务处理数据吗？）解决方案一：由之前一个算法接口拆分成两个接口,a接口负责启动开始查询，b接口由a接口触发开始查询数据，最后返回状态；前端针对第二个接口实行长轮询具体思路就是：用户触发查询接口a（其实是
2020-08-24 10:23:24
12184
2
原创 JS数组的一大波相关操作总结
引言JS数组前端开发应该经常与其打交道，尤其是在MVVM数据驱动视图，视图改变数据流行之后，开发网页多数时间在操作各种JS数组；那么它是什么？如何定义？有哪些属性？有哪些方法？如何遍历？针对这些问题我在这里小结一下；一、数组定义、特点、创建1. 定义：数组是一组数据的集合，其表现形式就是内存中的一段连续的内存地址，数组名称其实就是连续内存地址的首地址2. 特点：数组定义时可以无需指定数组长度存储数据是无需指定具体类型，可以存储任意类型3. 创建：var array=[1,2
2020-08-03 15:59:54
300
原创 Charles抓包的那些事
前言作为移动端开发人员用的最多的抓包工具就是charles,但是我近几年一直做PC端的前端开发工作，感觉chrome的devtools已经满足了日常的工作需求；对于charles的使用也很少。最近开始做一些webview的开发，对于灰度环境，线上环境的bug还是需要用到charles的，所以这篇文章也是我自己的趟坑之旅，用作平时对于charles的一些总结，以免出现有段时间不用再用的时候“抓瞎”的情况；PC端抓包HTTP一般我们正常安装完charles之后就会,HTTP数据就会正常抓取到如果
2020-07-24 13:22:32
370
原创 解决Vue+TypeScript开发中TS不识别this.$refs的问题
问题场景：用iview框架开发后管系统，需要用到form表单功能，最后提交表单代码是：this.$refs.form.validate(......)但是代码报错：Property 'validate' does not exist on type 'Vue | Element | Vue[] | Element[]'.Property 'validate' does not exist on type 'Vue'因为第一次用TS也是很蒙，查找了网上大概思路就是validate() 并不是
2020-07-09 13:59:49
15561
原创 Promise的深刻理解——promise.all和promise.race
一、promise.allPromise.all可以将多个Promise实例包装成一个新的Promise实例。同时，成功和失败的返回值是不同的，成功的时候返回的是一个结果数组，而失败的时候则返回最先被reject失败状态的值。let p1=new Promise((resolve,reject)=>{ resolve('p1成功了')})let p2=new Promise((resolve,reject)=>{ resolve('p2成功了')})let p3=Pr
2020-07-04 16:32:27
1429
原创 iview爬坑之旅——远程搜索选择最后一个选项会重复请求
引言：刚刚开始入手iview,之前一直用element。慢慢摸索慢慢爬坑，今天说一下iview的select远程搜索相关问题；一、选择最后一个option会重复发送请求1. 问题如下图远程搜索出现对应的下拉选项接口请求正常，但是当我选择option的时候又会发送一样请求，由于接口传入的不是ID了所以会报错；重复请求报错了：研究了一下这个是iview框架的问题，就是选择最后一个选项会重复发送请求，那么怎么解决这个问题？网上查找了一下很多用的是节流函数，限定一个时间，只在时间内触发；我也试过了
2020-06-29 09:56:40
2002
原创 React之Redux
知识点1、Redux概念简述2、Redux的工作流程3、使用Antd实现TodoList页面布局4、创建Redux中的store5、Action和Reducer的编写6、使用Redux完成TodoList删除功能7、ActionTypes的拆分8、使用actionCreator统一创建action9、Redux知识点复习补充1、Redux概念简述由于React是一个视图层框...
2020-05-07 11:19:06
204
原创 async、defer与DOMContentLoaded的执行先后关系
一、HTML解析过程与DOMContentLoaded触发时机我们已经知道DOMContentLoaded的触发时间为：当 HTML文档被加载和解析完成。那么我们还需要理解HTML的解析过程。此处我们先只考虑同步js的情况。1.在既没有CSS也没有JS的情况下，HTML文档的解析过程为：DOMContentLoaded事件的触发时机为:HTML解析为DOM之后。2.有CSS无JS的情况...
2020-05-07 11:17:43
1002
原创 手机通过Charles用线上域名访问PC本地项目
手机通过Charles用线上域名访问PC本地项目最近调试微信公众号，由于微信授权需要线上正式环境的域名，笔者想把手机公众号网页重定向到PC本地localhost调试。该方法通过Charles代理转发，适用所有需要域名重定向的场景，例如手机通过在线域名查看pc本地项目，微信开发者工具调试公众号等。先开启本地服务，如果是vue项目，直接运行 npm start 就好了。打开Charles（下...
2019-07-04 11:55:00
1601
转载 html页面传值的几种方法
1. 利用URL地址栏进行传值<a href="/pc/buyCenter/leftMenu/myCancelOrder?searchContent=<%=totalOrders.unionOrderNumber%>"><%=order.statusMap[-100]%></a>接收页面打印 //获取链接中传过来的searchCo...
2018-08-27 16:31:37
3267
原创 daterangepicker时间段插件 使用总结
一直觉得daterangepicker是一个很完美的插件，但是事实证明再完美的插件也满足不了所有人的需求，我主要是做的使用两个单日历实现范围选择，借此也把我查到的我认为很好的文章分享一下：一般使用daterangepicker插件的初学者可能会遇到以下四个问题：日期范围选择实现单个日期时间选择使用两个单日历实现范围选择使用div代替input实现日期时间选择下面按照顺序可以分...
2018-06-08 15:34:28
6611
1
转载 javascript中new Date()的浏览器兼容性问题
引言： 同一种语言javascript，在不同的浏览器中，存在语言兼容性问题，本质上是由于不同的浏览器是支持的语言标准和实现上各有差异。本文将基于new Date来创建Date对象来分析这个问题。1. 问题的提出， 开始时间和结束时间空间无法正确的传递值在页面中，我们使用了一个时间上的组件来开发时间选择框，但是发现在Firefox下是无法正常工作的，在Chrome下是可以正常运行的。 ...
2018-06-04 15:55:54
378
原创 seajs添加版本号强制刷新本地缓存
最近被这套架构弄得有点晕乎，每次上线由于缓存带来不少问题。本来用gulp添加了版本号，但是由于项目特殊性并不是每次html都上传，造成gulp打包完，然后不用。针对这个问题解决过一次，但是昨晚上线又出现缓存问题，找了半天，发现是通过seajs引入的js没有添加版本号；把我查找的解决方案贴出来：seajs配置参数中有map属性为文件映射功能，其作用是通过seajs加载的文件映射为一个新的名称加载...
2018-03-07 18:45:27
843
原创 介绍web前端工程化
今天看了一个大牛的知乎，有一种顿悟的感觉，思路清晰不少，果断收藏！转载到这里希望更多困惑的小伙伴能看到！作者：赵雨森 链接：https://www.zhihu.com/question/24558375/answer/139920107目前来说，Web业务日益复杂化和多元化，前端开发已经由以WebPage模式为主转变为以WebApp模式为主了。现在随便找个前端项目，都已经不是过去的拼个页...
2018-02-12 16:39:57
578
转载 jQuery插件模块化(SeaJS)及其调用方式
jQuery插件本质上是将命名空间挂在全局的jQuery或jQuery.fn上而非使用define定义的模块。 JQuery的这种扩展机制同模块化要求模块的独立性，以及模块互相隔离有点冲突。 jQuery插件数目众多，我们不打算做大量的转换工作，为模块化而模块化，甚至改变插件的调用方式， 这样对开发带来的价值不大。只希望通过模块加载器实现自动的依赖管理，按需加载，并且使用方式自然。1.常见
2017-12-12 15:30:07
1310
原创 jQuery ajax 实现长轮询支付扫码PC交互
原理Jquery Ajax长轮询的原理主要是，前台客户端发送ajax请求到服务器，服务器接收到请求之后会保持住连接，直到有新消息才返回响应信息并关闭连接，客户端处理完响应信息后再向服务器发送新的请求。优点：在无消息的情况下不会频繁的请求，耗费资源小。 缺点：服务器保持住连接会消耗资源。长轮询介绍Web 通信 之 长连接、长轮询（long polling）基于HTTP的长连接,是一种通过长轮询方式
2017-11-23 15:01:59
2323
转载 input file 重复上传同一张图片失效的解决办法
项目中遇到上传图片，需要本地预览效果，测试时无意间发现，当选择A图片，然后更换为B图片，完全正常；当选择A图片，取消该图片，再测选择A图片后，发现不会再生成预览效果，出现了bug；查找相关资料后，终于找到了两个解决办法；方法一：来回切换input[type=’file’]的type属性值，可以是‘text’,’button’,’button’….，然后再切换回来‘file’ 方法二：每次取消图
2017-11-17 17:48:49
9025
4
原创 ajaxFileUpload上传图片
首先引入ajaxFileUpload插件然后：//上传图片function uploads(){ var imgSrc = '', imgArr = [], strSrc = '' ; var file = document.getElementById("imgFile"); var browser=navigator.appName; var b_version=nav
2017-07-28 15:44:35
418
原创 仿select下拉框，鼠标点击元素以外隐藏下拉框
两个问题一、仿下拉框（select）二、鼠标点击元素以外 下拉框隐1、先说第一个问题：<p class="return-select"> <i></i> <span class="select-text">请选择</span></p><ul class="select-options"> <li>1</li> <li>2</li> <li>3</li>
2017-07-28 15:11:32
3513
1
原创 meta 标签X-UA-Compatible和IE=Edge,chrome=1
今天无意中看360主页的源代码看见了这个标签，表示不解就百度了一下，感觉还是挺不错的一个标签！http-equiv="X-UA-Compatible" content="IE=7"> #以上代码告诉IE浏览器，无论是否用DTD声明文档标准，IE8/9都会以IE7引擎来渲染页面。 http-equiv="X-UA-Compatible" content="IE=8"> #以上代码
2017-02-15 11:55:24
661
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人