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

最新推荐文章于 2024-11-10 22:45:39 发布

weixin_30878361

最新推荐文章于 2024-11-10 22:45:39 发布

阅读量82

点赞数

文章标签：前端网络 javascript ViewUI

原文链接：http://www.cnblogs.com/season-huang/p/4305738.html

版权

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));