Web前端常用代码笔记整理（01）

1.[] 和 Array 调用 slice 方法引起的问题

问题表示：在某些场景下，需要将函数的 arguments 参数作为一个数组调用，但是 arguments 是一个奇异对象，所以试着将 arguments 转化为一个数组；

function argToArr(){
    return [].slice.call(arguments, 0);
}
console.log(argToArr(1,2,3));    //[1,2,3]




function argToArr(){
        return Array.slice.call(arguments, 0);
    }
    console.log(argToArr(1,2,3));    //[]

问：这是为什么呢？
另外还有一个问题，是关于 Array 是怎么找到 slice 方法的？
Array 本身是没有 slice 方法，它的方法在 Array.prototype 中，而我们在调用 slice 方法的时候，如果在 Array 本身没有找到 slice 方法的话，会通过它的原型链往上查找，而 Array.proto 并没有指向 Array.prototype，而是指向 Function()，那么它是怎么找到 slice 方法的呢？

解释：

第二段代码报错是因为Array是构造函数，不是对象，打开控制台，输入 typeof Array，结果是 function
你也说了slice()方法在其原型对象中，而[]就是Array的原型对象，在控制台中输入 Array.prototype，结果是[],所以第一段代码可以顺利执行。

第二段代码如下修改就可以了：

functionargToArr(){
    returnArray.prototype.slice.call(arguments, 0); // 改这一行
}
console.log(argToArr(1,2,3)); 

其实你的本质问题就在于误认为Array是数组对象，然而它是构造函数。

2.if条件语句相关

对于 if 语句括号里的表达式，ECMAScript 会自动调用 Boolean()转型函数将这个表达式的结果转换成一个布尔值。如果值为 true，执行后面的一条语句，否则不执行。

3.arguments相关

通过arguments 对象的length属性，来智能的判断有多少参数，然后把参数进行合理的应用 。
比如，要实现一个加法运算，将所有传进来的数字累加，而数字的个数又不确定。

function box() {
        var sum = 0;
        if (arguments.length == 0) return sum; //如果没有参数，退出
        for(var i = 0;i < arguments.length; i++) { //如果有，就累加
            sum = sum + arguments[i];
        }
        return sum; //返回累加结果
    }
    alert(box(5,9,12));

4.函数内部属性

函数内部，有两个特殊的对象：arguments 和 this。arguments 是一个类数组对象，包含着传入函数中的所有参数，主要用途是保存函数参数。但这个对象还有一个名叫 callee 的属性，该属性是一个指针，指向拥有这个 arguments 对象的函数。
对于阶乘函数一般要用到递归算法，所以函数内部一定会调用自身；如果函数名不改变是没有问题的，但一旦改变函数名，内部的自身调用需要逐一修改。为了解决这个问题，我们可以使用 arguments.callee 来代替。

