qiqi_77_-CSDN博客

原创 Promise简单理解---ES6

Promise 对象是 JavaScript 的异步操作解决方案，为异步操作提供统一接口。它起到代理作用（proxy），充当异步操作与回调函数之间的中介，使得异步操作具备同步操作的接口。Promise 可以让异步操作写起来，就像在写同步操作的流程，而不必一层层地嵌套回调函数(避免地狱回调)。啥是地狱回调？网上搜刮来张图，直接明了：那家伙，那可是相当的恐怖~~~~来自白云大妈的吐槽。而我们今天所讲的...

2018-03-06 19:22:46 338

原创值类型和引用类型，深层复制和浅层复制（深拷贝浅拷贝）最详细了

要知道深层复制浅层复制的区别，首先要了解值类型和引用类型。变量分值类型和引用类型，深层复制和浅层复制都是针对引用类型变量的操作。值类型：比如数值，字符串，布尔，undifined引用类型：比如数组，对象，函数来张图（手抖，有点丑）：var num = 77;var id = 1234;var cat = {name : '喵喵'，age : 3 };结合上面图，内存分两块区域，栈和堆。值类型...

2018-02-28 17:23:53 6112 3

原创判断数据类型，判断是否空对象，js判断是不是数组

typeof首先看一下大家熟知的typeof :typeof 77 --------------"number"typeof 'str77' --------------"string"typeof ['a','b']--------------"object"typeof function a(){var m=0}-------"function"typeof null ------------...

2018-02-07 16:44:58 1887

原创变量作用域和闭包

全局变量VS局部变量全局变量的作用域是全局性的，即在整个JavaScript程序中，全局变量处处都在。而在函数内部声明的变量，只在函数内部起作用。这些变量是局部变量，作用域是局部性的；函数的参数也是局部性的，只在函数内部起作用。变量声明时如果不使用 var 关键字，那么它就是一个全局变量，即便它在函数内定义。如下图所示：在函数a( )执行后，全局可以访问aa变量，而不可以访问bb变量。ps:在函数...

2018-02-06 20:02:36 312

转载 vue常见面试题

