<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[xiazeqiang2018的博客]]></title><description><![CDATA[记录工作学习遇到的问题与技巧]]></description><link>https://blog.youkuaiyun.com/xiazeqiang2018</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; xiazeqiang2018]]></copyright><item><title><![CDATA[实现div鼠标拖动效果]]></title><link>https://blog.youkuaiyun.com/xiazeqiang2018/article/details/81408623</link><guid>https://blog.youkuaiyun.com/xiazeqiang2018/article/details/81408623</guid><author>xiazeqiang2018</author><pubDate>Sat, 04 Aug 2018 11:02:58 +0800</pubDate><description><![CDATA[本例是在vue中实现的拖动功能，但是基本思想是一样的。主要是根据mousedown、mousemove、mouseup三个事件，结合元素的offsetLeft和el.style.left属性实现。 
顺便记录一下两者的区别： 
1. offsetLeft总的来说是获取当前元素距父元素左侧的值 ，具体分两种情况： 
如果当前元素仍在普通流中（即position值为static或者relative），...]]></description><category></category></item><item><title><![CDATA[Vue中的懒加载和按需加载]]></title><link>https://blog.youkuaiyun.com/xiazeqiang2018/article/details/81355746</link><guid>https://blog.youkuaiyun.com/xiazeqiang2018/article/details/81355746</guid><author>xiazeqiang2018</author><pubDate>Thu, 02 Aug 2018 11:28:04 +0800</pubDate><description><![CDATA[
                懒加载（1）定义：懒加载也叫延迟加载，即在需要的时候进行加载，随用随载。（2）异步加载的三种表示方法：1.&amp;nbsp; resolve =&amp;gt; require([URL], resolve),支持性好2.&amp;nbsp; () =&amp;gt; system.import(URL) , webpack2官网上已经声明将逐渐废除,不推荐使用3.&amp;nbsp; () =&amp;gt...]]></description><category></category></item><item><title><![CDATA[懒加载的原理和实现]]></title><link>https://blog.youkuaiyun.com/xiazeqiang2018/article/details/81327642</link><guid>https://blog.youkuaiyun.com/xiazeqiang2018/article/details/81327642</guid><author>xiazeqiang2018</author><pubDate>Wed, 01 Aug 2018 11:25:48 +0800</pubDate><description><![CDATA[
                懒加载的原理




原理：先将img标签中的src链接设为同一张图片（空白图片），将其真正的图片地址存储再img标签的自定义属性中（比如data-src）。当js监听到该图片元素进入可视窗口时，即将自定义属性中的地址存储到src属性中，达到懒加载的效果。
这样做能防止页面一次性向服务器响应大量请求导致服务器响应慢，页面卡顿或崩溃等问题。






代码实现

...]]></description><category></category></item><item><title><![CDATA[Vue中的import中@的作用]]></title><link>https://blog.youkuaiyun.com/xiazeqiang2018/article/details/81325996</link><guid>https://blog.youkuaiyun.com/xiazeqiang2018/article/details/81325996</guid><author>xiazeqiang2018</author><pubDate>Wed, 01 Aug 2018 10:25:06 +0800</pubDate><description><![CDATA[这是webpack的路径别名，相关代码定义在配置文件webpack.base.config里：

resolve: {
    // 自动补全的扩展名
    extensions: ['.js', '.vue', '.json'],
    // 默认路径代理
    // 例如 import Vue from 'vue'，会自动到 'vue/dist/vue.common.js'中寻找
   ...]]></description><category></category></item><item><title><![CDATA[path的join和resolve区别]]></title><link>https://blog.youkuaiyun.com/xiazeqiang2018/article/details/81325651</link><guid>https://blog.youkuaiyun.com/xiazeqiang2018/article/details/81325651</guid><author>xiazeqiang2018</author><pubDate>Wed, 01 Aug 2018 10:14:05 +0800</pubDate><description><![CDATA[path.join      path.join():方法使用平台特定的分隔符把全部给定的 path 片段连接到一起，并规范化生成的路径。      例如：path.join(‘foo’, ‘baz’, ‘bar’);  // 返回 ‘foo/baz/bar’      注：如果连接后的路径字符串是一个长度为零的字符串，则返回 ‘.’，表示当前工作目录。path.resolve      path...]]></description><category></category></item><item><title><![CDATA[Ajax请求头设置Content-type]]></title><link>https://blog.youkuaiyun.com/xiazeqiang2018/article/details/81319785</link><guid>https://blog.youkuaiyun.com/xiazeqiang2018/article/details/81319785</guid><author>xiazeqiang2018</author><pubDate>Tue, 31 Jul 2018 20:09:41 +0800</pubDate><description><![CDATA[一：原生ajax请求头 
