【ECMAScript】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 来执行自身
        }
    }

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天的数组。
比如表达日是2月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能拔取极速形式和包容方式 但我想要像天猫商城那样

ECMAScript 1

只好是极速形式,不可能切换至包容方式

网友的死灰复燃:我查了不可枚举年华,只找到<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.Tween马克斯.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对象,如图所示:

ECMAScript 2

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

删除线:~~ ~~打包的文字会呈现删除线
删除线