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语法常常遗忘操做记录

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