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