function box(num) {
        if (num <= 1) {
            return 1;
        } else {
            return num * arguments.callee(num-1);//使用 callee 来执行自身         }
    }

5.event对象

直接接收 event 对象，是 W3C 的做法，IE 不支持，IE 自己定义了一个 event 对象，直接在 window.event 获取即可。

input.onclick = function (evt) {
    var e = evt || window.event; //实现跨浏览器兼容获取 event 对象
    alert(e);
};

6.事件的目标

W3C 中的 target 和 IE 中的 srcElement，都表示事件的目标。

function getTarget(evt) {
    var e = evt || window.event;
    return e.target || e.srcElement; //兼容得到事件目标 DOM 对象
}
document.onclick = function (evt) {
    var target = getTarget(evt);
    alert(target);
};

7.阻止事件冒泡

在阻止冒泡的过程中，W3C 和 IE 采用的不同的方法，那么我们必须做一下兼容。

function stopPro(evt) {
    var e = evt || window.event;
    window.event ? e.cancelBubble = true : e.stopPropagation();
}

8.阻止事件默认行为

function preDef(evt) {
    var e = evt || window.event;
    if (e.preventDefault) {
        e.preventDefault();
    } else {
        e.returnValue = false;
    }
}

9.上下文菜单事件：contextmenu

当我们右击网页的时候，会自动出现 windows 自带的菜单。那么我们可以使用 contextmenu 事件来修改我们指定的菜单，但前提是把右击的默认行为取消掉。

function addEvent(obj, type, fn) { //添加事件兼容
    if (obj.addEventListener) {
        obj.addEventListener(type, fn);
    } else if (obj.attachEvent) {
        obj.attachEvent('on' + type, fn);
    }
}
function removeEvent(obj, type, fn) { //移除事件兼容
    if (obj.removeEventListener) {
    ob    j.removeEventListener(type, fn);
    } else if (obj.detachEvent) {
        obj.detachEvent('on' + type, fn);
    }
}


addEvent(window, 'load', function () {
    var text = document.getElementById('text');
    addEvent(text, 'contextmenu', function (evt) {
        var e = evt || window.event;
        preDef(e);
        var menu = document.getElementById('menu');
        menu.style.left = e.clientX + 'px';
        menu.style.top = e.clientY + 'px';
        menu.style.visibility = 'visible';
        addEvent(document, 'click', function () {
            document.getElementById('myMenu').style.visibility = 'hidden';
        });
    });
});

10.js中的文档模式-document.compatMode

文档模式在开发中貌似很少用到，最常见的是就是在获取页面宽高的时候，比如文档宽高，可见区域宽高等。

IE对盒模型的渲染在 Standards Mode和Quirks Mode是有很大差别的，在Standards Mode下对于盒模型的解释和其他的标准浏览器是一样，但在Quirks Mode模式下则有很大差别，而在不声明Doctype的情况下，IE默认又是Quirks Mode。所以为兼容性考虑，我们可能需要获取当前的文档渲染方式。

document.compatMode正好派上用场，它有两种可能的返回值：BackCompat和CSS1Compat。
BackCompat：标准兼容模式关闭。浏览器客户区宽度是document.body.clientWidth;
CSS1Compat：标准兼容模式开启。 浏览器客户区宽度是document.documentElement.clientWidth。
例如：

function getViewport(){
　　　　if (document.compatMode == "BackCompat"){
　　　　　　return {
　　　　　　　　width: document.body.clientWidth,
　　　　　　　　height: document.body.clientHeight
　　　　　　}
　　　　} else {
　　　　　　return {
　　　　　　　　width: document.documentElement.clientWidth,
　　　　　　　　height: document.documentElement.clientHeight
　　　　　　}
　　　　}
　　}

11.跨浏览器获取Style

function getStyle(element, attr) {
    if (typeof window.getComputedStyle != 'undefined') {//W3C
        return window.getComputedStyle(element, null)[attr];
    } else if (typeof element.currentStyle != 'undeinfed') {//IE
        return element.currentStyle[attr];
    }
}

12.js动态插入css相关styleSheets，insertRule，addRule，还有删除样式：deleteRule，removeRule

标准浏览器支持 insertRule， IE低版本则支持 addRule。

13.获取页面的宽高

window.innerWidth，window.innerHeight与document.documentElement.clientWidth，document.documentElement.clientHeight

注：用jquery获取的页面的宽度页面不包括滚动条的宽度的

window.innerWidth与window.innerHeight（IE9及以上，谷歌，火狐识别，宽高包含滚动条的宽度）
document.documentElement.clientWidth与document.documentElement.clientHeight（IE，火狐，谷歌都能识别，宽高不包含滚动条的宽度）
如果页面没有滚动条:
window.innerWidth==document.documentElement.clientWidth，
window.innerHeight==document.documentElement.clientHeight（IE8及一下不识别window.innerHeight与window.innerWidth）

//跨浏览器获取视口大小
function getInner() {
    if (typeof window.innerWidth != 'undefined') { //IE8及以下undefined
        return {
            width : window.innerWidth,
            height : window.innerHeight
        }
    } else {
        return {
            width : document.documentElement.clientWidth,
            height : document.documentElement.clientHeight
        }
    }
}

14.使用localStorage存储数据，存储位置在哪里？

这个是浏览器隔离的，每个浏览器都会把localStorage存储在自己的UserData中，如chrome一般就是

C:\Users\你的计算机名\AppData\Local\Google\Chrome\User Data\Profile\Local Storage
如果要在浏览器查看，打开调试工具，在application选项卡下可以查看。

15.js构造对象问题

function Person {}
Person.prototype.test = function() {} 

当代码 new Person(...) 执行时：
一个新对象被创建。它继承自Person.prototype.构造函数 Person 被执行。执行的时候，相应的传参会被传入，同时上下文(this)会被指定为这个新实例。
new Person()与new Person这两种写法有相同的效果。
new Person 等同于 new Person(), 只能用在不传递任何参数的情况。

16.html5的拖拽，用了preventDefault防止弹出新页面，ie有效，但在火狐下不管用？

<p id="p" draggable="true" ondragstart="dragStart(event)">sss</p> //ps:不加红显示不了p标签。
<div ondragover="dragOver(event)" style="width:100%;height:50px;"></div>
<script>
function dragOver(e){
stopDefault(e);
}
function stopDefault(e) {
var event = e||window.event;
if (event.preventDefault) {
event.preventDefault();
} else {
event.returnValue = false;
}
}
</script>

解决方式：
在body设置ondrop

document.body.ondrop = function (event) {
        event.preventDefault();
        event.stopPropagation();
}

问题地址：https://segmentfault.com/q/1010000004689615

17.使用ajaxfileupload.js进行文件上传，后台成功执行，前台却进入error

问题描述：使用ajaxfileupload.js进行文件上传，后台正确执行，并返回了对应的响应值，但是前台进入error，返回值自动加上了<pre>标签

ajaxfileupload不支持响应头ContentType为application/json设置，不支持原因可能是为了浏览器兼容，因为ie不支持application/json格式,另外firefox, chrome浏览器iframe在接收application/json格式的时候会自动将其转化为html格式，自动在json数据前后加上<pre></pre>标签导致ajaxfileupload插件取json数据错误

问题地址：https://segmentfault.com/q/1010000004292314

18.网页中的背景图怎样让他加载的更快？

描述：网页中很多地方有背景图，但网页打开时，他才一点一点的显示，怎样让它快速的显示？在网页制作过程中，怎样优化有图片的地方？

1. 用 jpeg，设置压缩率
2. 图片切片，组合成一张大图
3. 用 CDN 加速

问题地址：https://segmentfault.com/q/1010000003847764

19.([] + {}).length ?

[] + {} 运算，首先是调用对象的 valueOf 方法，如果返回一个基本类型，则以该基本类型参与运算；否则调用 toString 方法，返回基本类型则参与运算。

数组和对象的 valueOf（默认）返回自身，因此不是基本类型，接着调用 toString，空数组返回空字符串，普通对象始终返回字符串 [object Object]。故视为两个字符串的拼接，结果为字符串 [object Object]，其长度为 15。

一个例外是 Date 的实例，其实例首先调用 toString ，接着才调用valueOf。
可以这样验证：
([]).toString() // ""
({}).toString() // "[object Object]"
([]+{}) // "[object Object]"

问题地址：https://segmentfault.com/q/1010000003824450

20.js对Date对象的操作的问题

使用JavaScript生成一个倒数7天的数组。
比如今天是10月1号，生成的数组是["9月25号","9月26号","9月27号","9月28号","9月29号","9月30号","10月1号"]。

Date 的 setDate() 可以给 0 和负数作为参数，日期会自动计算

var today = new Date();
var dates = [today];

for (var i = 1; i < 7; i++) {
    var d = new Date(today);
    d.setDate(d.getDate() - i);
    dates.unshift(d);
}

console.log(dates);

[Fri Sep 25 2015 09:58:23 GMT+0800 (中国标准时间),
 Sat Sep 26 2015 09:58:23 GMT+0800 (中国标准时间),
 Sun Sep 27 2015 09:58:23 GMT+0800 (中国标准时间),
 Mon Sep 28 2015 09:58:23 GMT+0800 (中国标准时间),
 Tue Sep 29 2015 09:58:23 GMT+0800 (中国标准时间),
 Wed Sep 30 2015 09:58:23 GMT+0800 (中国标准时间),
 Thu Oct 01 2015 09:58:23 GMT+0800 (中国标准时间)]

如果要取得格式化后的日期

var today = new Date();
var dates = [today];

for (var i = 1; i < 7; i++) {
    var d = new Date(today);
    d.setDate(d.getDate() - i);
    dates.unshift(d);
}

dates = dates.map(function(d) {
    return (d.getMonth() + 1) + "月" + d.getDate() + "日";
});

console.log(dates);

结果：

["9月25日",
 "9月26日",
 "9月27日",
 "9月28日",
 "9月29日",
 "9月30日",
 "10月1日"]

问题地址：https://segmentfault.com/q/1010000003811778

21.用闭包保存状态

和普通function执行的时候传参数一样，自执行的函数表达式也可以这么传参，因为闭包直接可以引用传入的这些参数，利用这些被lock住的传入参数，自执行函数表达式可以有效地保存状态。

// 这个代码是错误的，因为变量i从来就没背locked住
// 相反，当循环执行以后，我们在点击的时候i才获得数值
// 因为这个时候i操真正获得值
// 所以说无论点击那个连接，最终显示的都是I am link #10（如果有10个a元素的话）

var elems = document.getElementsByTagName('a');

for (var i = 0; i < elems.length; i++) {

    elems[i].addEventListener('click', function (e) {
        e.preventDefault();
        alert('I am link #' + i);
    }, 'false');

}

// 这个是可以用的，因为他在自执行函数表达式闭包内部
// i的值作为locked的索引存在，在循环执行结束以后，尽管最后i的值变成了a元素总数（例如10）
// 但闭包内部的lockedInIndex值是没有改变，因为他已经执行完毕了
// 所以当点击连接的时候，结果是正确的

var elems = document.getElementsByTagName('a');

for (var i = 0; i < elems.length; i++) {

    (function (lockedInIndex) {

        elems[i].addEventListener('click', function (e) {
            e.preventDefault();
            alert('I am link #' + lockedInIndex);
        }, 'false');

    })(i);

}

// 你也可以像下面这样应用，在处理函数那里使用自执行函数表达式
// 而不是在addEventListener外部
// 但是相对来说，上面的代码更具可读性

var elems = document.getElementsByTagName('a');

for (var i = 0; i < elems.length; i++) {

    elems[i].addEventListener('click', (function (lockedInIndex) {
        return function (e) {
            e.preventDefault();
            alert('I am link #' + lockedInIndex);
        };
    })(i), 'false');

}

22.各浏览器的navigator.userAgent

IE11：Mozilla/5.0 (Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; .NET4.0C; .NET4.0E; rv:11.0) like Gecko
IE10：Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; .NET4.0C; .NET4.0E)
IE9： Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; .NET4.0C; .NET4.0E)
IE8： Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; .NET4.0C; .NET4.0E)
谷歌：Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.106 Safari/537.36
火狐：Mozilla/5.0 (Windows NT 6.1; WOW64; rv:48.0) Gecko/20100101 Firefox/48.0
QQ浏：Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/47.0.2526.80 Safari/537.36 Core/1.47.933.400 QQBrowser/9.4.8699.400
360js:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/45.0.2454.101 Safari/537.36
360jr:Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; .NET4.0C; .NET4.0E)
safar:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/534.57.2 (KHTML, like Gecko) Version/5.1.7 Safari/534.57.2

