DOM是哪種基本資料結構
樹
DOM節點的attribute和property有何區別
-
property：是一個物件的屬性的修改
-
attribute：是對html標籤屬性的修改
如何檢測瀏覽器的型別/核心/是否移動端
navigator.userAgent
拆解url各部分
location
// URL:http://www.example.com/test.html?key=value＃PART
location.href //返回完整的URL
// https://www.example.com/test.html?key=value＃PART
location.protocol //返回一個URL協議
// https
location.hostname //返回URL的主機名
// www.example.com
location.port //返回一個URL的埠號
// 如果埠號是80,則返回空
location.host //返回一個URL的主機名和埠
// www.example.com(如果埠號是80,則不顯示)
location.pathname //返回的URL路徑名
// test.html
location.search //返回一個URL的查詢部分
// ?key=value
location.hash //返回一個URL的錨部分
// ＃PART
複製程式碼事件
事件級別：
DOM0:element.onclick=()=>{}
DOM2:element.addEventListener('click',()=>{},false)
DOM3:DOM2基礎上增加支援更多事件型別
事件模型：
- 捕獲：從頂層一直往下至目標元素
- 冒泡：從目標元素一直往上至頂層
描述事件流機制
即事件發生順序
捕獲階段=>目標階段=>冒泡階段
自定義事件
new Event()
手寫ajax
var xhr=new XMLHttpRequest()
xhr.open('GET','/api',false);
xhr.onreadystatechange = function(){
if(xhr.readyState==4 && xhr.status==200){
conse.log(xhr.responseText)
}
}
xhr.send(null);
複製程式碼描述cookie，sessionStorage和localStorage的區別
都是本地儲存
cookie本身用於客戶端和伺服器的通訊。儲存量少，約4k。
每次請求都會攜帶，會影響獲取資源的效率。
sessionStoragelocalStorageH5的本地儲存技術，儲存容量大。
sessionStorage一個會話結束後儲存資料會被銷燬
localStorage則不會，不手動清除則能永久儲存
AMD,CMD,CommonJS的區別
-
AMD：require.js，非同步的，依賴前置
-
CMD：swa.js，同步的，就近依賴
-
CommonJS：服務端模組化規範，
module.exports={key:value}匿名輸出（暴露），exports.key=value物件輸出
-
ES6模組化：export/import
詳細原理參考：很全很全的JavaScript的模組講解
跨域
原因：同源策略，cookie、localstorage、indexdb無法讀取、dom無法操作、ajax無法傳送
前後端通訊方式：ajax、websocket、CORS
解決：
- JSONP：網頁動態插入
<script>元素由它向跨源網址發出請求，伺服器收到請求後，將資料放在一個指定名字的回撥函式裡傳回來。只能發get請求 - window.postMessage：window物件新增了一個方法，允許跨視窗通訊
- CORS：跨源資源共享。伺服器配置
- websocket：是HTML5提供的一種在單個 TCP 連線上進行全雙工通訊的協議。
- Nginx反向代理