JS面試：JS-Web-API

時間 2019-11-30

標籤面試 web api 欄目 JavaScript 简体版

原文原文鏈接

題目一

DOM是哪一種基本的數據結構？：樹
DOM操做經常使用的API有哪些
DOM節點的attr和property有何區別

property 和attribute

property：只是一個js對象的屬性的修改css

var obj = {x:100, y:200}
console.log(obj.x)  //100

var p = document.getElementsByTagName('p')[0]
console.log(p.nodeName)  // P 這是字符串

//nodeName就是js對象p的一個property,js對象的標準屬性
複製代碼

Attribute：是對html標籤的屬性的修改html

//attribute 更改的是文檔代碼中的屬性，如style，class,src等
var pList = document.querySelectorAll('p')
var p = pList[0]
p.getAttribute('data-name')
p.setAttribute('data-name', 'imooc')
複製代碼

其實dom操做獲取的就是js的對象，是個對象格式前端

題目二

如何檢測瀏覽器類型
解析url各部分

navigator &screen&location & history

//screen
console.log(screen.width)
console.log(screen.height)

//history
history.back()  //返回
history.forward()  //前進
複製代碼

題目三

編寫一個通用的事件監聽函數
描述時間冒泡過程
對一個無限下拉加載圖片的頁面，如何給每一個圖片綁定事件

代理

` <div id="div1"> <a href="#">a1</a> <a href="#">a2</a> <a href="#">a3</a> <a href="#">a4</a> </div> `
var div1 = document.getElementById('div1')
//根據事件冒泡機制
div1.addEventListener('click', function (e) {
    var target = e.target
    if (target.nodeName === 'A') {
        alert(target.innerHITML)
    }
})
複製代碼

編寫一個通用的事件綁定函數

function bindEvent(elem, type, selector, fn) {
    if (fn == null) {
        fn = selector
        selector = null
    }
    elem.addEventListener(type, function (e) {
        var target
        if (selector){
            //代理
            target = e.target
            //matches判斷dom節點是否和選擇器匹配的
            if (target.matches(selector)){
                fn.call(traget, e)
            }
        }else{
            //不是代理
            fn(e)
        }
            
    })
}

var div1 = document.getElementById('div1')
bindEvent(div1, 'click', 'a', function(e){
    e.preventDefault()
    console.log(this.innerHTML)
})
複製代碼

題目四

手動編寫一個ajax，不依賴第三方庫
跨域的幾種實現方式

手寫一個ajax

var xhr = new XMLHttpRequest()
xhr.open('GET', '/api', false) //false表示是異步請求
xhr.onreadystatechange = function () {
    if (xhr.readystate == 4) {
        if (xhr.status == 200) {
            alert(xhr.responseText)
        }
    }
}
xhr.send(null)
複製代碼

狀態碼說明readyStatenode

0-未初始化，尚未調動send方法webpack

1-載入，已經調用send方法，正在發送請求ios

2-載入完成，send方法執行完成，已經接收到所有響應內容web

3-交互，正在解析響應內容ajax

4-完成，響應內容解析完成，能夠在客戶端調用了npm
狀態碼status說明json

2xx-表示成功處理請求。如200

3xx-表示須要重定向，瀏覽器直接跳轉

4xx-客戶端請求錯誤，如404

5xx-服務端錯誤

什麼是跨域

瀏覽器有同源策略，不容許ajax訪問其餘域接口
跨域條件：協議、域名、端口，有一個不一樣就算跨域

解決跨域的方法

jsonp
服務端設置http header

題目五

請描述下cookie，sessionStorage和localSttorage的區別

cookie

自己用於客戶端和服務端通訊
可是他有本地存儲的功能，因而就被‘借用’
使用document.cookie = ... 獲取和修改便可

cookie用於存儲的缺點

存儲量過小，只有4KB
全部http請求都帶着，會影響到獲取資源的效率
API簡單，須要封裝才能用

localStorage 和 sessionStorage

HTML5專門爲存儲和設計，最大容量5M
API加單易用
localStorage.setItem(key, value), localStorage.getItem(key)
倆區別：

一、localStorage只要不清，會一直存在

二、sessionStorage，是瀏覽器關了，就會清除
ios safari 隱藏模式下，localStorage.getItem 會報錯，統一建議使用try-catch包一下

AMD（異步模塊定義）

require.js
全局define函數
全局require函數
依賴js會自動、異步加載

CommonJS

nodejs模塊化規範，如今被大量用在前端
前端開發依賴的插件和庫，均可以從npm獲取
構建工具的高度自動化，使得使用npm的成本很是低
CommonJS不會異步加載js，而是同步一次性加載出來

AMD和commonjs的使用場景

須要異步加載js，使用AMD
使用npm以後建議使用commonjs

webpack安裝好以後配置webpack.config.js

var path  = require('path') 
var webpack = require('webpack')

module.exports = {
    context:path.resolve(__dirname, './src'),
    //入口文件
    entry: {
        app: './app.js'
    },
    //打包輸出文件
    output: {
        path: path.resoleve(__dirname, './dist'),
        filename: 'bundle.js'
    },
    //文件壓縮
    plugins: [
            new webpack.optimize.UglifyJsPlugin()
    ]
}
複製代碼