23.向一个数组中插入元素

向数组结尾添加元素用push()很简单，但下面有一个更高效的方法：

例如：

var arr = [1,2,3,4,5];
var arr2 = [];

arr.push(6);
arr[arr.length] = 6;

最快的为：
1.arr[arr.length] = 6; // 平均 5 632 856 ops/sec
2.arr.push(6); // 慢35.64%
3.arr2 = arr.concat([6]); // 慢62.67%

向数组的头部添加元素现在我们试着向数组的头部添加元素：

var arr = [1,2,3,4,5];

arr.unshift(0);

[0].concat(arr);

注：这里有一些小区别，unshift操作的是原始数组，concat返回一个新数组

最快的为：

1. [0].concat(arr); // 平均6 032 573 ops/sec
2. arr.unshift(0); // 慢78.65%

向数组中间添加元素，使用splice可以简单的向数组中间添加元素，这也是最高效的方法：

var items = ['one', 'two', 'three', 'four'];
items.splice(items.length / 2, 0, 'hello');

参考地址：http://www.cnblogs.com/rubylouvre/p/5751564.html

24.360的渲染模式

360能选择极速模式和兼容模式 但我想要像淘宝那样

只能是极速模式,不能切换至兼容模式

网友的回复：我查了很多时间,只找到<meta name="renderer" content="webkit"> 默认是极速模式渲染,但是这样还是能够切换的,我需要不能切换。
我在开发中也遇到过这个问题，就是当我们的项目用IP访问，用360查看默认是兼容模式，盆友们是不是也遇见过呢？
问题地址：https://segmentfault.com/q/10...

