Web前端经常使用代码笔记整顿（01）

2019年8月27日 127次阅读来源: 风雨后见彩虹

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.网页中的背景图如何让他加载的更快？

形貌：网页中许多处所有背景图，但网页翻开时，他才一点一点的显现，如何让它疾速的显现？在网页制造过程当中，如何优化有图片的处所？

用 jpeg，设置压缩率
图片切片，组合成一张大图
用 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返回一个新数组

最快的为：

[0].concat(arr); // 均匀6 032 573 ops/sec
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能挑选极速形式和兼容形式但我想要像淘宝那样
《Web前端经常使用代码笔记整顿（01）》

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

网友的复兴：我查了许多时候,只找到<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对象，如图所示：
《Web前端经常使用代码笔记整顿（01）》

31.markdown语法常常忘记操纵纪录

删除线：~~ ~~包裹的笔墨会显现删除线删除线

    原文作者：风雨后见彩虹
    原文地址: https://segmentfault.com/a/1190000003829460
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。