f上級作用域查詢，就看這個是在哪定義的
prototype call和apply
slice()就是對應(yīng)String的substring()版本，它截取Array的部分元素，然后返回一個新的Array：
vararr = ['A','B','C','D','E','F','G'];arr.slice(0,3);// 從索引0開始总寻，到索引3結(jié)束，但不包括索引3:
?['A', 'B', 'C']arr.slice(3);// 從索引3開始到結(jié)束: ['D', 'E', 'F', 'G']
注意到slice()的起止參數(shù)包括開始索引梢为，不包括結(jié)束索引渐行。
如果不給slice()傳遞任何參數(shù)，它就會從頭到尾截取所有元素铸董。利用這一點(diǎn)祟印，我們可以很容易地復(fù)制一個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()輸出函數(shù) 尾部并刪除. push()尾部添加
unshift()頭部添加, shift()頭部移除
JS中DOM
回流 重排 reflow: 當(dāng)前頁面的HTML結(jié)構(gòu)發(fā)生改變(add,delete,position....) 瀏覽器都血藥重新的計算一遍最新的DOM結(jié)構(gòu),沖新的對當(dāng)前的頁面進(jìn)行render ? 耗性能~~~JS優(yōu)化問題 盡量減少回流
重繪:某一個元素的部分樣式發(fā)生改變了(背景顏色),瀏覽器只血藥重新的渲染當(dāng)前的元素即可
1.動態(tài)生成
優(yōu)勢:把需要動態(tài)綁定的內(nèi)容一個個的追加到頁面中,對又來的元素沒有任何的影響
弊端:每當(dāng)創(chuàng)建一個li,我們就添加到頁面中. 每次都觸發(fā)回流
2.字符串拼接
優(yōu)勢:實(shí)現(xiàn)吧內(nèi)容拼接好,最后統(tǒng)一添加到頁面當(dāng)中,只引發(fā)一次回流
弊端:拼接后 ?原先的li 事件效果 消失.
3.文檔碎片
var frg = document.createDocumentFragment();
數(shù)據(jù)類型檢測
//typeof 檢測數(shù)據(jù)類型
//instanceof 檢測某一個實(shí)例: 只要在當(dāng)前實(shí)例的原型鏈上,其檢測結(jié)果都是true
//constructor 構(gòu)造函數(shù) 作用和instanceof 非常的相似 但是他可以處理基本數(shù)據(jù)類型
//Object 對象數(shù)據(jù)的基類? 引用數(shù)據(jù)類型 內(nèi)置類(函數(shù)數(shù)據(jù)類型 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
在類的的原型鏈上檢測不一定正確
數(shù)據(jù)類型null和undefined 但是瀏覽器把這兩個類保護(hù)起來了,不予許外面訪問使用
Object.prototype.toString.call()
Object.prototype.toString 原型上的方法,讓方法執(zhí)行, 并且改變方法中的this關(guān)鍵字的指向
toString的理解:
乍一看應(yīng)該是轉(zhuǎn)換為字符串,但是某些toString方法不僅僅是轉(zhuǎn)換字符串
Number.toString(2) 轉(zhuǎn)化為字符串
除了
Object.prototype.toString() - [object Object] ? //它的作用是返回當(dāng)前方法的執(zhí)行主體方法中(this) 所屬類的詳細(xì)信息
var obj = {name: "abc"};
"[object Object]" 第一個object代表當(dāng)前實(shí)例是對項(xiàng)數(shù)據(jù)類型的 ,第二個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 后執(zhí)行對應(yīng)的方法
window.setInterval(function(){},1000) //每一1000ms執(zhí)行一次 需要手動清除
設(shè)置定時器的時候是有返回值的 返回的結(jié)果是以個數(shù)字,代表當(dāng)前是第幾個定時器
window.clearTimeout(1,2); //數(shù)字代表清除第幾個計時器
window.clearInterval();也可以清除
3. var ?n=0; var timer = window.setInterval(fucntion(){
n++
if(n===5){
window.clearInterval();
},1000);
遞歸 :自己執(zhí)行的時候重新調(diào)用自己執(zhí)行
瀏覽器的滾動條滾動:拖動,鼠標(biāo)滾輪,鍵盤上下,pagedown/pageup,點(diǎn)擊滾動條的空白處或者箭頭,還可以通過JS控制scrollTop的值來實(shí)現(xiàn)
跑馬燈效果 重復(fù)兩個 在第一個結(jié)束的瞬間 重置(無限重復(fù))
JS同步和異步編程
JS中的兩種編程思想
JS是單線程的
大多都是同步
異步-->首先規(guī)劃要做一件事情,但是不是當(dāng)前立馬去執(zhí)行這件事情.
JS中的四種情況: 定時器,Ajax,事件的綁定,回調(diào)函數(shù)
window.setTimeout(function(){
n++
},0) //定時器默認(rèn)都有一個最小的等待事件,谷歌5-6ms,IE10-13ms
任務(wù)隊(duì)列(任務(wù)池): 看誰的時間短,就先執(zhí)行誰
選項(xiàng)卡問題?
for(var i=0;i<oLis.length;i++){
oLis[i].onclick = function(){ tabChange(i) ;} 因?yàn)榻壎ㄊ钱惒降?所以點(diǎn)擊的時候已經(jīng)等待了一段時間變?yōu)樽詈笠粋€i. 用閉包
圖片延遲加載/圖片懶加載
作用:保證頁面打開的速度(3s內(nèi)打不開,就算是死亡頁面)
原理1)隊(duì)友首屏內(nèi)容中的圖片:首先給對應(yīng)的區(qū)域一張默認(rèn)圖片站著位置(默認(rèn)圖片需要非常下,一般可以維持在5kb以內(nèi)),當(dāng)首屏內(nèi)容都加載完成后 或者以個延遲時間,我在開始加載真實(shí)的圖片
2) 對于其他屏中的圖片:也是給一個默認(rèn)圖片站位,滾動到區(qū)域再加載
擴(kuò)展:數(shù)據(jù)的異步加載,開始只把前兩屏的數(shù)據(jù)加載綁定出來,后面的數(shù)據(jù)不進(jìn)行處理,當(dāng)頁面滾動到相對應(yīng)區(qū)域的時候在從新請求數(shù)據(jù)然后綁定渲染數(shù)據(jù)
網(wǎng)站性能優(yōu)化:盡量較少向服務(wù)器請求的次數(shù) HTTP請求, CSS/JS文件進(jìn)行合并 ICON圖片也進(jìn)行合并(雪碧圖/css sprite) 圖片的延遲加載 數(shù)據(jù)的異步加載 在移動端 如果我做的是以個簡單的 宣傳頁,盡量的吧CSS 和JS寫成內(nèi)嵌式
.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 當(dāng)圖片能夠正常加載
imgFir.scr =? this.src;
imgFir.style.display = 'block';
oImg = null;
}
},500);