25.纯css 实现footer sticker

希望footer一直在页面底部
html代码：

<!--主体内容-->
<div id="sticker">
    <div id="stickerCon"></div>
</div>

<!--底部内容-->
<div id="footer">footer</div>

css代码：

html, body,#sticker {height: 100%;}
body > #sticker {height: auto; min-height: 100%;}
#stickerCon {padding-bottom: 40px;} 
#footer {
    margin-top:-41px;
    height: 40px; 
    width: 100%; 
    text-align: center;
    line-height: 40px;
    color: #ABA498;
    font-size: 12px;
    background: #fafafa;
    border-top:1px solid #E7E7E7;
}

原文地址：https://segmentfault.com/a/11...

26.js中的pixelTop属性

style对象：

pixelLeft
pixelTop
pixelWidth
pixelHeight

返回以像素为单位的位置坐标的数值,非像素单位转换为像素单位显示。

left
top
width
height

返回带单位的位置坐标字符串

27.TweenMax.js用法总结

1.yoyo:Boolean -- YOYO球。另外一种循环的方式，像我们玩的YOYO球一样，从头到尾，再从尾到头的往返运动，PS：要与repeat同时设置

2.repeat:int -- 循环次数。设置为-1为无限循环

28.window.location属性

window.location 对象所包含的属性

