JS-Web-API

JS-Web-API

• 常说的 JS(浏览器执行的 JS)包含两部分

  1. JS 基础知识(ECMA262 标准)
  2. JS-Web-API(W3C 标准)

• W3C 标准中的关于 JS 的规定：

  1. DOM 操作
  2. BOM 操作
  3. 事件绑定
  4. ajax 请求(包括 http 协议)
  5. 储存

• 页面弹框是 window.alert(123)，浏览器需要做什么？

  1. 定义一个 window 全局变量，对象类型
  2. 给它定义一个 alert 属性，属性值是一个函数

• W3C 的管辖范围

  1. 不管什么变量类型、原型、作用域和异步
  2. 只管定义用于浏览器中 JS 操作页面的 API 的全局变量

DOM 操作(Document、Object、Model)

• 题目

  1. DOM 是哪种基本的数据结构？
     • 树
  2. DOM 操作的常用 API 有哪些？
     • 获取 DOM 节点，以及节点的 property 和 attribute
     • 获取父节点，获取子节点
     • 新增节点，删除节点
  3. DOM 节点的 property 和 attribute 有何区别？
     • property 只是一个 JS 对象的属性的修改
     • attribute 是对 html 标签属性的修改

• 知识点

1. DOM 本质
   浏览器把拿到的html代码，结构化一个浏览器能识别并且JS课操作的一个模型

2. DOM 节点操作

   • 获取 DOM 节点
     document.getElementById 元素
     document.getElementsByTagName 集合
     document.getElementsByClassName 集合
     document.querySelectorAll 集合
   • property
   • attribute

3. DOM 结构操作

   • 新增节点
     createElement
appendChild
   • 获取父元素
     parentElement
   • 获取子元素
     chilidNodes
   • 删除节点
     removeNode

BOM 操作(Browser、Object、Model)

• 题目

  1. 如何检测浏览器的类型？

     var ua = navigator.userAgent
     var isChrome = ua.indexOf('chrome')
     console.log(isChrome)
     

  2. 解析 URL 的各部分

     console.log(location.href)
     console.log(location.protocol)
     console.log(location.host)
     console.log(location.pathname)
     console.log(location.search)
     console.log(location.hash)
     

• 知识点

  1. navigator

     var ua = navigator.userAgent
     var isChrome = ua.indexOf('chrome')
     console.log(isChrome)
     

  2. screen

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

  3. location

     console.log(location.href)
     console.log(location.protocol)
     console.log(location.host)
     console.log(location.pathname)
     console.log(location.search)
     console.log(location.hash)
     

  4. history

     history.back()
     history.forward()
     

事件

• 题目

1. 编写一个通过的事件监听函数
2. 描述时间冒泡流程
   • DOM 树形结构
   • 事件冒泡
   • 阻止冒泡
   • 冒泡的应用
3. 对于一个无限下拉加载图片的页面，如何给每个图片绑定事件
   • 使用代理
     好处：代码简介、减少浏览器内存占用

• 知识点

1. 通过事件绑定

   function bindEvent(elem,type,fn){
     elem.addEventListener(type,fn)
   }
   var a = doument.getElementById('link1')
   bindEvent(a,'click',funtion(e){
     e.preventDefault()
     alert('clicked')
   })
   

   //优化版本
   function bindEvent(elem,type,selector,fn){
     if(fn == null){
       fn = selector
       seletor = null
     }
     elem.addEventListener(type,funtion(e){
       var target
       if(seletor){
         target = e.target
         if(target.matches(selector)){
           fn.call(target,e)
         }
       }else{
         fn(e)
       }
     })
   }
   

2. 事件冒泡

3. 代理

   <div id="div1">
     <a href="#">a1</a>
     <a href="#">a2</a>
     <a href="#">a3</a>
     <a href="#">a4</a>
   </div>
   

   var div1 = doument.getElementById('div1')
   div1.addEventListener('click', function(e) {
     var target = e.target
     if (target.nodeName === 'A') {
       alert(target.innerHTML)
     }
   })
   

Ajax

• 题目

1. 手动编写一个 ajax，不依赖第三方库
2. 跨域的几种实现方式
   • JSONP
   • 服务器端设置 http header

• 知识点

1. XMLHttpRequest

   var xhr = new XMLHttpRequest()
   xhr.open('GET', '/api', false)
   xhr.onreadystatechange = function() {
     //这里的函数异步执行，可参考之前JS基础中的异步模块
     if (xhr.readyState == 4) {
       if (xhr.status == 200) {
         alert(xhr.responseText)
       }
     }
   }
   xhr.send(null)
   

2. 状态码说明
   readyState 说明

   • 0(未初始化)还没有调用 send()方法
   • 1(载入)已调用 send()方法，正在发送请求
   • 2(载入完成)send()方法执行完成，已经接受到全部响应内容
   • 3(交互)正在解析响应内容
   • 4(完成)响应内容解析完成，可以在客户端调用了
     status 说明
   • 2XX-表示成功处理请求，如：200
   • 3XX-需要重定向，浏览器直接跳转
   • 4XX-客户端请求错误，如：404
   • 5XX-服务器端错误

3. 跨域
   3.1 什么是跨域

   1. 浏览器有同源策略，不允许 Ajax 访问其他域接口
   2. 跨域条件：协议、域名、端口，有一个不同就算跨域
      (http:80)(https:443)
   3. 允许跨域的三个标签
      <img>用于打点统计，统计网站可能是其他域
      <link>、<script>可以使用 CDN，CDN 的也是其他域
      <script>用于 JSONP
   4. 跨域注意事项
      所有的跨域秦秋都必须经过信息提供方允许
      如果未经允许即可获取，那是浏览器同源策略出现漏洞

存储

• 题目

1. 请描述以下 cookie，sessionStorage 和 localStorage 的区别
   容量、是否会携带到 ajax(cookie 会)、API 易用性

   1.1 cookie

   • 用于客户端和服务器端通信，有本地储存的功能，需要使用 document.cookie = …封装
     缺点：储存量太小，只有 4KB；所有 http 请求都带着，会影响获取资源的效率；API 简单，需要封装才能用

     1.2 sessionStorage和localStorage

   • HTML5 专门为储存而设计，最大容量 5M

   • API 简单易用:
     localStorage.setItem(key,value);

     localStorage.getItem(key);

   • ios safari 隐藏模式下 localStorage.getItem 会报错，建议统一使用 try-catch 封装