- 博客(49)
- 收藏
- 关注
RSS订阅原创 vue实现双开门动画
需求：前一个页面离开时有双开门动画，后一个页面有缩放动画的效果。不太理解双开门动画的小伙伴，可以参考ppt的门动画版本迭代第一次迭代设计第一想法就是通过创建一个父元素，并为其添加两个子元素，分别给这两个子元素设置vue动画来实现。实现//双开门动画组件 parent.vue<template> <transition name="door"> <div class="door"> <div class="door-left"
2020-07-13 18:55:40
1064
原创 git一个仓库同步另一个仓库
1：关联第一个仓库git remote add first 远程仓库名first为拉取下来之后本地的名称2：从该仓库创建并切换一个开发的分支git checkout -b feature/first3: 关联第二个仓库git remote add second 远程仓库名4: 从该仓库创建并切换一个开发的分支git branch feature/second second/f...
2020-04-24 16:09:13
5246
原创 element 表单的部分校验
在实际的项目中，我们不仅会遇到表单的全校验，有时会遇到只需要对部分字段进行校验。在element中为form的部分校验提供了专门的方法validateField。具体的实现如下。下面放一波在项目中的使用。在这里我们只需要对fieldToValidate里的这两个字段进行校验。遍历fieldToValidate，对每个字段进行校验，设置校验函数的cb为promise的成功函数。这样，就算有字...
2020-03-11 15:39:53
3758
原创 富文本编辑器quill在vue项目中的使用
前段时间在项目中有这样一个需求：1：要求用户在输入文字的过程中可以引用变量，并且可以插入到任意的位置。2：引用的变量要求是一个整体，删除的话必须整体删除。不能在一个变量的中间插入其他的文字。3：引用的变量和输入的文字在样式上也要有区别。拿到这样一个需求，第一个想到的就是需要使用富文本编辑器。随后经过调研，选择了github上start 25k的quill。下面就来说一个我的使用方案吧。...
2019-12-29 11:33:31
1592
2
原创 echarts-wordcloud在vue中适配2k，4k
在项目中 install 并在main.js文件中引入 echarts以及在你使用到echarts-wordcloud的vue组件中引入 （因为echarts-wordcloud是echarts的扩展所以需要单独的引用）npm install echartsnpm install echarts-wordcloudmain.js*import echarts from ‘你对应下载的目录...
2019-08-12 20:00:23
1655
原创 仓库配置ssh时遇到的问题
当我们刚进入一个新的组织时，需要加入这个组织的代码仓库。假设我们之前并没有使用过这个组织正在使用的代码仓库。那么就应该配置SSH。可以使用 ssh-keygen -t rsa -C "[email protected]" 来创建。这个时候就会生成一个.ssh文件。这个文件里会包含两个文件，分别是私钥和公钥。我们要做的就是保密私钥，将公钥粘贴在你仓库对应的地方。公钥对的文件为.pub后缀。那...
2019-07-29 22:27:21
154
原创 即将毕业的大四学生感言
好久没有写博客了，今天不想写技术，想写一写我大学四年的生活和我自己的成长。希望可以帮助到那些大学很迷茫的同学或者就当是看看一个平凡大学生的生活了吧。学校是双非一本。所在学院和专业在学校都不是很好。刚刚踏入大学，我和大家一样抱着新奇申请了很多社团。但最终只选择了一个社团留下来，因为太多的社团活动真的会减少学习时间。选择留在这个社团的目的在于，这个社团是我所在院的学生会，在这里认识的人都是我所在院...
2019-05-05 18:26:06
1487
4
原创 流量控制
DTE和DCE速度之间存在很大差异，这样在数据的传送与接收过程当中很可能出现收方来不及接收的情况，这时就需要对发送方进行控制。解决停止等待协议：概念：当源主机发送一个帧后，即停止发送，扽等待对方的应答。如果收到目的主机的肯定应答，则接着发送下一个帧。如果收到否定应答或者超过规定的时间没有收到肯定应答，则重发该帧。当源主机发送一个帧后，即停止发送，扽等待对方的应答。如果收到目的主机的肯定应答，...
2018-10-15 17:04:07
160
原创 js封装一个bind函数
实现之前应该明确下面几点： - 接收的参数：第一个参数为this的指向，后面的参数就是函数接收的参数了。this是必需提供的参数，其他的参数都是非必需的； - 返回值：返回值应该是一个函数； 实现代码：function bind(fnc, context){ var outerArgs = Array.prototype.slice.call(arguments,2); ...
2018-09-10 08:59:18
2039
原创 解决getBoundingClientRect的兼容
function getBoundingClientRect(ele) { // 该方法是计算当前元素距离当前视口的距离，所以需要得到页面的滚动距离 var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; var sc...
2018-09-07 16:59:30
5843
1
原创 了解并封装一个cookie库
cookie最初是在客户端用于存储会话信息的，保存在客户端的。会在浏览器关闭之后被删除。可以以Set-Cookie作为响应头的一部分，也可以以cookie作为请求头的一部分。 限制：要求每条cookie的大小是由限制的，根据不同的浏览器限制也会不同；每个域名下cookie的数量是有限制的，根据不同的浏览器限制也会不同；组成：名称：一个唯一确定cookie的名称，不区分大小写；...
2018-09-05 17:38:28
196
原创 了解并实现Promise.all方法
Promise.all()接收一个数组为参数，当数组的所有Promise都为resolve的状态时，Promise.all()才会成功；若有一个失败，都会被认为是失败的。举个小例子： var p1 = Promise.resolve('a'); var p2 = Promise.resolve('b'); var p3 = Promise.resolve('c');Promise.all...
2018-09-04 11:20:06
15764
原创 v-html加过滤器
之前我们如果想要对展示的代码进行过滤，可以直接像下面这样 但是会发现这样之后内容完全展示不出来了，这是因为vue进行改版之后，我们不能在v-html里面直接这样使用过滤器了。 那么既然不能直接使用，那我们可以把我们的过滤放在函数里面，然后去调用这个函数啊。我们就可以这样写： 这样一来我们就解决这个问题啦！！...
2018-08-28 10:40:12
4933
2
原创 vue页面的定时刷新
在做项目时我们肯定会遇到要求该页面几分钟去定时刷新一下获取最新数据这样的情况，那么这个时候我们就要使用setInterval()了。那么我们应该把定时刷新放在什么位置什么时候触发什么时候清除呢？这就需要我们了解vue的生命周期。首先贴一张从官网截下来的图吧。 在该图上我已经标注了触发和清除的时期，那么我们在使用中还有几个需要注意的点。使用setInterval时this指向的问题。如果...
2018-08-27 16:20:37
45621
10
原创 移动端点击延迟问题和点击穿透事件
当我们在做移动端页面是会发现当我们点击一个元素触发事件的时候，会存在一个短暂的延迟问题。在就是所谓的移动端300ms延时。 具体的解决方案： 我们可以使用touchstart事件，然后去监听这个事件的触发，这个时间是不存在延时问题的。此时还需要我们去禁止掉click事件，因为会存在点击穿透的问题。 那什么又是点击穿透事件呢？ 当我们页面有两个元素A，B。当我们触发A的touchstart事...
2018-08-22 14:12:09
697
原创 DOMContentLoaded与load的区别
当我们使用浏览器进行调试时，相信细心的朋友都会发现NetWork里面就会出现这两个事件的运行时间。 那这两个事件具体都代表什么呢？DOMContentLoaded 指DOM加载完毕。具体一点说就是当我们输入一个url，过一会时，页面从空白变成了有内容的。内容渲染的过程也是先渲染除图片等之外的一些资源。这个过程也就是DOMContentLoaded的过程。也就是HTML文档加载和解析的...
2018-08-21 14:05:23
1641
原创 https以及加密算法
简介：https就是相当于在http下加了一层SSL层。处于应用层和传输层之间，用于数据的加密，解密，身份认证。默认的端口为443端口。使用混合加密机制。https的请求过程客户端向服务器发起连接请求；服务端接收到请求之后，向客户端返回公有秘钥以及证书； 客户端在收到公有秘钥之后会随机的生成一个数串，并以此作为共享秘钥； 客户端用公有秘钥对共享秘钥进行加密，并发送给服务端； 服务...
2018-08-19 15:50:43
4005
原创 客户端存储
localStorage 当本地存储数据大于5M时，localStorage显示是不可以使用了。这个时候我们就可以借助localforage。复习一下localStorage： 1 同步执行；同源的 2 存储数据在5M之内； 3 使用setItem，removeItem，clear方法来操作； 4 仅仅支持字符串，以key-value的形式进行存储；localforage...
2018-08-18 22:41:43
197
原创 在git stash上踩过的坑
git stash 这个东西，使用git进行代码管理的人应该都知道并且用过吧。它呢，就是会将你在当前分支是那个修改的记录缓存起来，放在缓存区里面。 模拟具体的使用场景：我现在处于feature-zhang这个分支上，我在这个分支上修改了很多东西但是又没有一个独立的模块，所以我并不想对它进行commit。但是此时我的另外一个分支feature-wang，需要和后台的同学联调一下。这时我就不...
2018-08-18 22:34:29
3868
2
原创 DNS
DNS域名解析过程 （递归查询➕迭代查询）查看浏览器缓存，本地缓存，host文件。如果有的话，就可以直接使用；若是没有解析，主机就会在本地网络中发起一个DNS解析请求，并将该请求发送给本地的域名服务器；当本地的域名服务器收到这个请求的时候，就会先查看本地的缓存，若是有该项纪录，就直接返回；若是没有该项纪录，本地的域名服务器就会把请求发送给根域名服务器，根域名服务器返回给本地域名服务器一个...
2018-08-18 22:03:06
190
原创 vue中Computed 和 Watch的使用和区别
Computed: 可以关联多个实时计算的对象，当这些对象中的其中一个改变时都会出发这个属性。具有缓存能力，所以只有当数据再次改变时才会重新渲染，否则就会直接拿取缓存中的数据。举个例子： 当我们想让div元素的背景色和文字颜色一致时，我们就可以使用computed属性。此时computed只会在初次渲染和文字颜色改变的情况下才会触发。其他情况下会直接从缓存中读取。 Watch：当你需要...
2018-08-13 20:14:18
18564
原创 fetch和ajax的认识和区别
这段时间在做的一个项目中使用到了fetch来获取数据，那么就会产生为什么要使用fetch而不用ajax，他们两个之间又存在什么样的区别的疑问。 所以自己就简单的整理一下下。 fetchfetch是基于promise实现的，也可以结合async/await。fetch请求默认是不带cookie的，需要设置fetch（URL，{credentials:’include’})。 Crede...
2018-08-10 13:45:39
7090
原创 前端缓存
前端缓存分为浏览器缓存和cdn缓存。 怎样区分浏览器缓存和cdn缓存 通过Cache-control public：表示缓存的版本可以被代理服务器或者其他中间服务器识别（浏览器，cdn都能缓存） private：表示这个文件对不同的用户是不同的。只有用户自己的浏览器能够进行缓存，公共的代理 服务器不允许缓存 no-cache：表示当前的内容不应该被缓存浏览器缓存： ...
2018-08-09 15:35:32
332
原创 前端面经
在实习简历被两次回绝没有给我任何机会的情况下，阿里飞猪终于把我的简历捞起来啦。真的是既开心又难过。下面分享一下阿里一面的前端问题。面了整整71分钟，我感觉我脑壳疼～～～ 1 自我介绍 2 公司项目 3 promise 4 异步编程 5 fetch 6 js的继承方法 7 原型链 8 this 9 js单线程，js怎样处理异步 10 事件轮询机制 11 前端性能优化（一直问，问...
2018-08-06 11:57:46
819
1
原创 关于git遇到的问题
在push时候经常遇到下面这样的情况，提示远程仓库已经有了一些修改。 ! [rejected] mengying.zhang -&gt; mengying.zhang (fetch first) error: failed to push some refs to ‘https://gitee.com/mengyingzhang/vue.git’ hint: Updates w...
2018-07-19 19:40:42
177
原创 本地创建git仓库
1 安装git。安装git的方法有好几种，我使用的是 http://sourceforge.net/projects/git-osx-installer/ 2 设置： git config –global user.name “张梦莹”，名字可以写自己的。 git config –global user.email “……..”,自己的邮箱。3 创建版本库： ...
2018-06-26 23:29:44
185
原创 快速排序
基本思想：找一个元素为比较的“基准元素”。将比该基准元素大的放在右边，比该基准元素小的放在左边。递归完成所有的排序。 下面来看一下代码实现：fucntion qucickSort(arr,left,right){ if(left &lt; right){ var k = partition(arr,left,right); quickSort(arr,...
2018-06-23 17:15:13
126
原创 插入排序
基本思想： 将当前数插入到一个已经排好序的数组中。 刚开始，我们认为第一个数是已经排好的。从第二个数开始，在已经排好的序列中找到放它的合适的位置。就这样直到所有数都找到合适的位置。 下面来看一下具体的实现过程：function InsertSort(arr){ var len = arr.length; for(var i=1;i&lt;len;i++){ ...
2018-06-21 23:53:34
95
原创 冒泡排序
冒泡排序的基本思想： 每次排序都将剩余数中的最大(小)的数放在合适的位置。 经过第一趟排序将最大(小)的数放在最后，第二趟排序将次大的(小)放在导数的位置，以此类推，直至将整个数组都排完。 冒泡排序是一个比较简单的排序，下面直接来看代码：function BubbleSort(arr){ var len = arr.length; for(var i=0;i&lt;l...
2018-06-20 23:24:23
121
原创 vue - 组件通信
使用vue开发项目其中之一的原因就是由于它的组件化。你可以将一个复杂的页面分为好多个小的组件，各自实现一个小功能。是页面的逻辑更加清晰。那么这么多的组件是怎样将它们连接起来的呢，那就离不开组件之间的通信了。组件通信分为两种。一种是父组件给子组件传送数据，另一种则就是自组件给父组件传送数据了。下面我通过几个简单的例子来简单说明一下组件之间是怎么通信怎样传送数据的。父组件给子组件传送数...
2018-06-14 19:04:41
138
原创 函数节流
基本思想：某些代码不能在没有时间间隔的情况下连续触发。第一次调用函数，会创建一个定时器，在指定的时间间隔之后执行。当第二次调用代码时，会先清除第一次的计时器并设置另一个。如果前一个定时器已经执行过了，这个操作就没有任何意义。下面通过代码来看一下这种形式：var processor = { timer = null; processing: function(){ ...
2018-06-13 18:31:12
186
原创 响应式布局
基本的概念：一个网站可以兼容多个终端，针对不同终端设置不同的样式。 优点：面对不同分辨率设备灵活性强；能够快捷解决多设备显示适用问题。缺点：兼容各种设备，效率低下；代码累赘。写法：外链style标签一般情况下我们会将设备的大小分为：<600px,<960px,>960px。 下面我们通过简单的例子认识一下响应式布局，在这里我们使用外链...
2018-06-12 19:17:36
2122
原创 XmlHttpRequest 2级
FormData现代Web应用中频繁使用的一项功能就是表单数据的序列化，XmlHttpRequest 2级为此定义了FormData类型。FormData为序列化表单以及创建与表单格式相同的数据提供了便利。下面我们先来创建一个FormData对象。var data = new FormData();data.append('name','zhangmengying');append方...
2018-06-11 16:45:42
214
原创 事件(1)
事件流事件流描述的是从页面中接受事件的顺序。1.事件冒泡： IE的事件流叫做事件冒泡，即就是从一个具体的元素开始逐层向上传递到较为不具体的元素直至文档。通过下面的例子来看一下：&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;title&gt;事件冒泡&lt;/title
2018-06-07 11:10:38
115
原创 DOM遍历
“DOM2级遍历和范围”模块定义了两个用于辅助完成顺序遍历DOM结构的类型：NodeIterator和TreeWalker。这两个类型能够基于给定的起点对DOM结构执行深度优先遍历。 DOM遍历是深度优先的DOM结构遍历，也就是说，移动的方向至少有两个。遍历以给定的节点为根，不可能向上超出DOM树的根节点。下面我们通过一个例子来了解一下： 任何节点都可以作为遍历的根节点。假设我们现在要以b...
2018-06-06 17:34:58
608
原创 ES6箭头函数
首先，我们先来看一下与普通函数相比箭头函数是什么样子： 普通函数：function foo(x,y){return x+y;}箭头函数：var foo = (x,y) => x+y;通过上面简单的例子，我们可以看到箭头函数定义包括一个参数列表，参数列表可以包含零个或多个参数，如果参数的个数不是一个的话要用(..)包围起来。然后是=>。函数体放在最...
2018-06-05 20:14:32
184
1
原创 对于line-height的认识
在写我对line-height的认识之前，我想每一个人都应该搞清楚下面这个情况。 当给一个空里面添加文字时，这个的高度是怎么来的？ 也许有很多朋友认为是由font-size决定的，但事实上这个元素的高度是由line-height决定的。下面我们可以通过例子来证明一下这个结论。...
2018-06-04 20:41:28
5804
1
原创 实现三栏布局的几种方法
实现布局之前首先应该明白三栏布局到底是什么。 所谓三栏布局就是：左右两侧的宽度固定，中间部分的宽度随窗口的宽度变化而自适应。嗯，知道三栏布局的概念之后，我们现在要做的就是如何实现这个布局。方法一：我们可以使用flex弹性盒模型。左右两侧设置固定的宽度，中间部分宽度设置为100%，这样当窗口大小改变时中间部分就会随之变换。具体代码实现如下：css样式部分： .pa...
2018-03-01 12:45:45
543
原创 this对象
我们知道，this对象是在运行时基于函数的执行环境绑定的。 1:在全局函数中，this等于windows。 2:而当函数作为某个对象的方法调用时，this等于那个对象。不过，匿名函数的执行环境具有全局性，因此其this对象通常指向window。 举个栗子：var name = 'the window';var obj = { name: 'my obj'; getNam...
2018-02-26 03:05:26
185
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人