前端开发我的笔记，那些小的知识点（持续更新）

2015年2月最后一天开始更新这篇博客。

这篇博客会一直更新，存放一些平时看到的前端开发知识小点。这些知识点若是单独写一篇博客或者随笔又太占地方了，因此就聚合在一块儿。写的目的一是以避免本身忘记，正所谓好记性不如烂笔头，二是也能够分享给你们。

 

==================== 正文开始 ===========================

 

parseInt("10") => parseInt("010", 10) => 10
parseInt("010") => parseInt("010", 8) => 8    // 老版本的IE
parseInt("0x10") => parseInt("010", 16) => 16    // 所有浏览器

因此用parseInt的时候必定要指定进制。

 

 

 

移动端经过判断touchstart和touchmove差值来判断滑动的方向，还须要考虑滑动角度的问题，或者使用滑动判断的插件。

 

 

 

数组的sort是按照ASCII字母排序，因此[1, 2, 11, 123, 22].sort(); 返回的结果是[1, 11, 123, 2, 22]。若是须要按大小排序，那么须要这么写

[1, 2, 11, 123, 22].sort(function(a, b){
    return a - b;
});

 

 

 

减小重绘，提升性能的要点

1.避免在document上直接进行频繁的DOM操做，若是确实须要能够采用off-document的方式进行，具体的方法包括但不彻底包括如下几种： 
(1). 先将元素从document中删除，完成修改后再把元素放回原来的位置 
(2). 将元素的display设置为”none”，完成修改后再把display修改成原来的值 
(3). 若是须要建立多个DOM节点，可使用DocumentFragment建立完后一次性的加入document 

2.集中修改样式 
(1). 尽量少的修改元素style上的属性 
(2). 尽可能经过修改className来修改样式 
(3). 经过cssText属性来设置样式值 

3. 缓存Layout属性值 
对于Layout属性中非引用类型的值（数字型），若是须要屡次访问则能够在一次访问时先存储到局部变量中，以后都使用局部变量，这样能够避免每次读取属性时形成浏览器的渲染。 
var width = el.offsetWidth;

var scrollLeft = el.scrollLeft; 

4.设置元素的position为absolute或fixed 
在元素的position为static和relative时，元素处于DOM树结构当中，当对元素的某个操做须要从新渲染时，浏览器会渲染整个页面。将元素的position设置为absolute和fixed可使元素从DOM树结构中脱离出来独立的存在，而浏览器在须要渲染时只须要渲染该元素以及位于该元素下方的元素，从而在某种程度上缩短浏览器渲染时间，这在当今愈来愈多的Javascript动画方面尤为值得考虑。

 

 

 

数组（Array）的splice方法能够删除，插入，替换元素。三个参数分别是（起始位置， 删除项数， 插入元素）。若是说对数据操做是增删改查，那么这个方法直接实现了增、删、改。是数组操做的一个重要方法。

 

 

 

TCP/IP 是传输层协议。 socket是对TCP/IP的封装，提供了一些方法能够更方便的直接操做数据。而数据格式等通常本身去定义。

HTTP在TCP/IP之上的应用层协议，实现HTTP协议的工具（好比浏览器）对信息进行封装， 而后走TCP/IP协议。

关系至关于 HTTP(浏览器实现) -> TCP/IP（操做系统实现）在它们之间有一个socket，用来通常传输数据，能够把数据格式定义成和HTTP同样，那么就至关于socket实现HTTP。

 

 

 

IE模拟DOMContentLoaded，两个方法

1：一种是建立空script标签，属性拥有defer，而后待onreadystatechange为complete时激发DOMContentLoaded

2：一种是经过调用IE私有方法doScroll('left')的原理去判断DOMContentLoaded

 

 

 

HTTP常见状态码

200 / 204（成功，可是无需返回值）

301（永久重定向） / 302（临时重定向） / 304 

400 （bad request）/ 403 （forbidden）/ 404

500 / 502(网关问题) / 503（服务器繁忙） / 504(超时)

 

 

 

JavaScript数组浅拷贝常见的两种方法

方法一：slice。 var array = [1, 2, 3].slice(0);

方法二：contact。 var array = [1, 2, 3].concat();

 

 

 

移动端单页宣传页开发方法

单页宣传页就是微信中常常看到的那种，一进去看到一个页面，而后滑动一下看到第二个，再滑动看到下一个这种。

这里简单记录下通用方法流程

1：分析设计图，指出不合理部分（好比各类屏幕尺寸是否考虑，横屏竖屏是否考虑等）

2：肯定一下尺寸及范围（好比常见的320*180 、640*960）等

3：页面若是图片资源过多，能够先作一个loading动画，而后异步去加载图片，等图片加载完再开始第一屏。（由于移动端网速有可能很慢，若是滑动下图片尚未加载出来，就体验太差了）

4：js计算屏幕尺寸，而且把相应的div设置成满屏（这里满屏是指视口的大小，因此设计图须要考虑微信本身的导航、topbar这些东西占有的位置）。而后背景图经过background-size来填满div。

5：展现第一屏，加点动画

6：如何设置动画：动画主要就是transition和animation。区别主要就是transition只能设置开始结束状态，animation能够设置多个状态，还能够设置循环等，简而言之，animation比transition强大不少。

加入动画的常见方法就是就是加一个类名，而后这个类型下是定义了另外一个状态的，而后由于定义了transition，就有动画了。

好比 div{top: 0;opacity: 0;}而后有1s的transition，接着给它加一个类test，那么若是这样定义test。div.test{top: 10px; opacity: 1;}那么便会有一个渐显和从上往下的动画了。

7：接下来即是向上滑，这里首先能够用一些现成的手势插件好比 hammer.js/swipe 等等。若是是本身弄，那么有几点要注意，

首先，经过判断touchstart和touchmove来判断滑动的距离等。而后距离过短能够忽略，也许是用户不当心碰了一下，距离到必定程度，要判断下角度，若是在45°到135°之间，才是向上滑，不然认为是向下或者两侧滑。

8：载入到了下一屏，重复上面第5点开始的工做。

 

移动端使用rem时候动态设置html字体大小

!(function(doc, win) {
    var docEle = doc.documentElement,
        evt = "onorientationchange" in window ? "orientationchange" : "resize",
        fn = function() {
            var width = docEle.clientWidth;
            width && (docEle.style.fontSize = 20 * (width / 320) + "px");
        };
     
    win.addEventListener(evt, fn, false);
    doc.addEventListener("DOMContentLoaded", fn, false);
 
}(document, window));