2016年11月_刻刻帝丶

原创原生JavaScript实现的简易计算器

最近一直没有写博客因为一直忙着预习考试内容什么偏微分啊、数值分析啊、计算机图形学啊、信息论… 在未来一个月可能会很忙整理前端的频率可能就没那么高了还是说正题昨天晚上用JavaScript实现了一个简易的计算器今天分享给大家没有考虑什么兼容，浏览器为chrome 代码我放在了我的github上大家可以前往下载传送门或者复制我下面展示的代码这个计算器长成这个样子（43

2016-11-29 20:54:48 30123 1

原创浅析JavaScript设计模式——发布-订阅/观察者模式

观察者模式定义对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都将得到通知前一段时间一直在写CSS3的文章一直都没写设计模式今天来写写大名鼎鼎观察者模式先画张图观察者模式的理解我觉得还是发布-订阅模式的叫法更容易我们理解这就类似我们在微信平台订阅了公众号当它有新的文章发表后，就会推送给我们所有订阅的人我们可以看到例子中这种模式的优点我们作为

2016-11-26 18:58:35 18786 1

原创浏览器重绘与重排的性能优化

了解了浏览器渲染原理之后我们知道了浏览器听过渲染树计算布局后，就开始绘制页面元素但是渲染树并不是一成不变的，在我们的脚本当中它是可能改变的重绘与重排当DOM变化影响了元素的几何属性（宽、高改变等等）浏览器此时需要重新计算元素几何属性并且页面中其他元素的几何属性可能会受影响这样渲染树就发生了改变，也就是重新构造RenderTree渲染树这个过程叫做重排（reflow）如果D

2016-11-25 21:54:30 6282 2

原创浏览器内核渲染引擎渲染原理

浏览器加载了html和css是怎样呈现在浏览器上面的呢？这个底层的原理需要我们了解这样我们才能够进一步做出一些性能优化浏览器渲染大体上分为以下五步处理html生成 DOM（Document Object Model） Tree处理css生成 CSSOM（CSS Object Model） TreeDOM树与CSS-DOM树合并为Render树对Render树进行布局计算遍历Rend

2016-11-25 16:10:00 6849

原创响应式布局：CSS3媒体查询Media Queries

利用我们的CSS3实现响应式布局仅仅有弹性盒还不够 CSS3还扩展了media属性，增加了一个模块功能 Media Queries媒体查询功能媒体查询引入随着移动端的快速普及越来越多的用户使用智能机、平板电脑等浏览页面所有考虑到用户的需求我们要保证用户在各种设备上浏览页面都有不错的体验这样我们就需要媒体查询它允许我们为不同的设备或者不同条件的设备设置不同的样式不过如果

2016-11-24 21:21:40 1661

原创响应式布局：CSS3弹性盒flex布局模型

页面布局一直都是web应用样式设计的重点我们传统的布局方式都是基于盒模型的利用display、position、float来布局有一定局限性比如说实现自适应垂直居中随着响应式布局的流行，CSS3引入了更加灵活的弹性布局模型flex弹性布局使用弹性布局可以有效的分配一个容器的空间即使我们的容器元素尺寸改变它内部的元素也可以调整它的尺寸来适应空间若想让一个元素变成弹性盒很

2016-11-24 13:23:10 4207

原创 CSS3动画animation相关属性与关键帧规则keyframes

我昨天写三维正方体的时候，就用到了动画的语法今天就来系统复习一下过渡transition有着它的局限性虽然简单，但是它只能在两个状态之间改变并且它需要事件的驱动才能够进行不能够自己运动所以为了解决这样的问题我们需要animation动画动画若想实现动画效果仅仅有animation属性是不够的我们还需要@keyframes规则先来看一个例子div class="

2016-11-23 20:53:54 7061

原创 CSS3元素过渡属性transition

过渡动画是动画的基础在学习动画属性之前我们需要先了解过渡属性transition过渡transition先来看一个小例子<div class="demo"></div>.demo { width: 100px; height: 100px; background-color: royalblue;}.demo:hover { width: 200px;}

2016-11-23 16:59:27 4214

原创 CSS3景深、三维变换属性及旋转三维立方体的实现

上周简单写了一下2D变换今天来写写3D变换三维立体效果我觉得是CSS3中最有意思的地方不得不佩服那些开发者大神们让我们能够通过几行CSS代码就能得到酷炫的视觉体验浏览器坐标系在讲正式语法之前，首先需要了解浏览器坐标系这需要我们把浏览器界面想象成一个立体的场景这是网上流传很广的浏览器坐标系图片从左到右的方向是浏览器x轴的正方向从上到下的方向是浏览器y轴的正方向而z轴正方

2016-11-23 13:42:02 14790

原创 CCS3盒模型与盒模型属性box-sizing

