-
事件阻止。查看全部
-
事件委托。查看全部
-
js 解釋執(zhí)行
????js解釋引擎:詞法分析->語法分析->語法樹
????詞法分析是將字符流(char stream ) 轉(zhuǎn)換為記號(hào)流(token stream)
????語法分析成AST(語法樹)
????js解析：預(yù)編譯期(預(yù)處理、預(yù)解析、預(yù)編譯)與執(zhí)行期
????預(yù)編譯預(yù)解析，當(dāng)Javascript引擎解析腳本時(shí)，它會(huì)在預(yù)編譯期對(duì)所有聲明的變量和函數(shù)進(jìn)行處理；并且是先預(yù)聲明變量，再預(yù)定義函數(shù)
變量和函數(shù)提升
????先提升變量，再提升函數(shù)
查看全部 -
history
????window.history 屬性指向History對(duì)象，它標(biāo)識(shí)當(dāng)前瀏覽器歷史 瀏覽器歷史記錄是一個(gè)棧數(shù)據(jù)結(jié)構(gòu)(先進(jìn)后出)
????History.back() 后退、History.forward()前進(jìn)、History.go() 跳轉(zhuǎn)
????History.pushState() 向棧里推入數(shù)據(jù)、History.replaceState()向棧里替換數(shù)據(jù)
Location 對(duì)象 window.location和document.location屬性，可以拿到這個(gè)對(duì)象
Location。href:整個(gè)URL
Location.protocol:當(dāng)前URL的協(xié)議，包括冒號(hào)(:)
Location.host:主機(jī)。如果端口不是協(xié)議默認(rèn)的80和433，則不會(huì)包括冒號(hào)(:)和端口
Location.hostname:主機(jī)名，不包括端口。
Location.port:端口號(hào)。
Location.pathname:URL的路徑部分，從根路徑/開始。
Location.search:查詢字符串部分，從問號(hào)？開始。
Location.hash:片段字符串部分，從#開始。
Location.username:域名前面的用戶名。
Location.password:域名前面的密碼。
Location.origin:URL的協(xié)議、主機(jī)名和端口。
查看全部 -
常用阻止默認(rèn)行為的兩種方式：
????常見默認(rèn)行為：
????????????a標(biāo)簽自動(dòng)跳轉(zhuǎn)
????????????input表單自動(dòng)提交
????e.preventDefault()
????
????return false
查看全部 -
事件觸發(fā)
????事件對(duì)象：事件觸發(fā)時(shí)候自動(dòng)創(chuàng)建的，封裝了事件發(fā)生的元素和屬性信息????
????window.event // ie
????e.target // 觸發(fā)元素對(duì)象? ie:e.srcElement
事件捕獲
????addEventListener 第三個(gè)參數(shù)為true，事件處于捕獲階段，默認(rèn)false
????ie沒有捕獲階段
事件冒泡
???? e.stopPropagation()阻止冒泡
????IE:e.cancelBubble=true 阻止冒泡
????利用冒泡（事件委托）
?????????? ? ?????????
查看全部 -
三種事件綁定的異同
????廣義的javascript: ECMAScript+DOM+BOM ,DOM0 DOM1 DOM2
????狹義的javascript：ECMAScript, ES6 ES5 ES3
????htlml事件
????????通過行內(nèi)onClick 添加的事件
????dome0級(jí)事件（事件綁定）
????????通過js代碼給元素onclick屬性賦值
????????????DOM.onclick=function(){
????????????alert('DOM0級(jí)事件')????????????
}
????demo2級(jí)事件(事件監(jiān)聽)
?????????DOM.addEventListener('click',function,bool) // function 事件觸發(fā)的回調(diào)函數(shù) bool:事件處于冒泡階段還是捕獲階段
????????移除：removeEventListener
????? ? 優(yōu)點(diǎn)：可以綁定多個(gè)事件，常規(guī)的事件綁定只執(zhí)行最后綁定的事件
????????js不支持事件重載，綁定事件相當(dāng)于一個(gè)變量存儲(chǔ)的是函數(shù)的地址，如果再綁定一個(gè)事件，相當(dāng)于變量指向另一個(gè)函數(shù)的地址；事件監(jiān)聽相當(dāng)于訂閱發(fā)布者，改變了數(shù)據(jù)，觸發(fā)了事件，訂閱這個(gè)事件的函數(shù)被執(zhí)行。
????????總結(jié)：事件綁定相當(dāng)于綁定到DOM的屬性，重復(fù)綁定會(huì)覆蓋。而事件監(jiān)聽相當(dāng)于添加屬性到DOM對(duì)象，多次監(jiān)聽，就會(huì)多次添加屬性到DOM對(duì)象，所以都會(huì)觸發(fā)，不會(huì)覆蓋。
查看全部 -
深入理解DOM數(shù)加載過程
????1.在瀏覽器中輸入url，交給DNS域名解析，找到IP，向服務(wù)器發(fā)起請(qǐng)求；(里面還有緩存，http協(xié)議，TCP...)
????2. 服務(wù)器返回?cái)?shù)據(jù)，瀏覽器接收文件(html,css,js,img...)，二進(jìn)制文件
????????????html:二進(jìn)制轉(zhuǎn)換為html
?????????????構(gòu)建DOM樹：HTML解析器
????????????????????????????Token->Node->DOM
????????????????????????????Token詞法解析，根是"document"對(duì)象
?????????????????????????????Node:HTMLDivElement
?????????????????????????????DOM:DOM和標(biāo)簽基本是一一對(duì)應(yīng)的關(guān)系div
????????????????解析過程中：
????????????????????????????1.遇到link的外部css，遇到css的代碼會(huì)進(jìn)行css加載，并行解析
????????????????????????????2.遇到script標(biāo)簽的時(shí)候，會(huì)先去執(zhí)行js的內(nèi)容，直至腳本完成執(zhí)行，然后繼續(xù)構(gòu)建DOM；
?????????????????????????????底部引入Javascript代碼的原因。或者說可以在頭部引用，但是前提是加上async、defer,或window.onload:
????????????????????????????????解析器遇到設(shè)置了async屬性的script時(shí)，開始下載腳本并繼續(xù)解析文檔。腳本會(huì)在它下載完成后盡快執(zhí)行，但是解析器不會(huì)停下來等它下載
????????????????????????????????如果script標(biāo)簽設(shè)置了該屬性，則瀏覽器會(huì)異步下載該文件并且不會(huì)影響后續(xù)DOM的渲染；
????????????????????????????????如果有多個(gè)設(shè)置了defer的script標(biāo)簽存在，則會(huì)按照順序執(zhí)行所有的script；
?????????????????????????????????defer腳本會(huì)在文檔渲染完畢后，DOMContentLoaded事件調(diào)用前執(zhí)行；腳本會(huì)被延遲到整個(gè)頁(yè)面都解析完畢后再運(yùn)行
????????????????????構(gòu)建css樹：css解析器
????????????????????????????????????????每個(gè)css文件解析為樣式表對(duì)象scctyleSheet,每個(gè)對(duì)象都包含cssRule,cssRule包含選擇器和聲明對(duì)象，以及其他與css語法對(duì)應(yīng)的對(duì)象。
????????????????????????????????????????Token解析:css的詞法及語法文法
?????????????????????????????????????????Node->CSSOM
????????????????????構(gòu)建render樹：渲染樹=DOM樹+css樹
????????????????????布局layout與繪制paint:計(jì)算對(duì)象之間的大小，距離確定每個(gè)節(jié)點(diǎn)在屏幕上的確切坐標(biāo)；映射瀏覽器屏幕繪制；使用UI后端層繪制每個(gè)節(jié)點(diǎn)
????????reflow(回流)：當(dāng)元素屬性發(fā)生改變且影響布局時(shí)(寬度、高度、內(nèi)外邊距等)，產(chǎn)生回流，相當(dāng)于刷新頁(yè)面
????????repaint(重繪)：當(dāng)元素屬性發(fā)生改變且不影響布局時(shí)(背景顏色，透明度，字體樣式等)，產(chǎn)生重繪，相當(dāng)于不刷新頁(yè)面，動(dòng)態(tài)更新內(nèi)容。
查看全部 -
開發(fā)過程中的編碼和解碼
????escape和unescape、encodeURL和decodeURI、encodeURIComponent和decodeURIComponent
????escape(url)? // 除了ASCII(a-z,0-9),其他的進(jìn)行編碼(對(duì)除了英文字符和數(shù)字其他的字符全部編碼)? js全局函數(shù)
????unescape(url)? // 除了ASCII，其他的進(jìn)行解碼
????encodeURI(url) // 只對(duì)中文進(jìn)行編碼? ?最常用
????decodeURI(url) // 只對(duì)中文進(jìn)行解碼? ios移動(dòng)端會(huì)被轉(zhuǎn)碼，需要解碼
????
????encodeURIComponent?????//該方法不會(huì)對(duì) ASCII 字母和數(shù)字進(jìn)行編碼，也不會(huì)對(duì)這些 ASCII 標(biāo)點(diǎn)符號(hào)進(jìn)行編碼： - _ . ! ~ * ' ( ) 。
其他字符（比如 ：;/?:@&=+$,# 這些用于分隔 URI 組件的標(biāo)點(diǎn)符號(hào)），都是由一個(gè)或多個(gè)十六進(jìn)制的轉(zhuǎn)義序列替換的。
????decodeURIComponent????//????解碼
??????????
實(shí)際應(yīng)用問題
查看全部 -
存儲(chǔ)或者獲取月份時(shí)需要注意的是0-11
????實(shí)際使用中，獲取到的月份返回的數(shù)值需要加1才是實(shí)際的月份?
????js設(shè)計(jì)得時(shí)候 借鑒java1.1 now.getMonth()：0-11?
????工作中需要分析，時(shí)間是從服務(wù)端獲取，還是客戶端獲取
????
查看全部 -
sort是如何排序的
????arr.sort() 默認(rèn)是升序排序
????????????????將排序的元素轉(zhuǎn)為字符串，找對(duì)應(yīng)的字符串Unicode碼表
如何解決sort排序的問題
????
不能對(duì)數(shù)字進(jìn)行排序，解決方案
????????1.定義一個(gè)比較強(qiáng)函數(shù)
????????????????? sort(callback)
????????????????????function(x,y){return x-y} 小于0 升序 大于0 降序
查看全部 -
棧和隊(duì)列
????棧是一種后進(jìn)先出的數(shù)據(jù)結(jié)構(gòu)，也就是說最新添加的項(xiàng)最早被移出；LIFO（后進(jìn)先出）
????隊(duì)列數(shù)據(jù)結(jié)構(gòu)是先進(jìn)先出（FIFO）隊(duì)列在列表的末端添加項(xiàng)，從列表的前端移除項(xiàng)
棧和堆：數(shù)據(jù)的存儲(chǔ)形式
棧和隊(duì)列：數(shù)據(jù)的結(jié)構(gòu)
push，pop,unshift,shift
棧：
????結(jié)尾出入棧：入棧：push()? ?出棧: pop() 效率高
????開頭出入棧：?入棧：unshift()? ?出棧: shift()????效率低
隊(duì)列：
????push進(jìn)shift出
????unshift進(jìn)pop出
?????
查看全部 -
裝箱：把基本數(shù)據(jù)類型轉(zhuǎn)化為對(duì)應(yīng)的引用數(shù)據(jù)類型的操作；
如何實(shí)現(xiàn)：
????var num = 123 // number
????var objNum = new Number(123) // object
拆箱：將引用類型對(duì)象轉(zhuǎn)換為對(duì)應(yīng)的值類型對(duì)象；
如何實(shí)現(xiàn)：
????調(diào)用object.valueOf()方法實(shí)現(xiàn)
????objNum.valueOf() //123?
內(nèi)部如何實(shí)現(xiàn)：
????toPrimitive(input,type) //input:傳入值，type:值類型
????? // input 判斷是不是原始類型的值：如果是，直接返回，
????????如果不是調(diào)用 input.valueOf() 是原始類型，直接返回，
????????還不是:調(diào)用input.toString 直接返回字符串? ?
????????或者報(bào)錯(cuò)
?????valueOf() 是原始類型的值，直接返回，沒有，就返回對(duì)象本身
????toString() input字符串轉(zhuǎn)換；對(duì)象:[object,type] type:對(duì)象類型?
查看全部 -
js常用內(nèi)置對(duì)象
????三種包裝對(duì)象：String,Number,Boolean
????????內(nèi)部做的事情： 1. new 一個(gè)對(duì)應(yīng)的對(duì)象
????????????????????????????????2. 調(diào)用內(nèi)部方法返回一個(gè)新的返回值
????????????????????????????????? 3. 清空new出來的新對(duì)象
????其他常用的標(biāo)準(zhǔn)內(nèi)置對(duì)象：Array,Date,Function,Object...
????????了解里面內(nèi)置的一些方法
查看全部 -
for 循環(huán)性能優(yōu)化
????1.用變量緩存DOM元素
????2.算法層面上的優(yōu)化
查看全部
舉報(bào)