2017年09月_我就是陈星烨

原创重写bind方法

var that = null;Function.prototype.bind = function(obj,arg){ if (that == null){ that = this } return function(){ return that.call(obj,arg); }};function foo() { ret

2017-09-19 21:09:09 866

转载 css常见布局方式

单列布局水平居中水平居中的页面布局中最为常见的一种布局形式，多出现于标题，以及内容区域的组织形式，下面介绍四种实现水平居中的方法（注：下面各个实例中实现的是child元素的对齐操作，child元素的父容器是parent元素）使用inline-block 和 text-align实现.parent{text-align: center;}.child{display:

2017-09-19 11:44:19 462

原创前端路由实现原理

场景分别点击顶部的”推荐”、”书城”、”书架”进而在顶部下面展示不同的页面。点击其中1个隐藏其他页面。实现原理点击a标签对应的”推荐”、”书城”、”书架”，改变hash值后，监听onpopstate事件，进而进行不同的操作。代码实现1. 利用H5router实现整个路由系统。function H5router() { this.routers = {}; this.i

2017-09-14 16:10:12 507

原创 ES6 Symbol及对象遍历方法for in,Object,keys,JSON.stringify,getOwnPropertyNames,Reflect.ownKeys

Symbol是原始类型，不能用new 创建var s1 = Symbol('a');typeof s1;//symbolSymbol参数可接受字符串表示对Symbol实例的描述，主要是为了显示时容易区分，即是接受的字符串相等，返回值也不相等。 var s1 = Symbol('a');//Symbol(a) var s2 = Symbol('b');//Symbol(b) s1 === s2;

2017-09-07 21:55:16 3190 1

原创 ES6 Promise理解

catch方法.then().catch(cb)相当于：.then(null,cb)Promise对象的错误具有冒泡的性质，会一直向后传递，直到被捕获，推荐使用.catch方法，因为他不但能捕获前面then方法中的异常且能捕获较早之前未捕获到的异常，而then的第二个参数不能捕获第一个参数中的异常。// badpromise .then(function(data) { // succ

2017-09-07 19:23:26 370

原创异步API Fetch

window.fetchfetch被定义在window对象上，用于请求远程资源，返回Promise对象检测请求结果,以下示例是请求图片： var URL = 'http://*******'; fetch(URL).then(function(response) { return response.json(); }).then(function(json) {

2017-09-07 16:03:02 318

转载 HTTPS建立连接的过程

思考问题的顺序学技术时，总是会问什么？这里也不例外，https为什么会存在，它有什么优点，又有什么缺点？为什么网站有的用http，有的用https？如果不能很好的回答，就往下看吧。http通信存在的问题容易被监听 http通信都是明文，数据在客户端与服务器通信过程中，任何一点都可能被劫持。比如，发送了银行卡号和密码，hacker劫取到数据，就能看到卡号和密码，这是很

2017-09-07 10:42:38 341

原创 HTTP2.0与HTTP1.0的区别

HTTP2.0的基本单位为二进制帧HTTP1.0利用文本与服务器交互，而HTTP2的基本协议单位为二进制帧流，每帧都有自己的类型旨在实现不同功能，然而HTTP1将继续存在，因此，HTTP2的二进制帧流需映射到HTTP1上以实现向下兼容。 HTTP2.0这么多新特性就是因为底层数据格式的改变：+-----------------------------------------------+|

2017-09-07 10:12:50 17400

一、无继承性的属性1、display：规定元素应该生成的框的类型2、文本属性：vertical-align：垂直文本对齐text-decoration：规定添加到文本的装饰text-shadow：文本阴影效果white-space：空白符的处理unicode-bidi：设置文本的方向3、盒子模型的属性width、height、margin 、margin-top、margin-right、margi

2017-09-06 20:57:28 321

原创 JavaScript substr,substring,slice,splice

str.substr(startIndex,length)从startIndex开始取length个字符若startIndex为负值，相当于str.length+startIndex若startIndex为负值且Math.abs(startIndex)>str.length,则默认将startIndex设为0省略length则返回从startIndex到字符串末尾length为0或者负值则

2017-09-06 20:48:17 222

原创 css vertical-align属性详解

适用场景vertical-align属性设置元素的对齐方式，只有具备以下两种属性的元素设置vertical-align后才起作用：1. display:inline2. display:inline-block属性介绍HTML：<p>xxxxxxxxxxxxx<span>Lorem ipsum dolor</span></p>CSS： p{ height: 1

2017-09-06 16:05:26 7344

原创 JavaScript选择文本方法

鼠标手动选择文本后显示1. 选择表单文本selectionStart,selectionEnd<textarea name="textarea" id="text" cols="30" rows="10"></textarea>text.onselect = function(){ var s = this.value.substring(this.selectionStart,this.s

2017-09-03 16:36:19 5503

转载重绘和回流repaint/reflow

Reflow(渲染)对于DOM结构中的各个元素都有自己的盒模型，浏览器根据各种样式（浏览器的、开发人员定义的等）来计算，并根据计算结果将元素放到它该出现的位置，这个过程称reflow。reflow会影响到dom的结构渲染，同时会触发repaint，他会改变他本身与所有父辈元素(祖先)，这种开销是非常昂贵的，导致性能下降是必然的，页面元素越多效果越明显。Repaint(重绘)当各种盒子的位置、大小以及

2017-09-03 11:12:17 357

原创 React 虚拟DOM及diff算法

虚拟DOM合理性由于操作DOM很慢，界面性能很多都是操作DOM引起的，而操作JS很快，用JavaScript对象很容易表示DOM节点，包括标签属性子节点，即根据DOM结构递归创建虚拟DOM树，在页面状态改变需要操作DOM时，先通过虚拟DOM计算出对真实DOM的最小修改量，然后再修改真实的DOM。1.两个相同组件产生类似的结构，不同组件产生不同的DOM结构。2.对于同一层次的一组子节点，通过唯一的

2017-09-03 11:05:14 628

原创 ouput标签详解

属性<output name="o1" for="a b"></output>output标签用于显示计算结果，而被计算得数从哪来？从for属性的指向来，注意从for属性获取的元素value为string类型，计算时需要转换为number，parseInt或者+都可以。HTML写法<form id="form" oninput="o1.value = (+a1.value) + (+b1.value

2017-09-01 10:02:33 868

MorningDuGe