- 博客(27)
- 收藏
- 关注
RSS订阅
原创 JavaScript 运行机制:Event Loop,堆、栈、队列以及宏任务、微任务
1、首先，由于Javascript是单线程这个本质才会有接下来的一系列下文。2、堆、栈、队列： 堆：堆是在程序运行时，而不是在程序编译时，动态申请某个大小的内存空间，即动态分配内存。 栈：简言之：‘使用堆的一种方法’（先进后出）。 队列：是一种先进先出的线性数据结构。区别： 空间分配：堆：一般由程序员释放，如果程序员不释放就会在结束时由...
2019-01-11 00:15:33
1147
转载 小程序架构和工作原理
小程序上线以来，一向被称为“便携版”的APP，关于两者之间的区别，无外乎小程序相对轻便、开发成本低，下面让我们来看一下小程序的“庐山真面目”！一、app的分类大致可以分为这3种：native app（原生app）、web app、hybrid app（混合app），关系如下图：二、什么是小程序小程序是介于web网页应用和原生应用的一种产物；小程序的特点：三、小程序架构 视图层和逻辑层分离，通过数据驱动，事件交互，不直接操作DOM 视图层负责渲染页面
2022-01-19 11:57:30
4040
转载 Vue 项目如何做单元测试？
一直对单测很感兴趣，但对单测覆盖率、测试报告等关键词懵懵懂懂，最近几个月一直在摸索如何在Vue业务系统中落地单元测试，看到慢慢增长的覆盖率，慢慢清晰的模块，对单元测试的理解也比以前更加深入，也有一些心得和收获。1. 定义单元测试定义：单元测试是指对软件中的最小可测试单元进行检查和验证。单元在质量保证中是非常重要的环节，根据测试金字塔原理，越往上层的测试，所需的测试投入比例越大，效果也越差，而单元测试的成本要小的多，也更容易发现问题。也有不同的测试分层策略（冰淇淋模型、冠军模型）。2.
2021-09-17 12:53:07
5459
原创 JS循环大总结， for, forEach，for in，for of, map区别
#JS循环大总结， for, forEach，for in，for of, map区别map（数组方法）：###特性：map不改变原数组但是会 返回新数组可以使用break中断循环，可以使用return返回到外层函数###实例：let newarr=arr.map(i=>{return i+=1;console.log(i);})console.log(arr)//1,3,4---不会改变原数组console.log(newarr)//[2,4,5]---返回新数组for
2021-07-10 23:19:56
348
原创 [Vue warn]: You may have an infinite update loop in a component render function出现场景和解决方案
出现场景 最近在重构公司的代码，把element-ui从1.34升级到2.10。升级后发现只要使用el-table循环数据就会报：[Vue warn]: You may have an infinite update loop in a component render function解决方案 试了好多方法，各种改代码。总结出一条规律来：如果你是某个组件出现这个警告那就是那块的代码有问题了。但是如果好多组件都出现这个问题那就是：需要升级下vue版本了，vue版本太低了 ...
2020-07-20 19:21:32
3357
原创 element-ui低版本升级高版本（1.37升级到2.1.0)，并解决升级后引发的问题
最近单位代码重构，记录一下升级element-ui升级过程及升级之后引发的问题升级步骤1、第一步：先卸载之前的版本 npm uninstall element-ui2、第二步：安装最新版（想要安装的版本） npm install element-ui @2.1.0-S（注：没装最新版，怕有什么问题）3、第三步：最重要的一步在main.js中修改新增的 theme-chalk 主题：将import 'element-ui/lib/theme-default/index.c...
2020-07-16 16:17:09
2503
1
原创 外行都能看懂的使用CSS画一个三角形
废话不多说，先上效果图再上代码<!DOCTYPE html><html><head> <title></title> <style type="text/css"> /* css3绘制三角形 */ .triangle{ width: 0px; /*设置宽高为0，所以div的内容为空，从才能形成三角
2020-05-17 11:46:28
211
原创 前端性能优化篇（一）开启nginx gzip压缩
什么是GZIPGZIP是若干文件压缩程序的简称，通常指GNU计划的实现，此处的GZIP代表的就是GUN ZIP，这也是HTTP1.1协议定义的两种压缩方法中最常用的一种压缩方法，客户端浏览器大都支持这种压缩格式。（下面两图我们对比下设置gzip前后对比）不设置服务器gzip的情况下在设置服务器gzip之后我们发现，设置gzip之后，获取同样的数据。压缩之后的数据量大概是原始数据的1/4。同样的，获取数据的时间也大大降低。极大的优化了用户的体验。设置 nginx GZIP编辑n
2020-05-17 11:02:23
1835
1
原创 Jquery将form表单序列化成JSON对象
废话不多说，直接上代码 <form class="form-horizontal" id="userEditForm" role="form" > <div class="form-group"> <label class="col-sm-2 contr...
2020-04-14 17:47:50
429
原创 深入了解vuex，vuex的五个核心属性
vuex是什么？ 专门为vue设计的状态管理架构，统一管理和维护vue的可变状态。vuex的五个核心属性？ 五个核心概念：state、getters、actions、mutations、modulesstate state是vuex的基本数据 由于vuex状态存储是响应式的，所以vue组件从store中获取状态最简单的方法就是写在计算属性中 ...
2019-07-09 19:30:36
7811
2
原创 js实现深拷贝的两种方式
一、基本数据类型 数据分为基本数据类型（String、Null、Boolean、Undefined、Symbol、Number）和引用数据类型。 基本数据类型的特点：直接存储在栈中的数据。 引用数据类型的特点：存储的是该对象在栈中的引用，真实数据存储在堆中。 引用数据类型在栈中存储了指针，该指针指向堆中该实体的起始地址。当解释器寻找引...
2019-07-08 13:56:49
394
原创 HTTP协议中Cookie彻底解读
Cookie简介： Cookie总是保存在客户端中，按在客户端中的存储位置，可分为内存Cookie和硬盘Cookie。内存Cookie由浏览器维护，保存在内存中，浏览器关闭后就消失了，其存在时间是短暂的。硬盘Cookie保存在硬盘里，有一个过期时间，除非用户手工清理或到了过期时间，硬盘Cookie不会被删除，其存在时间是长期的。所以，按存在时间，可分为非持久Cookie和持久Cook...
2019-07-04 16:06:48
431
原创 ES6中箭头函数VS普通函数的this指向问题彻底讲解
一、普通函数中this（1）总是代表着它的直接调用者，如obj.fn，fn里的最外层this就是指向obj（2）默认情况下，没有直接调用者，this指向window（3）严格模式下（设置了'use strict'），this为undefined（4）当使用call，apply，bind（ES5新增）绑定的，this指向绑定对象注释：1. call 方法第一个参数是this的...
2019-06-27 19:07:16
224
原创 微信小程序使用canvas绘制圆角矩形在Android：变形、锯齿
这两天用小程序实现分享生成海报，那我的手机测的一直没问题，结果后来用同事的小米测发现：画的图形缺个角，锯齿形的，根据小程序社区回复：使用ctx.arc + ctx.lineTo就能避免Android错误，Android只使用ctx.arcTo不兼容！！！ /** * 绘制圆角矩形 * @param {Object} ctx - canvas组件的绘图上下文 ...
2019-05-29 13:38:17
1356
原创 object对象keys(), values() entries()
1、 Object.keys()ES5 引入了Object.keys方法，返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（ enumerable ）属性的键名。var obj = { foo: "bar", baz: 42 };Object.keys(obj)// ["foo", "baz"]2 、Object.values()Object.values方法返回一个...
2019-05-23 09:59:28
755
原创 VUE项目中使用this.$forceUpdate();解决页面改变data数据不重新渲染问题
今天遇到一个问题，给数组添加了一个新的参数，但是也页面始终没有重新渲染。最后找了半天资料发现，原来是循环嵌套太深导致页面无法重新rander; 解决方案如下： 添加this.$forceUpdate();进行强制渲染，效果实现； ...
2019-04-27 12:54:05
3662
原创 element-ui版本升级问题
昨天element-ui进行了一版版本升级，升级之后发现我们的项目出现了小图标不显示等一列问题，于是赶紧将版本改成原来的，具体注意事项如下图： ...
2019-04-26 18:02:50
2358
原创 vue-color 取色器的用法研究
github：https://github.com/xiaokaike/vue-color今天项目中引用了一下vue-color,大概步骤如下1、安装vue-color$ npm install vue-color2、安装所需依赖npm install3、引入项目import { Photoshop } from 'vue-color'//有6中风格，用哪种直接...
2019-04-08 17:27:02
10979
3
原创 vue监听浏览器原生返回按钮，进行路由转跳
今天测试给我报了个bug说点击浏览器返回页数据显示的不对，我查了半天原因：需要监听浏览器的回退按钮，并阻止其默认事件。 具体操作方法如下： 1、挂载完成后，判断浏览器是否支持popstatemounted(){ if (window.history && window.history.pushState) { history.pus...
2019-03-20 17:36:57
6806
2
原创 vue+webpack 前端性能优化
优化方法一： vue-router路由懒加载 按需加载：也叫延迟加载或者懒加载，即在需要的时候进行加载，随用随载。 使用懒加载的原因：vue是单页面应用，使用webpcak打包后的文件很大，会使进入首页时，加载的资源过多，页面会出现白屏的情况，不利于用户体验。运用懒加载后，就可以按需加载页面，提高用户体验。（下图为懒加载的写法）优化方法二：webpack压缩图片（减...
2019-03-20 12:55:14
748
原创 git clone提示user permission denied解决方案
今天使用git clone去铛一个移动端的代码然后报user permission denied 还报403，然后首先想到的是谁把我的权限去掉了，但是去gittea上面看了一下并没有。然后又用同事的电脑试了下没问题，然后又试了一些别的方法。 1、使用gitconfig --unset --global user.name来删除全局变量，又试了一下还是不行。 2...
2019-03-11 14:04:53
4913
原创 Es6数组去重和取最大值和最小值
这两天单位招人，问了一下数组去重和取最大值最小值的方法，然后好多人都能说出es5的用法但是能说出es6的方法的寥寥无几，所以这里总结一下。 1、数组去重 let arr=[12,23,3,323,4,343,4,3] let newarr =Array.from( new Set(arr) ); con...
2019-03-01 07:57:24
1866
原创 解决webpack打包 vue项目 app.js和vendor.js过大问题解决
最近随着单位的线下单子变多，线上项目感觉打包慢的要死。所以得感觉解决一下了。原因：如上图所示，发现app.js和vendor.js过大导致打包时间过长。main.js导入第三库太多时,webpack合并js时生成了vendor.js(我们习惯把第三方库放在vendor里面)造成的。解决思路：对症下药--瘦身app.js和vendor.js.解决方案：1、通过cdn来加载第三方库，具...
2019-01-09 16:30:11
12122
1
原创 使用vue的v-if判断数组长度length报错解决方案
v-if="form.details.length>0"项目中使用v-if判断数组长度报错：Error in render: "TypeError: Cannot read property 'length' of undefined"解决方法：v-if="form.details.attrs !== undefined && form.details.a...
2018-12-19 16:29:21
12267
2
原创 史上最强，Iconfont使用详解，vue项目使用教程
个人使用：如果是个人使用的话先加入购物车，然后Iconfont提供了以下几种方法供大家使用，大家按项目需要引入项目。 团队使用：没有项目的话先发起项目，然后添加团队成员（一般是UI来做），然后将需要的图标加入到项目中来。 以上两种使用方式大家都可以使用1、生成的在线图标样式链接；2、也可以将样式下载到本地解压就会得到如下图文件夹...
2018-12-16 23:55:41
360
原创 给element-ui的steps加@click.native事件
今天有个需求需要给element-ui的steps添加点击跳转，看了看steps的API没有这个属性。就给它添加一个@click事件吧，添加之后发现不好使，找了一番资料发现得这样写就可以了@click.native 这个native是什么作用呢？ 查了一番资料大概就是vue封装@click这些方法时阻止了原生的DOM事件，而native就是释放DOM原生事...
2018-12-13 17:17:56
4035
1
原创 vue+element-ui项目开发按钮重复提交问题解决
最近工作中遇到一个坑，突然有一天测试给后台提了个bug报“系统异常”。可怜的后台的小伙找了半天问题跟我说：“这个问题咱俩都有原因”，究其原因就是前台没做限制导致客户在网速不好的情况下重复提交数据，后天也没做校验。好吧，项目进程太紧了这些问题也渐渐暴露出来了，废话不多说了直接上正题。 1、全局提交方法+loading 起初我的想法是在全局封装的axios（...
2018-12-09 22:13:23
6829
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人