张梦莹的博客

前段时间在项目中有这样一个需求：1：要求用户在输入文字的过程中可以引用变量，并且可以插入到任意的位置。2：引用的变量要求是一个整体，删除的话必须整体删除。不能在一个变量的中间插入其他的文字。3：引用的变量和输入的文字在样式上也要有区别。拿到这样一个需求，第一个想到的就是需要使用富文本编辑器。随后经过调研，选择了github上start 25k的quill。下面就来说一个我的使用方案吧。...

简介：https就是相当于在http下加了一层SSL层。处于应用层和传输层之间，用于数据的加密，解密，身份认证。默认的端口为443端口。使用混合加密机制。https的请求过程客户端向服务器发起连接请求；服务端接收到请求之后，向客户端返回公有秘钥以及证书； 客户端在收到公有秘钥之后会随机的生成一个数串，并以此作为共享秘钥； 客户端用公有秘钥对共享秘钥进行加密，并发送给服务端； 服务...

git stash 这个东西，使用git进行代码管理的人应该都知道并且用过吧。它呢，就是会将你在当前分支是那个修改的记录缓存起来，放在缓存区里面。 模拟具体的使用场景：我现在处于feature-zhang这个分支上，我在这个分支上修改了很多东西但是又没有一个独立的模块，所以我并不想对它进行commit。但是此时我的另外一个分支feature-wang，需要和后台的同学联调一下。这时我就不...

Computed: 可以关联多个实时计算的对象，当这些对象中的其中一个改变时都会出发这个属性。具有缓存能力，所以只有当数据再次改变时才会重新渲染，否则就会直接拿取缓存中的数据。举个例子： 当我们想让div元素的背景色和文字颜色一致时，我们就可以使用computed属性。此时computed只会在初次渲染和文字颜色改变的情况下才会触发。其他情况下会直接从缓存中读取。 Watch：当你需要...

这段时间在做的一个项目中使用到了fetch来获取数据，那么就会产生为什么要使用fetch而不用ajax，他们两个之间又存在什么样的区别的疑问。 所以自己就简单的整理一下下。 fetchfetch是基于promise实现的，也可以结合async/await。fetch请求默认是不带cookie的，需要设置fetch（URL，{credentials:’include’})。 Crede...

在实习简历被两次回绝没有给我任何机会的情况下，阿里飞猪终于把我的简历捞起来啦。真的是既开心又难过。下面分享一下阿里一面的前端问题。面了整整71分钟，我感觉我脑壳疼～～～ 1 自我介绍 2 公司项目 3 promise 4 异步编程 5 fetch 6 js的继承方法 7 原型链 8 this 9 js单线程，js怎样处理异步 10 事件轮询机制 11 前端性能优化（一直问，问...

前端缓存分为浏览器缓存和cdn缓存。 怎样区分浏览器缓存和cdn缓存 通过Cache-control public：表示缓存的版本可以被代理服务器或者其他中间服务器识别（浏览器，cdn都能缓存） private：表示这个文件对不同的用户是不同的。只有用户自己的浏览器能够进行缓存，公共的代理 服务器不允许缓存 no-cache：表示当前的内容不应该被缓存浏览器缓存： ...

在push时候经常遇到下面这样的情况，提示远程仓库已经有了一些修改。 ! [rejected] mengying.zhang -> mengying.zhang (fetch first) error: failed to push some refs to ‘https://gitee.com/mengyingzhang/vue.git’ hint: Updates w...

今天就是想分享几个有趣的js给大家～～

当我们在做移动端页面是会发现当我们点击一个元素触发事件的时候，会存在一个短暂的延迟问题。在就是所谓的移动端300ms延时。 具体的解决方案： 我们可以使用touchstart事件，然后去监听这个事件的触发，这个时间是不存在延时问题的。此时还需要我们去禁止掉click事件，因为会存在点击穿透的问题。 那什么又是点击穿透事件呢？ 当我们页面有两个元素A，B。当我们触发A的touchstart事...

在做项目时我们肯定会遇到要求该页面几分钟去定时刷新一下获取最新数据这样的情况，那么这个时候我们就要使用setInterval()了。那么我们应该把定时刷新放在什么位置什么时候触发什么时候清除呢？这就需要我们了解vue的生命周期。首先贴一张从官网截下来的图吧。 在该图上我已经标注了触发和清除的时期，那么我们在使用中还有几个需要注意的点。使用setInterval时this指向的问题。如果...

在项目中 install 并在main.js文件中引入 echarts以及在你使用到echarts-wordcloud的vue组件中引入 （因为echarts-wordcloud是echarts的扩展所以需要单独的引用）npm install echartsnpm install echarts-wordcloudmain.js*import echarts from ‘你对应下载的目录...

