ECMAScriptWeb前端常用代码笔记整理(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 来执行自身
        }
    }

5event对象

直接收 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;
}
}

缓解智:在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;
arr2 = arr.concat([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/1010000007801235

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同时设置

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

RegExpjavascript遭之一个置对象。为正则表达式。
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语法经常忘记操作记录

删除线:~~ ~~打包的文字会显示删除线
删除线