属性	描述
hash	从井号 (#) 开始的 URL（锚）
host	主机名和当前 URL 的端口号
hostname	当前 URL 的主机名
href	完整的 URL
pathname	当前 URL 的路径部分
port	当前 URL 的端口号
protocol	当前 URL 的协议
search	从问号 (?) 开始的 URL（查询部分）

protocol 属性是一个可读可写的字符串，可设置或返回当前 URL 的协议。

语法：

location.protocol=path

实例：假设当前的 URL 是: http://example.com:1234/test.htm#part2：

<script type="text/javascript">
document.write(location.protocol);
</script>

输出：http:

29.正则表达式中的RegExp.$1

RegExp 是javascript中的一个内置对象。为正则表达式。
RegExp.$1是RegExp的一个属性,指的是与正则表达式匹配的第一个子匹配(以括号为标志)字符串，以此类推，RegExp.2, RegExp.3, ..RegExp.$99总共可以有99个匹配。

例如：

var r= /^(\d{4})-(\d{1,2})-(\d{1,2})$/; //正则表达式 匹配出生日期(简单匹配)    
r.exec('1985-10-15');
s1=RegExp.$1;
s2=RegExp.$2;
s3=RegExp.$3;
console.log(s1+" "+s2+" "+s3)//结果为1985 10 15

30.js中的Navigator对象

Navigator 对象包含有关浏览器的信息。

注释：没有应用于 navigator 对象的公开标准，不过所有浏览器都支持该对象。

Navigator 对象属性：

属性	描写
appCodeName	返回浏览器的代码名。
appMinorVersion	返回浏览器的次级版本。
appName	返回浏览器的名称。
appVersion	返回浏览器的平台和版本信息。
browserLanguage	返回当前浏览器的语言。
cookieEnabled	返回指明浏览器中是否启用 cookie 的布尔值。
cpuClass	返回浏览器系统的 CPU 等级。
onLine	返回指明系统是否处于脱机模式的布尔值。
platform	返回运行浏览器的操作系统平台。
systemLanguage	返回 OS 使用的默认语言。
userAgent	返回由客户机发送服务器的 user-agent 头部的值。
userLanguage	返回 OS 的自然语言设置。

在谷歌浏览器中打印Navigator对象，如图所示：

31.markdown语法经常遗忘操作记录

删除线：~~ ~~包裹的文字会显示删除线 删除线