使用setRequestHeader函数： 
先调用open方法打开一个url：

xhr.open(&quot;post&quot;, &quot;/save&quot;);

设置数据格式： 
1.发送json格式数据：



xhr.setRequestHeader(&quot;Content-type&quot;,&quot;application/json; charset=utf-8&quot;);

2.发送表单数据：



xhr.s...]]></description><category></category></item><item><title><![CDATA[Vue路由的两导航方法总结]]></title><link>https://blog.youkuaiyun.com/xiazeqiang2018/article/details/81319565</link><guid>https://blog.youkuaiyun.com/xiazeqiang2018/article/details/81319565</guid><author>xiazeqiang2018</author><pubDate>Tue, 31 Jul 2018 19:57:15 +0800</pubDate><description><![CDATA[一、&amp;lt;router-link :to=”…”&amp;gt;　　to里的值可以是一个字符串路径，或者一个描述地址的对象。例如：


// 字符串
&amp;lt;router-link to=&quot;apple&quot;&amp;gt; to apple&amp;lt;/router-link&amp;gt;
// 对象
&amp;lt;router-link :to=&quot;{path:'apple'}&quot;&amp;gt; to apple&amp;lt;/router-l]]></description><category></category></item><item><title><![CDATA[前端异常捕获总结]]></title><link>https://blog.youkuaiyun.com/xiazeqiang2018/article/details/81319436</link><guid>https://blog.youkuaiyun.com/xiazeqiang2018/article/details/81319436</guid><author>xiazeqiang2018</author><pubDate>Tue, 31 Jul 2018 19:49:58 +0800</pubDate><description><![CDATA[
关于
转载自博客：劳卜的博客

前言
Hello，大家好，又与大家见面了，这次给大家分享下前端异常监控中需要了解的异常捕获与上报机制的一些要点，同时包含了实战性质的参考代码和流程。
首先，我们为什么要进行异常捕获和上报呢？
正所谓百密一疏，一个经过了大量测试及联调的项目在有些时候还是会有十分隐蔽的bug存在，这种复杂而又不可预见性的问题唯有通过完善的监控机制才能有效的减少其带来的损失，因此对于直...]]></description><category></category></item><item><title><![CDATA[安卓手机虚拟键盘定位position:fixed问题]]></title><link>https://blog.youkuaiyun.com/xiazeqiang2018/article/details/81319366</link><guid>https://blog.youkuaiyun.com/xiazeqiang2018/article/details/81319366</guid><author>xiazeqiang2018</author><pubDate>Tue, 31 Jul 2018 19:45:38 +0800</pubDate><description><![CDATA[在安卓手机上面会出现position:fixed固定定位的问题，当用户点击搜索框的时候，手机的虚拟键盘会把固定在底部的div顶到手机虚拟键盘的正上方，查询后发现是虚拟键盘调用时浏览器高度被压缩了，根据这个特性我们可以通过监听浏览器窗口的高度改变元素的定位或者显示隐藏。 
代码如下：



 windowInnerHeight = window.innerHeight; //获取当前浏览器窗口高度
...]]></description><category></category></item><item><title><![CDATA[理解 $nextTick 的作用]]></title><link>https://blog.youkuaiyun.com/xiazeqiang2018/article/details/81304797</link><guid>https://blog.youkuaiyun.com/xiazeqiang2018/article/details/81304797</guid><author>xiazeqiang2018</author><pubDate>Tue, 31 Jul 2018 15:46:14 +0800</pubDate><description><![CDATA[
        
                    
                        


有同学在看 Vue 官方文档时，对 API 文档中的 Vue.nextTick 和 vm.$nextTick 的作用不太理解。

