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);
