前端面试准备笔记之JavaScript(05)

01.如何获取浏览器的信息

// navigator
const ua = navigator.userAgent()
const isChrome = ua.indexOf('Chrome')
console.log(isChrome)

02.如何获取屏幕信息 screen

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

03.如何获取地址信息 location

// location
console.log(location.href)  //整个网址 "https://www.imooc.com/u/index/allcourses"
console.log(location.protocol) //获取协议 https:
console.log(location.host) // 域名  www.imooc.com
console.log(location.pathname) // 路径 "/u/index/allcourses"
console.log(location.search) // 参数 "?a=100&b=200"
console.log(location.hash) // 哈希值 "#之后的值"

04.如何获取前进后退信息 history

// history
history.back()  // 后退
history.forward() // 前进
05.sessionStorage 、localStorage 和 cookie 之间的区别

05. 同源策略

• ajax请求时，浏览器要求当前网页和server必须同源(安全)
• 同源：协议、域名、端口,三者必须一致
• 前端：http://a.com:8080 server: https:b.com/api/xxx

06.跨域

协议、域名、端口,三者必须一致，如有一个不同则是跨域。

• script 可以实现JSONP
• 所有的跨域，都必须经过server端允许和配合
• 未经过server端允许就实现跨域，说明浏览器有漏洞，危险信号。

07.promise

• 回调地狱 获取data1，根据data1获取data2，根据data2获取data3....
• promise 解决这一问题

function getData(url) {
    return new Promise((resolve, reject) => {
      $.ajax({
          url,
          success(data){
              resolve(data)
          },
          error(err){
              reject(err)
          }
      })  
    })
}

const url1 = '/data1.json'
const url2 = '/data2.json'
const url3 = '/data3json'

getData(url1).then(data1 =>{
    console.log(data1)
    return getData(url2)
}).then(data2=>{
    console.log(data2)
    return getData(url3)
}).catch(err=>console.error(err)