xiazeqiang2018-CSDN博客

原创实现div鼠标拖动效果

本例是在vue中实现的拖动功能，但是基本思想是一样的。主要是根据mousedown、mousemove、mouseup三个事件，结合元素的offsetLeft和el.style.left属性实现。顺便记录一下两者的区别： 1. offsetLeft总的来说是获取当前元素距父元素左侧的值，具体分两种情况：如果当前元素仍在普通流中（即position值为static或者relative），...

2018-08-04 11:02:58 3228

转载 Vue中的懒加载和按需加载

懒加载（1）定义：懒加载也叫延迟加载，即在需要的时候进行加载，随用随载。（2）异步加载的三种表示方法：1.  resolve => require([URL], resolve),支持性好2.  () => system.import(URL) , webpack2官网上已经声明将逐渐废除,不推荐使用3.  () =&gt...

2018-08-02 11:28:04 6238

转载懒加载的原理和实现

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

2018-08-01 11:25:48 918

原创 Vue中的import中@的作用

这是webpack的路径别名，相关代码定义在配置文件webpack.base.config里：resolve: { // 自动补全的扩展名 extensions: ['.js', '.vue', '.json'], // 默认路径代理 // 例如 import Vue from 'vue'，会自动到 'vue/dist/vue.common.js'中寻找 ...

2018-08-01 10:25:06 17271

转载 path的join和resolve区别

path.join path.join():方法使用平台特定的分隔符把全部给定的 path 片段连接到一起，并规范化生成的路径。例如：path.join(‘foo’, ‘baz’, ‘bar’); // 返回 ‘foo/baz/bar’ 注：如果连接后的路径字符串是一个长度为零的字符串，则返回 ‘.’，表示当前工作目录。path.resolve path...

2018-08-01 10:14:05 1062

原创 Ajax请求头设置Content-type

一：原生ajax请求头使用setRequestHeader函数：先调用open方法打开一个url：xhr.open("post", "/save");设置数据格式： 1.发送json格式数据：xhr.setRequestHeader("Content-type","application/json; charset=utf-8");2.发送表单数据：xhr.s...

2018-07-31 20:09:41 30087

转载 Vue路由的两导航方法总结

一、<router-link :to=”…”>　　to里的值可以是一个字符串路径，或者一个描述地址的对象。例如：// 字符串<router-link to="apple"> to apple</router-link>// 对象<router-link :to="{path:'apple'}"> to apple</router-l

2018-07-31 19:57:15 485

转载前端异常捕获总结

关于转载自博客：劳卜的博客前言Hello，大家好，又与大家见面了，这次给大家分享下前端异常监控中需要了解的异常捕获与上报机制的一些要点，同时包含了实战性质的参考代码和流程。首先，我们为什么要进行异常捕获和上报呢？正所谓百密一疏，一个经过了大量测试及联调的项目在有些时候还是会有十分隐蔽的bug存在，这种复杂而又不可预见性的问题唯有通过完善的监控机制才能有效的减少其带来的损失，因此对于直...

2018-07-31 19:49:58 2253 1

原创安卓手机虚拟键盘定位position:fixed问题

在安卓手机上面会出现position:fixed固定定位的问题，当用户点击搜索框的时候，手机的虚拟键盘会把固定在底部的div顶到手机虚拟键盘的正上方，查询后发现是虚拟键盘调用时浏览器高度被压缩了，根据这个特性我们可以通过监听浏览器窗口的高度改变元素的定位或者显示隐藏。代码如下： windowInnerHeight = window.innerHeight; //获取当前浏览器窗口高度...

2018-07-31 19:45:38 2194

转载理解 $nextTick 的作用

有同学在看 Vue 官方文档时，对 API 文档中的 Vue.nextTick 和 vm.$nextTick 的作用不太理解。其实如果看一下深入响应式原理 - vue.js中的有关内容，可能会有所理解，不过有些同学可能看到这个标题之后就选择跳过了，因此这里简述如下：Vue 实...

2018-07-31 15:46:14 1130

转载基于vue和axious的http拦截和路由拦截

一个项目学会vue全家桶+axios实现登录、拦截、登出功能，以及利用axios的http拦截器拦截请求和响应。前言该项目是利用了Github 提供的personal token作为登录token，通过token访问你的Repository List。通过这个项目学习如何实...

2018-07-31 13:33:24 3286 3

转载前端chrome浏览器调试总结

文章转载自：简书–cayley的编程之路一.先来认识一下这些按钮的功能重点内容先来看这张图最上头的一行是一个功能菜单，每一个菜单都有它相应的功能和使用方法，依次从左往右来看1.箭头按钮：用于在页面选择一个元素来审查和查看它的相关信息，当我们在Elements这个按钮页面下点击某个Do...

2018-07-31 13:22:52 212

转载去除inline-block元素间的间隔

一：产生原因行内元素之间产生空隙，是由于换行符、tab（制表符）、空格等字符引起。二：解决方法一、现象描述真正意义上的inline-block水平呈现的元素间，换行显示或空格分隔的情况下会有间距，很简单的个例子：<input /> <input type="submit" />间距就来了~~我们使用CSS更改非inline-block水平元素为...

2018-07-24 19:28:24 287

最近在开发中发现了修改elementUI样式的时候，添加了scoped的组件无法修改的样式，去掉scoped就可以了。这里我们就先看一下scoped这个属性的作用以及原理。一：scoped的作用和原理scoped的作用：当 &amp;lt;style&amp;gt; 标签有 scoped 属性时，它的 CSS 只作用于当前组件中的元素。这类似于 Shadow DOM 中的样式封装。它有一些注意事项，但不...

2018-07-24 18:55:39 26627 2

原创关于Websocket、Ajax轮询和长连接（long pull）

题外话：我们在此先理解一下TCP/IP协议。一：三次握手一次完整的请求会经历三次握手：第一次握手：客户端会发送 SYN 包给服务端，以询求服务端是否能够正常通讯第二次握手：服务端在接受到客户端发来的包后，向客户端发送 SYN/ACK 数据包，用来告诉客户端，我这边是 OK 的，你能够向我发起连接第三次握手：客户端收到服务端回传的 SYN/ACK 包后，再次向服务端发送标注有 ...

2018-07-24 18:00:26 4169 2

转载对Blob对象的理解

转载自：https://www.cnblogs.com/hhhyaaon/p/5928152.html这里有一篇[Blob的技术文档](https://developer.mozilla.org/zh-CN/docs/Web/API/Blob)，可供参考。写在前面本篇主要总结Blob对象属性及作用，通过DEMO介绍Blob对象的应用场景。Blob对象一直以来，JS都没有比较好的可以直接...

2018-07-24 17:27:25 2012

原创关于严格模式“use strict”的理解

1.介绍除了正常运行模式，ES 5中添加了第二种运行模式：”严格模式”（strict mode）。顾名思义，这种模式使得Javascript在更严格的条件下运行。以“use strict”为标志。2.为什么用严格模式消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为;消除代码运行的一些不安全之处，保证代码运行的安全；提高编译器效率，增加运行速度；为未来新版本...

2018-07-23 19:35:24 2833

转载关于ES6中箭头函数中this对象的理解

ES6中新增了箭头函数这种语法,箭头函数以其简洁性和方便获取this的特性,俘获了大批粉丝儿它也可能是面试中的宠儿, 我们关键要搞清楚箭头函数和普通函数中的this一针见血式总结:普通函数中的this:1. this总是代表它的直接调用者(js的...

2018-07-23 19:17:18 1683

转载 URL.createObjectURL和URL.revokeObjectURL

一.URL.createObjectURL URL.createObjectURL()方法会根据传入的参数创建一个指向该参数对象的URL. 这个URL的生命仅存在于它被创建的这个文档里. 新的对象URL指向执行的File对象或者是Blob对象. 语法: objectURL = URL.createObjectURL(blob || file);&nb...

2018-07-23 19:07:23 533

原创 css中@import和link的用法

一：css外部引入外部引入CSS的方法有两种，一种是@import，一种是link @import "./style.css";<link href="./style.css" rel="stylesheet" type="text/css" />现在绝大部分的网站都采用后一种link方式，原因在于@import先加载HTML，后加载CSS。而link先加载CSS，后加...

2018-07-23 17:36:30 937

转载 git概念及使用

转载自https://blog.csdn.net/zl1zl2zl3/article/details/52637737，文章写的很清楚，我就拿来主义了。 git和Github概念 Git — 版本控制工具（命令）。工具介绍官方网站：http://git-scm.com工具下载地址：http://git-scm.com/download/ git是一个开源的分布式版本控制系统，用以...

2018-07-23 17:01:17 385

原创 js中对象之间的比较

对象之间是无法直接进行比较的，我在写代码的过程中经常犯这个错误，可以将两个对象转换成json字符串格式，即利用JSON.stringify(obj)再进行比较。const obj = { id: 0, name: '张三', age: 12}const objToStr = JSON.stringify(obj)同时，也可以用JSON.parse装换回...

2018-07-17 18:09:53 7813

原创 vue中组件间的信息交互方式分类

理清组件间的数据交互逻辑可以很好的帮助我们构建项目。一：简单父子组件之间，就是普通的小组件，数据量少，父组件用props传入数据，子组件可以直接使用$emit 和 $on进行数据交互。也可以使用$bus。二：复杂组件之间，这种组件的特点是，内部包含有很多交互逻辑，常常需要访问接口。另外，展示的数据也往往比较多。如列表项填写个人信息与资料之类的，还有其他的交互效果，如弹框等。可以将数据放在v...

2018-07-17 18:01:03 549

原创 vue中使用less/sass以及使用中遇到无效的问题

在vue官方脚手架中，即vue-lci搭建的项目中，可以轻易的使用less/sass。先使用npm下载依赖，命令行为’npm install less less-loader –save’,再在webpack.base.conf.js中添加rules对象：{ test: /\.less$/, loader: &quot;style-loader!css-loade...

2018-07-17 17:45:43 26573

原创转盘游戏简单原理设计

html页面（包含js）：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0&q

2018-07-03 11:06:40 3795

转载 nginx.conf的proxy_pass结尾有无“/”的区别

转载自：http://www.cnblogs.com/naniannayue/archive/2010/08/07/1794520.html 见配置，摘自nginx.conf 里的server 段：server { listen 80; server_name abc.163.com ; location / { proxy_pass http://ent.163.com/ ; }

2018-01-08 15:20:28 2478

转载 vue实现的分页组件（进行了小修改）

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <style> li{ list-style: none; displ

2018-01-04 14:44:27 1178

xiazeqiang2018的博客