这两天写的都是小知识点因为确实有点忙虽然很简单，但是本着全面总结的原则，还是要说一下今天我来说一下这个CSS中的盒模型以及CSS3中可以改变盒模型的属性盒模型盒模型是计算元素尺寸的模型规则在我们CSS中盒模型分为两种W3C标准盒模型正常情况下我们用的都是这个标准的盒模型标准盒模型中元素尺寸使用如下计算方式元素实际宽度 = width + padding（左右内边距大小）

2016-11-21 22:42:03 2868

原创 CSS3多列布局columns相关属性

CSS3中增加了可以实现多列布局的属性在此之前的实现很麻烦可能需要各种定位现在我们只需要一个属性就可以实现多列布局类似于我们的报纸布局这样可以方便读者观看多列数量与多列宽度如果一行文字太长的话，我们可能会没有读下去的欲望像这样<div class="demo">......</div>.demo { width: 600px; height: 200px; b

2016-11-20 23:10:38 3733

原创 CSS3元素2D平面变换属性transform

CSS3的形状变换允许我们对元素拉伸、缩放等等这篇我主要谈下一2D平面变换属性transform可以进行变换 transform就是变形的意思并且它主要通过函数来使用，有以下函数translate() 平移变换ratate() 旋转变换scale() 缩放变换skew() 倾斜变换matrix() 矩阵变换transform-origin则时定义变换的中心平移变换trans

2016-11-19 16:51:17 1610

原创七种方案解决JavaScript交换两个变量值的问题

刚才写位操作的时候突然想到了这个问题突然想总结一下交换变量值的问题可能使我们学习编程语言接触到的比较早的逻辑问题可能有些小伙伴只会两种var a = 123;var b = 456;今天我总结七种办法来交换a和b的变量值交换变量值方案一最最最简单的办法就是使用一个临时变量了不过使用临时变量的方法实在是太low了var t;t = a;a = b;b = t;首先把a的值存储到

2016-11-18 21:47:52 13040 2

原创 JavaScript中容易忽视的高效操作——位操作

很多JavaScript的书都很少提到位操作包括一些字典型的都讲的很少因为它真的是几乎用不到第一次接触位运算的时候，还是在学习C语言的时候位操作是计算机底层的操作，所以它的运算速度非常快位操作JavaScript中数字都是64位格式存储的我们在位操作的时候，数字被转换为32位数字，于是位运算就是直接操作这32位数虽然需要转换，但是位运算仍然要更加迅速顶级原型中的toS

2016-11-18 19:58:23 1536

原创浅析JavaScript设计模式——迭代器模式

迭代器模式提供一种方法顺序访问一个聚合对象中的各个元素，而又不需要暴露该对象的内部表示迭代器模式不像我们上次讲的代理模式它十分简单，简单到我们可能都不认为它是一种设计模式因为我们现在使用的语言基本上内部都实现了自己的迭代器迭代器可以抽取内部的逻辑，我们不需要知道对象内部长什么样就可以按顺序访问它内部的元素自定义迭代器ES5中给我们的数组扩展了很多原型方法、其中就有一个好

2016-11-18 14:19:48 1490

原创浅析JavaScript设计模式——代理模式

代理模式为一个对象提供一个代用品或占位符，以便控制对它的访问好久没有写设计模式的文章了今天要写的代理模式可能内容要多一些代理模式非常有用，代理模式也分为很多很多种，我只谈一些常见并且简单的思想其实都是一样的代理这个词我们并不陌生，在生活中例子也很多，比如，经纪人… 当我们不方便直接访问一个对象或者访问对象不满足我们需求的时候我们可以把这个对象的控制权交给一个代理对象，

2016-11-17 20:33:54 2560

原创 CSS3选择器介绍及用法总结

CSS3新增了很多强大的选择器它可以让我们少写一些js事件脚本我们先来看看各个版本的选择器有哪些注： ele代表element元素 attr代表attribute属性，val代表value属性值 :xxx都属于伪类选择器，::xxx都属于伪元素选择器有名字的选择器我尽量细分了CCS1选择器选择器类型示例说明 .class 类选择器 .demo

2016-11-16 18:10:56 7038

原创 CSS3多重背景及背景图片裁剪、定位和尺寸

CSS3之前我们可以对背景添加一张图片 CSS3允许我们在一个元素上添加多个图片多重背景图片<div class="demo"></div>.demo { width: 600px; height: 200px; border: 1px solid black; background: url('1.png') no-repeat;}多重背景可以把多个图片资源添加

2016-11-15 22:57:50 19165 2

原创 CSS3字体与文本效果

CSS3允许我们使用自定义字体也多了一些不错的文本效果自定义字体使用自定义字体需要使用@font-face规则当然首先你要有自定义文字文件<p class="demo">Payen S.Tsung</p>@font-face { font-family: myDIYfont; /*自定义字体名*/ src: url('Ginga.ttf'); /*字体文件*/}.demo

2016-11-15 20:48:12 1424

原创 CSS3颜色值RGBA与渐变色

CSS3之前渐变色图片只能用背景图片 CSS3的渐变色语法可以让我们省去下载图片的开销并且在改变浏览器分辨率时有更好的效果颜色值RGBA我们熟悉的rgb颜色标准，是由r（red）、g（green）、b（blue）三种颜色叠加变化形成各种颜色取值0~255，或0~100% rgba就是在rgb基础上增加了alpha不透明度参数.demo { width: 100px; he

2016-11-15 18:33:17 10136 2

原创 CSS3圆角、盒阴影与边框图片

今天开始整理CSS3的知识其实应该是昨晚写的，不过好像是急性肠胃炎了，痛的一晚上没睡着，蓝瘦香菇还好今天打点滴睡一觉就好了，看来这吃东西还是注意点好，被我的胃肠报复了 CSS没什么难的，不过看的同时自己要在浏览器上试一试，试一遍就记住了光看不做白看CSS3各个浏览器是存在兼容问题的不同浏览器有不同前缀的私有属性，表示属性或规则还没有成为标准换句话说，官方还没公布标准的时候，各个

2016-11-14 17:14:00 2891

原创服务器返回的14种常见HTTP状态码

当我们从客户端向服务器发送请求时服务器向我们返回状态码状态码就是告诉我们服务器响应的状态通过它，我们就可以知道当前请求是成功了还是出现了什么问题状态码是由3位数字和原因短语组成的（比如最常见的：200 OK）其中第一位数字表示响应类别，响应类别从1到5分为五种 add：其实我查阅资料发现还有一个6打头的一个 600 Unparseable Response Headers

2016-11-13 11:01:58 53804 7

原创 JavaScript匿名、具名函数与立即执行函数IIFE详解

JavaScript中的函数作用域的存在就是为了把变量和函数“隐藏”起来符合我们的最小特权原则同时它的另一个好处是可以避免同名标识符的冲突今天主要来谈谈这个立即执行函数在此之前的复习一下匿名函数与具名函数匿名函数与具名函数无论是匿名还是具名，都是针对函数表达式来说的函数声明那就必须得有名字了，否则会报错的function foo(){ //函数声明 //...} 这

2016-11-12 11:49:49 4908 2

原创理清JS中的词法、静态、动态、函数、块作用域

额刚刚写了好多，结果被我误操作覆盖掉了，我的心血 ╥﹏╥… 没关系重新写一遍，也提醒同样在这个平台写博客并且像我一样使用markdown语言码字的同学 “保存线上到草稿”是一个好习惯，嗯嗯今天双十一，感觉该剁手了。。很多同学在学习JavaScript的时候，可能会听说“各种各样”的作用域什么词法作用域、静态作用域、动态作用域、函数作用域、块作用域傻傻分不清楚下面我就给大家理清一下

2016-11-11 18:52:08 2853

原创 JavaScript队列、优先队列与循环队列

队列是一种遵从先进先出（FIFO）原则的有序集合队列在尾部添加新元素，从顶部移除元素队列的理解队列在我们生活中最常见的场景就是排队了队列这个名字也已经很通俗易懂了和栈很像，这不过队列是先入先出的数据结构队列的前面是队头队列的后面是队尾出队从队头出入队从队尾入队列的创建和栈类似，这里我就不就不啰嗦了同样需要实现一些功能这里我类比生活中的排队上厕所向队列中添加元素

2016-11-10 21:49:31 3396 1

原创 JavaScript欺骗词法的eval、with与catch及其性能问题

正常来说，执行期上下文的作用域链是不会改变的所以很多同学都认为JavaScript中只有词法作用域（静态作用域，作用域由书写代码时函数声明位置决定）但其实有几种机制是可以欺骗词法的它们是with()、eval()还有try-catch语句的catch语句其中with和eval我们不应该去使用（会产生很多问题）欺骗词法的意思就是欺骗词法作用域也就是说，在运行时修改作用域链这

2016-11-09 21:04:03 2686 1

原创浅析JavaScript设计模式——策略模式

策略模式定义一系列算法，把它们一个个封装起来，并且使它们可以相互替换在我们的生活中，想要达到一种目的可以有不同的方法所谓“条条大路通罗马” 在我们的程序中，想要实现一种目的的方法也可能不同所以就引入了我们的策略模式举一个

2016-11-09 13:54:51 1222

原创 JavaScript内部属性[[Scope]]与作用域链及其性能问题

学习JavaScript已经很长时间了今天打算回忆一下作用域的知识作用域这个知识很基础并且非常重要下面我就总结一下JavaScript中的作用域以及作用域链的相关知识作用域作用域是什么？作用域是变量能够引用、函数能够生效的区域它限制了你对内存空间上值的获取和修改所有的语言都存在作用域我们可以理解作用域为js引擎根据名称查找变量的一套规则理解了作用域，我们才能去理解闭包

2016-11-08 20:09:33 10192 9

原创 JavaScript类型检查与内部属性[[Class]]

所有对象都包含有一个内部属性[[Class]] 我们不能直接访问这个属性，但是我们可以通过一种方法访问这种方法就是Object.prototype.toString.call(...) 这也是比较靠谱的检查类型的方法（instanceof、constructor等等不靠谱）比如说我们检测一个数组Object.prototype.toString.call([1,2,3]);控制台打印"[ob

2016-11-08 10:57:08 3054

原创 JavaScript中表示空的undefined与null的区别及用法

我刚开始学习JavaScript的时候就感觉undefined挺新鲜因为其他语言没有而且不仅有undefined，居然还有一个表示空的null 相信很多同学都说不出来undefined与null有什么区别今天我就总结一下JavaScript中表示空的undefined与null的区别相似undefined和null是JavaScript中的基本类型并且它们的类型值各只有一个，就

2016-11-07 17:19:07 2159

原创 JavaScript条件语句的性能问题

条件语句和循环一样，条件语句同样会改变运行流 JavaScript的条件语句分为两种if-elseswitchif-else是我们最常用的了不过if-else语句与switch语句很多情况都能够互相替换if(foo){ ...}else{ ...}switch(foo){ case true: ... default:

2016-11-06 21:03:27 1580

原创 JavaScript日期对象常用方法及应用

感觉我这个标题也的很大其实日期对象并不常用，应用好像也不多但是我们需要了解一些基本的用法日期对象Date日期对象是js原生的构造函数不像数组、对象什么的，它没有对应的常量形式创建一个日期对象很简单var date = new Date();Date()可以带参数，指定日期和时间不带参数就是使用当前的日期和时间Date()主要是用来获取当前的时间戳（距离1970年1月1日的毫秒数）

2016-11-06 19:10:22 1859

原创 JavaScript的提升行为及原理分析

对于刚刚学习JavaScript的同学，可能它的一些行为让你刚到疑惑和你在学校学过的C/C++差很多比如说这样的情况a = 1;var a;console.log(a);// 1有些同学可能会认为应该是undefined才对，var a好像给a重新赋值了再如这样的情况console.log(a);// undefinedvar a = 1;a还没声明就打印，应该是报错才对啊，或者参

2016-11-05 20:53:10 1166

原创浏览器UI多线程及对JavaScript单线程底层运行机制的理解

早在我刚刚学习JavaScript的时候，我就被灌输了这样的思想 JavaScript是单线程的可是在我不断的学习过程中学到了定时器、ajax的异步加载一度让我对这句话产生怀疑既然JavaScript是单线程的，为什么它还存在异步加载后来我知道了浏览器中不仅仅有js一个线程，它与其他线程共同组成了 —– 浏览器UI多线程早就想写一篇这样的文章，只是感觉理解的还不够，怕我写的对大

2016-11-04 22:00:11 3702

原创原生JavaScript与jQuery（绝对、相对定位）实现拖拽效果

今天给大家谈谈这个拖拽功能的实现一是想复习一下这个小知识，二是看到网上都是absolute绝对定位实现的，感觉有一定局限性所以自己写了一下用relative相对定位来实现的拖拽效果原生js绝对定位实现拖拽首先我们来思考一下拖拽功能用到的事件拖拽无非是鼠标按下点击物体（DOM节点）鼠标移动，物体移动鼠标抬起，物体停止拖拽所以这里我们需要绑定三个事件 mousedown、mou

2016-11-03 21:54:58 7370

原创 JavaScript中的七种值类型与typeof运算符

打算从基础开始复习JavaScript，顺便分享总结一下自己学过的知识内置类型JavaScript中有七种内置类型，包括六种基本类型和一种引用类型基本类型number（数字）string（字符串）boolean（布尔值）undefined（未定义）null（空值）symbol（符号）【ES6规范新增】引用类型object（对象）其中基本类型是保存在栈内存中的简单数据段，在内存中有

2016-11-02 22:56:10 1573

原创 jQuery框架常用的性能优化

jQuery作为一个JavaScript非常优秀的库是我们在学习前端过程中必学的虽然它的流行程度已经没有那么巅峰了但是学习了它对我们学习理解其他框架来说很有帮助今天第一次写jQuery的相关文章，就先把这个性能问题拿出来因为大家把时间都用在jQuery语法上了，对这个框架的性能优化不是很了解下面我来给大家总结一下jQuery常用的性能优化选择器的使用jQuery

2016-11-02 13:05:06 1583

尐轩web前端网络日志