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="#">a1a>
      <a href="#">a2a>
      <a href="#">a3a>
      <a href="#">a4a>
    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. 允许跨域的三个标签
      用于打点统计,统计网站可能是其他域

你可能感兴趣的:(JS,前端)