Js

f上级作用域查询，就看这个是在哪定义的

prototype call和apply

---

slice()就是对应String的substring()版本，它截取Array的部分元素，然后返回一个新的Array：

vararr = ['A','B','C','D','E','F','G'];arr.slice(0,3);// 从索引0开始，到索引3结束，但不包括索引3:

 ['A', 'B', 'C']arr.slice(3);// 从索引3开始到结束: ['D', 'E', 'F', 'G']

注意到slice()的起止参数包括开始索引，不包括结束索引。

如果不给slice()传递任何参数，它就会从头到尾截取所有元素。利用这一点，我们可以很容易地复制一个Array：

vararr = ['A','B','C','D','E','F','G'];varaCopy = arr.slice();aCopy;// ['A', 'B', 'C', 'D', 'E', 'F', 'G']aCopy === arr;// false

---

splice(从几开始,删除几位,添加新的元素)

pop()输出函数 尾部并删除. push()尾部添加

unshift()头部添加, shift()头部移除

JS中DOM

回流 重排 reflow: 当前页面的HTML结构发生改变(add,delete,position....) 浏览器都血药重新的计算一遍最新的DOM结构,冲新的对当前的页面进行render   耗性能~~~JS优化问题 尽量减少回流

重绘:某一个元素的部分样式发生改变了(背景颜色),浏览器只血药重新的渲染当前的元素即可

1.动态生成

优势:把需要动态绑定的内容一个个的追加到页面中,对又来的元素没有任何的影响

弊端:每当创建一个li,我们就添加到页面中. 每次都触发回流

2.字符串拼接

优势:实现吧内容拼接好,最后统一添加到页面当中,只引发一次回流

弊端:拼接后  原先的li 事件效果 消失.

3.文档碎片

var frg = document.createDocumentFragment();

---

数据类型检测

//typeof 检测数据类型

//instanceof 检测某一个实例: 只要在当前实例的原型链上,其检测结果都是true

//constructor 构造函数 作用和instanceof 非常的相似 但是他可以处理基本数据类型

//Object 对象数据的基类  引用数据类型 内置类(函数数据类型 prototype)

//Object.prototype.toString.call()

odiv -- HTMLdivElement.prototype -- HTMLeLEMENT.prototype -- Element.prototype --  Node.prototype -- EventTarget.prototyp -- Object.prototype

function Fn(){}

var ary = new Arry;

Fn.prototype = ary;

var f = new Fn;

f -- Fn.prototype -- Array.prototype -- Object.prototype

在类的的原型链上检测不一定正确

数据类型null和undefined 但是浏览器把这两个类保护起来了,不予许外面访问使用

Object.prototype.toString.call()

Object.prototype.toString 原型上的方法,让方法执行, 并且改变方法中的this关键字的指向

toString的理解:

乍一看应该是转换为字符串,但是某些toString方法不仅仅是转换字符串

Number.toString(2) 转化为字符串

除了

Object.prototype.toString() - [object Object]   //它的作用是返回当前方法的执行主体方法中(this) 所属类的详细信息

var obj = {name: "abc"};

"[object Object]" 第一个object代表当前实例是对项数据类型的 ,第二个Object代表的是obj所属类的是Object

Math.toString() ---[object Math] 第二个Math代表的 this是Math 那么返回Math所属类的是Math

var ary=[];

Object.prototype.toString .call(ary);  -->[object Array]

({}).toString.call()     等同 Object  (类似  [].toString.call     Array)

var reg = /^\[object Array\]$/;

reg.test

---

JS 伪类

.clear {

width: 0;

height:0;

content: "",

overflow:hidden;

clear:both;

}}

获取伪类元素 用 window.getComputedStyle(ele,before/after);

---

定时器 需要手动清除

window.setTimeout(function(){},1000);   //1000ms 后执行对应的方法

window.setInterval(function(){},1000) //每一1000ms执行一次 需要手动清除

设置定时器的时候是有返回值的 返回的结果是以个数字,代表当前是第几个定时器

window.clearTimeout(1,2); //数字代表清除第几个计时器

window.clearInterval();也可以清除

3. var  n=0; var timer = window.setInterval(fucntion(){

n++

if(n===5){

window.clearInterval();

},1000);

递归 :自己执行的时候重新调用自己执行

---

浏览器的滚动条滚动:拖动,鼠标滚轮,键盘上下,pagedown/pageup,点击滚动条的空白处或者箭头,还可以通过JS控制scrollTop的值来实现

跑马灯效果 重复两个 在第一个结束的瞬间 重置(无限重复)

---

JS同步和异步编程

JS中的两种编程思想

JS是单线程的

大多都是同步

异步-->首先规划要做一件事情,但是不是当前立马去执行这件事情.

JS中的四种情况: 定时器,Ajax,事件的绑定,回调函数

window.setTimeout(function(){

n++

},0) //定时器默认都有一个最小的等待事件,谷歌5-6ms,IE10-13ms

任务队列(任务池): 看谁的时间短,就先执行谁

选项卡问题 

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

oLis[i].onclick = function(){ tabChange(i) ;} 因为绑定是异步的 所以点击的时候已经等待了一段时间变为最后一个i. 用闭包

---

图片延迟加载/图片懒加载

作用:保证页面打开的速度(3s内打不开,就算是死亡页面)

原理1)队友首屏内容中的图片:首先给对应的区域一张默认图片站着位置(默认图片需要非常下,一般可以维持在5kb以内),当首屏内容都加载完成后 或者以个延迟时间,我在开始加载真实的图片

2) 对于其他屏中的图片:也是给一个默认图片站位,滚动到区域再加载

扩展:数据的异步加载,开始只把前两屏的数据加载绑定出来,后面的数据不进行处理,当页面滚动到相对应区域的时候在从新请求数据然后绑定渲染数据

网站性能优化:尽量较少向服务器请求的次数 HTTP请求, CSS/JS文件进行合并 ICON图片也进行合并(雪碧图/css sprite) 图片的延迟加载 数据的异步加载 在移动端 如果我做的是以个简单的 宣传页,尽量的吧CSS 和JS写成内嵌式

.banner img{

display: none;

width: 100%;

height: 100%;

}

.banner {

margin: 10px auto;

width: 350px;

height: 200px;

border: 1px solid green;

background:url("img/default.img") no-repeat center #e1e1e1;

}

var banner=document.getElementById("banner"), imgFir = banner.getElementsByTagName("img")[0];

window.setTimeout(function(){

var oImg = new Image;//create a temporary tag

oImg.src=imgFir.getAttribute("trueImg");

oImg.onload = function(){

//onload 当图片能够正常加载

imgFir.scr =  this.src;

imgFir.style.display = 'block';

oImg = null;

}

},500);