1、vuejs与angularjs以及react的区别？1、axios的特点有哪些？答：一、Axios 是一个基于 promise 的 HTTP 库，支持promise所有的API二、它可以拦截请求和响应三、它可以转换请求数据和响应数据，并对响应回来的内容自动转换成 JSON类型的数据四、安全性更高，客户端支持防御 XSRF2、axios有哪些常用方法？答：一、axios.get(ur...

2018-05-13 11:27:27 1127

转载移动端穿透问题解决

转载自：https://segmentfault.com/a/1190000005617307问题不多描述，就是fixed弹出层，弹窗滚动条move的时候，弹窗下面的内容也可以滚动。js 之 touchmove + preventDefaultmodal.addEventListener('touchmove', function(e) { e.preventDefault();}, fa...

2018-04-11 17:30:53 668

转载 div支持placeholder属性/模拟输入框的placeholder属性

实现方式：cssdiv:empty:before{content: attr(placeholder);color:#bbb;}div:focus:before{content:none;}

2018-04-02 11:03:56 1422

原创正则表达式简单练习题整理

正则篇：1.验证字符串的组成规则，第一个须为数字，后面可以是字母、数字、下划线，总长度为5-20位/^\d{1}[\w|_|\d]{4,19}$/2.让2013-6-7 变成 2013.6.7var str = '2013-06-07'str.replace(/-/g,'.') 或者 let regExp = /-/g; str.replace(regExp, '.')3.请使用正则取出：Tec...

2018-03-30 19:12:49 8987 2

转载 require

原文写的很详细，推荐：https://www.jianshu.com/p/b8a6824c8e07http://www.ruanyifeng.com/blog/2012/11/require_js.html前端模块化，AMD与CMD的区别<script src="1.js"></script><script src="2.js"></script>...

2018-03-26 18:30:06 291

原创 ES6那些事

详细：1. let , const都是块级作用域，如果你声明：const a = 10; const a=20;console.log(a)页面报错支持这种写法const a = 10, b = 12;2.模板字符串字符串拼接const name = 'lux'console.log(`hello ${name}`) //hello luxconst template = `<div&...

2018-03-21 19:20:54 191

转载深入 Vue2.x 的虚拟 DOM diff 原理

作者简介：汪玉林，高级工程师，增值产品部前端Leader，目前团队负责手Q游戏中心、手Q游戏运营、手Q阅读等项目，有丰富的Web前端架构经验。转载地址：https://cloud.tencent.com/developer/article/1006029 一、前言Vue的核心是双向绑定和虚拟DOM（下文我们简称为vdom），关于双向绑定可以参阅木琴的文章《剖析Vue原理&实现双向绑定MVV...

2018-03-21 19:20:17 1750

转载 BFC

BFC的概念BFC(Block formatting context)直译为"块级格式化上下文"。block：Block-level box，块级盒子（div,p,section...）,display 属性为 block, list-item, table 的元素inline：inline-level box, 内联级盒子（span,em...）display 属性为 inline, inlin...

2018-03-21 17:16:59 161

原创手把手教你sublime，sublime常用插件

初用者过来这边1.首先你要下载个Sublime，不知道去哪下？最简单的一个度娘：普通下载就欧了，然后安装~2. 安装好了之后，就可以打开使用了因为经常用，所以你可以把他放到桌面快捷方式或固定到开始屏幕。开始使用，ctrl+n，打开文件可以编辑啦3.你会发现不方便，极其不方便，手动一个个敲，而且菜单还英文。OK，我们就来看看怎么安装这些个插件：（1）安装包管理 ...

2018-03-20 19:27:55 244

原创前端性能优化

1. 提高页面加载速度具体方式请参考博主文章：提高页面加载速度2.回流(reflow)与重绘(repaint)先看下两者概念：回流（reflow）：也叫重排，指的是重新计算页面布局，一个元素的回流导致了其所有子元素以及DOM中紧随其后的祖先元素的随后的回流。大部分的回流将导致页面重新渲染。重绘（repaint）：即重新绘制，它不会影响布局，只会影响元素的外观、风格等。回流必然导致重绘，重绘不一定导...

2018-03-19 19:38:01 178

原创求数组最大值汇总

1. 最原始，for循环var arr=[1,4,6,2,8];var max = arr[0];for(var i in arr){ arr[i]>max? max=arr[i]:''}console.log(max)//82. sort先排序，从小到大，pop删除数组最后一个元素，并返回该元素arr.sort().pop() //83. Math.max配合apply来使用Ma...

2018-03-15 18:36:16 317

转载可枚举属性与不可枚举属性

转载自：https://www.cnblogs.com/kongxy/p/4618173.html 在JavaScript中，对象的属性分为可枚举和不可枚举之分，它们是由属性的enumerable值决定的。可枚举性决定了这个属性能否被for…in查找遍历到。一、怎么判断属性是否可枚举 js中基本包装类型的原型属性是不可枚举的，如Object, Array, Number等，如果你写出这样的...

2018-03-14 16:40:48 3971

转载 rem 产生的小数像素问题

本文转载自：http://taobaofed.org/blog/2015/11/04/mobile-rem-problem/rem 产生的小数像素问题作者: 颂晨发表于: 2015-11-04由于日常需求以无线居多，所以可以在业务中做一些尝试，如 rem，刚接触这个特性的时候，曾经一度爱不释手，仿佛在无线开发的坎坷路上寻找到一条捷径。然而随着使用范围的扩大，慢慢的发现了一些使用 rem 带来的问...

2018-03-12 12:51:29 2598

原创 []==![]结果为true,探究 == 本质

关于==与===的区别相信大家都很清楚啦，这理解不再赘述，今天我们来看下[]==![]的结果。这是楼主碰到过得一个面试题，恩，华丽丽的答错了：[]==[] //false，这个是常识，因为在两边都是相同数据类型时，==是直接比较两边数据，结果为false，因为[]属于引用类型，在两个[]分别指向不同的堆内存，不熟悉的引用类型的小伙伴请参考楼主文章：值类型引用类型；而当前这题：[]==![]//tr...

2018-03-06 14:03:18 14707 3

原创前端提升页面加载速度

性能黄金法则：只有10%~20%的最终用户响应时间花在了下载HTML文档上。其余的80%~90%时间花在了下载页面中的所有组件上。提升加载速度的方式：一、减少HTTP请求(1).合并脚本和样式表将多个样式表或者脚本文件合并到一个文件中，可以减少HTTP请求的数量从而缩短效应时间。不过：合并所有的样式文件或者脚本文件可能会导致在一个页面加载时加载了多于自己所需要的样式或者脚本，对于只访问该网站一...

2018-03-02 17:34:55 11022

原创关于null 和 undefined

var a = null;var b=null;var c = undefined;var d = undefined;typeof a ; //objecttypeof c ; //undefineda==b ; //truea===b ; //truea==c ; //truea===c; //falsec==d ; //truec===d;//trueundefined和null与其他类型的...

2018-03-02 12:42:40 270

原创 flex布局遇到过的小问题

想要使用flex布局实现上面这种效果，html:<ul> <li><span></span></li> <li><img width="100%" src="https://dummyimage.com/400x400/f5a2a5/FFF&text=product-

2018-03-01 18:08:15 6821

原创 Object create()与 new

“Object.create() 方法会使用指定的原型对象及其属性去创建一个新的对象。返回值：在指定原型对象上添加新属性后的对象。”-------摘自MDN通俗一点就是一个新的对象，可以继承一个对象的属性，并且可以添加新属性，小栗子：var a = { name : '小七哥'}var b = Object.create( a, { age : { valu...

2018-02-28 19:36:41 505

原创删除数组元素，并返回删除后的数组

关于删除数组元素，最熟悉不过：shift-----删除数组第一个元素，并返回该元素，原数组被改变；pop-----删除数组最后一个元素，并返回该元素，原数组被改变;更强大一些的slice(start,end)，它主要是截取的意思:slice-----删除数组从start下标开始到（end-1）下标结束的元素，并返回被删除的元素，原数组不会改变；那我想要删除数组'a'元素，并返回删除后的数组['b'...

2018-02-28 11:56:13 54417 5

原创变量名、函数名、形参相同的情况

1. 变量和函数重名时，如果变量声明未赋值，则变量名被忽略，取函数(function (a) { console.log(a); var a = 10; function a(){}}( 100 ))结果：function a(){}2.(function (a) { console.log(a); var a = 10; var a = fun...

2018-02-26 19:08:08 3478

原创项目上传github push 写密码无反应

关于github提交，命令行写密码无反应的情况：我们都知道：git push -u origin master ：意思是将项目推到github上，但这个过程中，需要用到github的username（github用户名）和password（密码），Username for 'https://github.com': seven77ZhouPassword for 'https://seven77...

2018-02-26 15:15:54 786

原创 better-scroll滚动无效几种原因

首先附上better-scrooll的github地址：https://github.com/ustbhuangyi/better-scroll可以下载官方案例学习。本人也会将better-scroll小案例上传自己github，附上本人使用better-scroll制作页面的github地址：https://github.com/seven77Zhou/vue-online-shop一、DOM层...

2018-02-24 14:49:09 43987 27

原创 vue 切换 class （切换类） toggleClass 单选多选

注：以下三个例子，均以切换active为例一、切换toggleClass<div class="btn" :class="{'active':isChoose}" @click="togglePay"></div>data(){ return { isChoose : false }},methods:{ togglePay:function()...

2018-02-23 17:01:12 21091 4

原创 css 高度随宽度比例变化

方案一：padding实现原理：一个元素的 padding，如果值是一个百分比，那这个百分比是相对于其父元素的宽度而言的，padding-bottom 也是如此。使用 padding-bottom 来代替 height 来实现高度与宽度成比例的效果，将 padding-bottom设置为想要实现的 height 的值。同时将其 height 设置为 0 以使元素的“高度”等于 padding-bo...

2018-02-23 11:07:58 22623 2

转载词法作用域 VS 动态作用域

首先你得明白程序设计中作用域这个概念：通常来说，一段程序代码中所用到的名字并不总是有效／可用的，而限定这个名字的可用性的代码范围就是这个名字的作用域。词法作用域（静态作用域）：它的作用域是指在词法分析阶段就确定了，不会改变。（函数在定义的时候决定了函数的作用域）动态作用域：它的作用域是在运行时根据程序的流程信息来动态确定的。（函数在调用的时候决定函数的作用域，只有部分语言支持）我们以

2018-02-07 12:34:39 377

转载常见的meta标签

metacharset='utf-8'>metaname="keywords"content=""/>metaname="description"content="不超过150个字符"/><meta name="viewport" content="width=device-wi

2018-02-06 12:47:46 289

原创背景小球动画，飘飞小雪花，随机点运动

该效果常用于H5页面背景先上效果图来：代码如下，作了相关注释：<html> <head> <title>飘飞小球背景</title> <style type="text/css"> .canvasBox{width: 600px; margin: 100px auto;} </style> &

2018-02-05 15:08:43 957

原创 css 实现六边形的两种方式，非canvas

方式一三个盒子旋转拼成实现原理：这个效果的主要css样式有：1.>transform: rotate(120deg); 图片旋转2.>overflow:hidden; 超出隐藏3.>visibility: hidden; 也是隐藏，与display:none;相似，但不同的是，它虽然隐藏了，但依然会在网页中占有位置我们要用到3层div进行旋转来得到这个效果（ps:3层div的大小...

2018-01-19 19:53:31 1299

原创关于http请求，请求头和响应头

http响应报文里的 Via 和 X-cache 有什么区别？via是http协议里面的一个header,记录了一次http请求所经过的代理和网关，经过1个代理服务器，就添加一个代理服务器的信息，经过2个就添加2个。x-cache是squid代理的自定义header,用来记录缓存的命中与否（Squid 是 Linux/Unix 平台下最为流行的高性能免费应用层代理服务器）

2018-01-15 18:56:30 5028

原创 js实例拷贝和属性搜索机制

实例拷贝原理每当对构造函数实例化的时候，该实例都会将构造函数的属性重新拷贝一份（包括隐藏属性，但私有的不会被拷贝）；什么是私有的:var fun = function(){ this.name = '小明'; var age = 18;//在实例化的时候，age将不会被拷贝}fun.prototype = { getFullName:function(name){ ret

2018-01-12 18:34:30 751

qiqi_77_的博客