其实如果看一下深入响应式原理
 - vue.js中的有关内容，可能会有所理解，不过有些同学可能看到这个标题之后就选择跳过了，因此这里简述如下：
Vue 实...]]></description><category></category></item><item><title><![CDATA[基于vue和axious的http拦截和路由拦截]]></title><link>https://blog.youkuaiyun.com/xiazeqiang2018/article/details/81301842</link><guid>https://blog.youkuaiyun.com/xiazeqiang2018/article/details/81301842</guid><author>xiazeqiang2018</author><pubDate>Tue, 31 Jul 2018 13:33:24 +0800</pubDate><description><![CDATA[
        
                    
                        


一个项目学会vue全家桶+axios实现登录、拦截、登出功能，以及利用axios的http拦截器拦截请求和响应。


前言

该项目是利用了Github 提供的personal token作为登录token，通过token访问你的Repository List。通过这个项目学习如何实...]]></description><category></category></item><item><title><![CDATA[前端chrome浏览器调试总结]]></title><link>https://blog.youkuaiyun.com/xiazeqiang2018/article/details/81301730</link><guid>https://blog.youkuaiyun.com/xiazeqiang2018/article/details/81301730</guid><author>xiazeqiang2018</author><pubDate>Tue, 31 Jul 2018 13:22:52 +0800</pubDate><description><![CDATA[ 
         
                     
                文章转载自：简书–cayley的编程之路

一.先来认识一下这些按钮的功能



重点内容先来看这张图最上头的一行是一个功能菜单，每一个菜单都有它相应的功能和使用方法，依次从左往右来看

1.箭头按钮：用于在页面选择一个元素来审查和查看它的相关信息，当我们在Elements这个按钮页面下点击某个Do...]]></description><category></category></item><item><title><![CDATA[去除inline-block元素间的间隔]]></title><link>https://blog.youkuaiyun.com/xiazeqiang2018/article/details/81190711</link><guid>https://blog.youkuaiyun.com/xiazeqiang2018/article/details/81190711</guid><author>xiazeqiang2018</author><pubDate>Tue, 24 Jul 2018 19:28:24 +0800</pubDate><description><![CDATA[一：产生原因
行内元素之间产生空隙，是由于换行符、tab（制表符）、空格等字符引起。

二：解决方法


一、现象描述
真正意义上的inline-block水平呈现的元素间，换行显示或空格分隔的情况下会有间距，很简单的个例子：

&amp;lt;input /&amp;gt; &amp;lt;input type=&quot;submit&quot; /&amp;gt;


间距就来了~~


我们使用CSS更改非inline-block水平元素为...]]></description><category></category></item><item><title><![CDATA[vue中elementUI样式无法修改的问题]]></title><link>https://blog.youkuaiyun.com/xiazeqiang2018/article/details/81190275</link><guid>https://blog.youkuaiyun.com/xiazeqiang2018/article/details/81190275</guid><author>xiazeqiang2018</author><pubDate>Tue, 24 Jul 2018 18:55:39 +0800</pubDate><description><![CDATA[最近在开发中发现了修改elementUI样式的时候，添加了scoped的组件无法修改的样式，去掉scoped就可以了。这里我们就先看一下scoped这个属性的作用以及原理。

一：scoped的作用和原理


scoped的作用：当 &amp;amp;amp;lt;style&amp;amp;amp;gt; 标签有 scoped 属性时，它的 CSS 只作用于当前组件中的元素。这类似于 Shadow DOM 中的样式封装。它有一些注意事项，但不...]]></description><category></category></item><item><title><![CDATA[关于Websocket、Ajax轮询和长连接（long pull）]]></title><link>https://blog.youkuaiyun.com/xiazeqiang2018/article/details/81189565</link><guid>https://blog.youkuaiyun.com/xiazeqiang2018/article/details/81189565</guid><author>xiazeqiang2018</author><pubDate>Tue, 24 Jul 2018 18:00:26 +0800</pubDate><description><![CDATA[题外话：我们在此先理解一下TCP/IP协议。
一：三次握手
一次完整的请求会经历三次握手：

 第一次握手：客户端会发送 SYN 包给服务端，以询求服务端是否能够正常通讯
  第二次握手：服务端在接受到客户端发来的包后，向客户端发送 SYN/ACK 数据包，用来告诉客户端，我这边是 OK 的，你能够向我发起连接
  第三次握手：客户端收到服务端回传的 SYN/ACK 包后，再次向服务端发送标注有 ...]]></description><category></category></item><item><title><![CDATA[对Blob对象的理解]]></title><link>https://blog.youkuaiyun.com/xiazeqiang2018/article/details/81188899</link><guid>https://blog.youkuaiyun.com/xiazeqiang2018/article/details/81188899</guid><author>xiazeqiang2018</author><pubDate>Tue, 24 Jul 2018 17:27:25 +0800</pubDate><description><![CDATA[转载自：https://www.cnblogs.com/hhhyaaon/p/5928152.html