function getBoundingClientRect(ele) { // 该方法是计算当前元素距离当前视口的距离，所以需要得到页面的滚动距离 var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; var sc...

实现之前应该明确下面几点： - 接收的参数：第一个参数为this的指向，后面的参数就是函数接收的参数了。this是必需提供的参数，其他的参数都是非必需的； - 返回值：返回值应该是一个函数； 实现代码：function bind(fnc, context){ var outerArgs = Array.prototype.slice.call(arguments,2); ...

cookie最初是在客户端用于存储会话信息的，保存在客户端的。会在浏览器关闭之后被删除。可以以Set-Cookie作为响应头的一部分，也可以以cookie作为请求头的一部分。 限制：要求每条cookie的大小是由限制的，根据不同的浏览器限制也会不同；每个域名下cookie的数量是有限制的，根据不同的浏览器限制也会不同；组成：名称：一个唯一确定cookie的名称，不区分大小写；...

Promise.all()接收一个数组为参数，当数组的所有Promise都为resolve的状态时，Promise.all()才会成功；若有一个失败，都会被认为是失败的。举个小例子： var p1 = Promise.resolve('a'); var p2 = Promise.resolve('b'); var p3 = Promise.resolve('c');Promise.all...

当我们使用浏览器进行调试时，相信细心的朋友都会发现NetWork里面就会出现这两个事件的运行时间。 那这两个事件具体都代表什么呢？DOMContentLoaded 指DOM加载完毕。具体一点说就是当我们输入一个url，过一会时，页面从空白变成了有内容的。内容渲染的过程也是先渲染除图片等之外的一些资源。这个过程也就是DOMContentLoaded的过程。也就是HTML文档加载和解析的...

之前我们如果想要对展示的代码进行过滤，可以直接像下面这样 但是会发现这样之后内容完全展示不出来了，这是因为vue进行改版之后，我们不能在v-html里面直接这样使用过滤器了。 那么既然不能直接使用，那我们可以把我们的过滤放在函数里面，然后去调用这个函数啊。我们就可以这样写： 这样一来我们就解决这个问题啦！！...

1 安装git。安装git的方法有好几种，我使用的是 http://sourceforge.net/projects/git-osx-installer/ 2 设置： git config –global user.name “张梦莹”，名字可以写自己的。 git config –global user.email “……..”,自己的邮箱。3 创建版本库： ...

基本思想：找一个元素为比较的“基准元素”。将比该基准元素大的放在右边，比该基准元素小的放在左边。递归完成所有的排序。 下面来看一下代码实现：fucntion qucickSort(arr,left,right){ if(left < right){ var k = partition(arr,left,right); quickSort(arr,...

使用vue开发项目其中之一的原因就是由于它的组件化。你可以将一个复杂的页面分为好多个小的组件，各自实现一个小功能。是页面的逻辑更加清晰。那么这么多的组件是怎样将它们连接起来的呢，那就离不开组件之间的通信了。组件通信分为两种。一种是父组件给子组件传送数据，另一种则就是自组件给父组件传送数据了。下面我通过几个简单的例子来简单说明一下组件之间是怎么通信怎样传送数据的。父组件给子组件传送数...

前面的文章中已经介绍过了深复制的概念，本篇文章将简单介绍用js代码实现深复制。 首先要明白的就是，要想实现对复杂对象的复制，用到的就是递归的思想。下面就是通过代码一步步来实现并讲解。function deepClone(data1,data2){ var data2 = data2 || {}; //局部变量data2赋初值为接收的参数或者为一个空对象。 ...

实现布局之前首先应该明白三栏布局到底是什么。 所谓三栏布局就是：左右两侧的宽度固定，中间部分的宽度随窗口的宽度变化而自适应。嗯，知道三栏布局的概念之后，我们现在要做的就是如何实现这个布局。方法一：我们可以使用flex弹性盒模型。左右两侧设置固定的宽度，中间部分宽度设置为100%，这样当窗口大小改变时中间部分就会随之变换。具体代码实现如下：css样式部分： .pa...

1.实现双三角形 实现原理：使用两个div元素，设置宽高都为0。通过设置border值和颜色还实现。div{ width:0; height:0; //注意这里不能设置border-left，因为设置了会让这两个三角形分开 border-right:20px royalblue solid; border-top:10px transparen

元素居中的方法垂直居中：已知元素的宽度 inner元素的高度为100px；/*已知高度用定位*/ inner{ position: absolute; top: 50%; //top设置为百分比时是相对于父元素的宽度 margin-top: -50px; /

display常见属性：block: 特点：1.不设置宽度时，其宽度为父元素的宽度； 2.可以设置宽高； 3.独占一行； 4.内部可以嵌套其他元素； inline： 特点：1.不可以设置宽高； 2.宽高由其内

一、概念 突破同源策略的限制，在两个不同的域之间实现资源交互。二、分类 (1):使用ajax引发的跨域问题： 当调用ajax时：调用ajax发送请求的页面所在的域，和被请求页面所在域不一致。 (2):类似页面嵌入ifream引起的跨域问题： 当操作ifream内引入的元素时：ifream所属页面的域，和ifream引入页面的域不一致。

一：工作原理 相当于在用户和服务器之间加了一个中间层，使用户操作与服务器响应异步化。通过XmlHttpRequtst对象来向服务器发送异步请求，从服务器获得数据，然后用Javascript来操作DOM从而更新页面。二：ajax请求的基本步骤 (1):创建一个ajax对象，即XmlHttpRequtst对象。 (2):通过open()方法创建HTTP请求，连接服务器。 (3):s

http状态返回代码 1xx（临时响应） 
表示临时响应并需要请求者继续执行操作的状态代码。 
 http状态返回代码 代码 说明 100 （继续） 请求者应当继续提出请求。 服务器返回此代码表示已收到请求的第一部分，正在等待其余部分。 101 （切换协议） 请求者已要求服务器切换协议，服务器已确认并准备切换。http状态返回代码 2xx （成功） 
表示成功

我们知道，this对象是在运行时基于函数的执行环境绑定的。 1:在全局函数中，this等于windows。 2:而当函数作为某个对象的方法调用时，this等于那个对象。不过，匿名函数的执行环境具有全局性，因此其this对象通常指向window。 举个栗子：var name = 'the window';var obj = { name: 'my obj'; getNam...

FormData现代Web应用中频繁使用的一项功能就是表单数据的序列化，XmlHttpRequest 2级为此定义了FormData类型。FormData为序列化表单以及创建与表单格式相同的数据提供了便利。下面我们先来创建一个FormData对象。var data = new FormData();data.append('name','zhangmengying');append方...

基本思想： 将当前数插入到一个已经排好序的数组中。 刚开始，我们认为第一个数是已经排好的。从第二个数开始，在已经排好的序列中找到放它的合适的位置。就这样直到所有数都找到合适的位置。 下面来看一下具体的实现过程：function InsertSort(arr){ var len = arr.length; for(var i=1;i<len;i++){ ...

事件流事件流描述的是从页面中接受事件的顺序。1.事件冒泡： IE的事件流叫做事件冒泡，即就是从一个具体的元素开始逐层向上传递到较为不具体的元素直至文档。通过下面的例子来看一下：<!DOCTYPE html><html> <head> <title>事件冒泡</title

基本思想：某些代码不能在没有时间间隔的情况下连续触发。第一次调用函数，会创建一个定时器，在指定的时间间隔之后执行。当第二次调用代码时，会先清除第一次的计时器并设置另一个。如果前一个定时器已经执行过了，这个操作就没有任何意义。下面通过代码来看一下这种形式：var processor = { timer = null; processing: function(){ ...

“DOM2级遍历和范围”模块定义了两个用于辅助完成顺序遍历DOM结构的类型：NodeIterator和TreeWalker。这两个类型能够基于给定的起点对DOM结构执行深度优先遍历。 DOM遍历是深度优先的DOM结构遍历，也就是说，移动的方向至少有两个。遍历以给定的节点为根，不可能向上超出DOM树的根节点。下面我们通过一个例子来了解一下： 任何节点都可以作为遍历的根节点。假设我们现在要以b...

冒泡排序的基本思想： 每次排序都将剩余数中的最大(小)的数放在合适的位置。 经过第一趟排序将最大(小)的数放在最后，第二趟排序将次大的(小)放在导数的位置，以此类推，直至将整个数组都排完。 冒泡排序是一个比较简单的排序，下面直接来看代码：function BubbleSort(arr){ var len = arr.length; for(var i=0;i<l...

基本的概念：一个网站可以兼容多个终端，针对不同终端设置不同的样式。 优点：面对不同分辨率设备灵活性强；能够快捷解决多设备显示适用问题。缺点：兼容各种设备，效率低下；代码累赘。写法：外链style标签一般情况下我们会将设备的大小分为：<600px,<960px,>960px。 下面我们通过简单的例子认识一下响应式布局，在这里我们使用外链...

首先，我们先来看一下与普通函数相比箭头函数是什么样子： 普通函数：function foo(x,y){return x+y;}箭头函数：var foo = (x,y) => x+y;通过上面简单的例子，我们可以看到箭头函数定义包括一个参数列表，参数列表可以包含零个或多个参数，如果参数的个数不是一个的话要用(..)包围起来。然后是=>。函数体放在最...

在写我对line-height的认识之前，我想每一个人都应该搞清楚下面这个情况。 当给一个空里面添加文字时，这个的高度是怎么来的？ 也许有很多朋友认为是由font-size决定的，但事实上这个元素的高度是由line-height决定的。下面我们可以通过例子来证明一下这个结论。...

同源策略：一、概念 (1):是浏览器最核心也是最基本的安全功能，会约束浏览器的行为。 (2):会限制浏览器：只允许本域(domain)内的脚本读写本于内的资源，不允许访问本域外的资源。二 、为何需要同源策略 为了保证用户信息的安全，防止恶意网站窃取用户信息。三、如何判断是否同源 判断三要素：协议，域名，端口号。这三个必须全部一致才能视为同源，即属于