这里有一篇[Blob的技术文档](https://developer.mozilla.org/zh-CN/docs/Web/API/Blob)，可供参考。

写在前面
本篇主要总结Blob对象属性及作用，通过DEMO介绍Blob对象的应用场景。
Blob对象
一直以来，JS都没有比较好的可以直接...]]></description><category></category></item><item><title><![CDATA[关于严格模式“use strict”的理解]]></title><link>https://blog.youkuaiyun.com/xiazeqiang2018/article/details/81173302</link><guid>https://blog.youkuaiyun.com/xiazeqiang2018/article/details/81173302</guid><author>xiazeqiang2018</author><pubDate>Mon, 23 Jul 2018 19:35:24 +0800</pubDate><description><![CDATA[1.介绍 
除了正常运行模式，ES 5中添加了第二种运行模式：”严格模式”（strict mode）。顾名思义，这种模式使得Javascript在更严格的条件下运行。以“use strict”为标志。

2.为什么用严格模式


消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为;
消除代码运行的一些不安全之处，保证代码运行的安全；
提高编译器效率，增加运行速度；
为未来新版本...]]></description><category></category></item><item><title><![CDATA[关于ES6中箭头函数中this对象的理解]]></title><link>https://blog.youkuaiyun.com/xiazeqiang2018/article/details/81173059</link><guid>https://blog.youkuaiyun.com/xiazeqiang2018/article/details/81173059</guid><author>xiazeqiang2018</author><pubDate>Mon, 23 Jul 2018 19:17:18 +0800</pubDate><description><![CDATA[ 
         
                     
                         
                ES6中新增了箭头函数这种语法,箭头函数以其简洁性和方便获取this的特性,俘获了大批粉丝儿它也可能是面试中的宠儿, 我们关键要搞清楚 箭头函数和普通函数中的this一针见血式总结:普通函数中的this:1. this总是代表它的直接调用者(js的...]]></description><category></category></item><item><title><![CDATA[URL.createObjectURL和URL.revokeObjectURL]]></title><link>https://blog.youkuaiyun.com/xiazeqiang2018/article/details/81172924</link><guid>https://blog.youkuaiyun.com/xiazeqiang2018/article/details/81172924</guid><author>xiazeqiang2018</author><pubDate>Mon, 23 Jul 2018 19:07:23 +0800</pubDate><description><![CDATA[
一.URL.createObjectURL&amp;nbsp;
URL.createObjectURL()方法会根据传入的参数创建一个指向该参数对象的URL. 这个URL的生命仅存在于它被创建的这个文档里. 新的对象URL指向执行的File对象或者是Blob对象.
&amp;nbsp;
语法:&amp;nbsp;

objectURL = URL.createObjectURL(blob || file);


&amp;nb...]]></description><category></category></item><item><title><![CDATA[css中@import和link的用法]]></title><link>https://blog.youkuaiyun.com/xiazeqiang2018/article/details/81171633</link><guid>https://blog.youkuaiyun.com/xiazeqiang2018/article/details/81171633</guid><author>xiazeqiang2018</author><pubDate>Mon, 23 Jul 2018 17:36:30 +0800</pubDate><description><![CDATA[一：css外部引入 
外部引入CSS的方法有两种，一种是@import，一种是link 

@import &quot;./style.css&quot;;

&amp;lt;link href=&quot;./style.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; /&amp;gt;

现在绝大部分的网站都采用后一种link方式，原因在于@import先加载HTML，后加载CSS。而link先加载CSS，后加...]]></description><category></category></item></channel></rss>