H5API补充

1. requestAnimationFrame 动画

• 会把每一帧中的所有DOM操作集中起来，在一次重绘或回流中就完成，并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率，一般来说，这个频率为每秒60帧。
• 在隐藏或不可见的元素中，requestAnimationFrame将不会进行重绘或回流，这当然就意味着更少的的cpu，gpu和内存使用量
• 页面刷新前执行一次
• 1000ms 60fps - > 16ms
• 用法和 setTImeout类似

• 不兼容IE10以下浏览器

  1.1 cancelAnimFrame 清除 AnimationFrame

  • 

    2. 存储 window上的属性

• storage 与 cookie

  • cookie
    • 需要通过http传输
    • 受到路径限制
    • 存储量很小

  • storage

    • 存储量大
    • 没有路径限制
    • 不需要通过http传输
    • 
      

      2.1 localstorage 永久存储，除非手动删除

      

  • window.localStorage.name = ‘nihao’

    • 向浏览器appliction下存储数据
  • 
  • window.localStorage.obj = JSON.stringigy(obj);
    • 向浏览器appliction下存储json格式数据
    • 

  • 获取

    • 

      2.2 seesionstorage 临时存储，关闭浏览器消失

  • 

  • 存储和获取都和localStorage相同
• localstorage -> 文档源限制
  • 必须满足同源策略

• seesionstorage -> 文档源限制 + 窗口限制

  • 必须满足同源策略

    3. history window上的属性

• window对象提供了一个history对象，与浏览器历史记录进行交互，该对象包含用户（在浏览器窗口冲访问过的URL）

  • window.history.forward()
    • 控制浏览器前进历史记录
  • window.history.back()
    • 控制浏览器后退历史记录
  • window.history.go(参数)
    • 参数如果是1代表前进一个页面
    • 参数如果是-1后退一个页面
  • window.history.pushState(state, title, url)
    • 添加一条历史记录
    • state
      • 一个与指定网址相关的状态对象，popstate事件触发时，该对象会传入回调函数中
      • 如果不需要这个对象，此处可以填null
    • title
      • 新页面的标题，但是所有浏览器目前都忽略这个值，因此这里可以填null
    • url
      • 新的网址，必须与当前页面处在同一个域
      • 浏览器的地址栏将显示这个网址
  • window.history.replaceState(state, title, url)
    • 替换当前的历史记录

      3. Worker 异步

• 构造函数创建一个 [Worker](https://developer.mozilla.org/zh-CN/docs/Web/API/Worker) 对象，该对象执行指定的URL脚本。

  • let worker = new Worker(‘worker.js’);
  • worker文件必须和主文件同源
  • worker主线程之间的通信
    • worker.postMessage(n)
      • 方法发送数据
    • worker.message
      • 事件接收数据
    • worker.close()
      • 在worker作用域中调用（worker.js）
    • terminate()
      • 在worker 对象下调用（主进程的worker对象上worker.terminate）

        4. geolocation

• window.navigator.geolocation下的接口

  4.1 getCurrentPosition(suc, err, opt)

  • 获取当前的位置信息
  • suuccess 回调（必须）
  • error 回调
  • options 参数
  • 需要翻墙

  • 示例：

    • function suc(ops){console.log(ops)}
    • function err(err) {console.log(err)}
    • let options = { 参数 }
    • window.navigator.geolocation.getCurrentPostion(suc，err)
      • 浏览器弹出获取用户地理位置信息
      • 点击允许，调用suc函数，自动传一个位置信息参数
        • 
        • 
      • 点击拒绝，调用err函数, 自动传一个错误信息
        • 
        • 
      • opstion参数
        • 

          4.2 watchPosition()

  • 监视位置变化，和1参数一样

  • let id = geolocation.watchPostion(fn)

    • 用于注册监听器，在设备的物理位置发生改变时候自动被调用
    • 参数与getCurrentPostion相同

      4.3 clearWatch()

  • 清除位置监视

  • clearWatch（id）清除监听
  • 类似于清除定时器一样

    5. devicemotion 监听加速度变化

• window.addEventListenter(‘deviccemotion’, function (event) {console.log(event)})

  5.1 devicemotion事件所包含的属性 只读

  • accelerationlncludingGravity
    • 包括重心引力，z轴方向加了9.8，在x，y方向上的值两者相同 重力加速度
  • acceleration
    • 重力加速度
    • （需要陀螺仪支持）
  • rotationRate(alpha, beta, gamma)
    • 旋转速率
  • interval
    • 获取时间间隔

      6. drag&drop

• 常用于各种拖动操作中

• 创建可拖动元素

  • 设置可拖拽元素

  • 

    6.1 拖拽相关的事件

  • dragstart

    • 被拖拽元素 开始被拖拽时触发
  • dragent
    • 被拖拽元素，拖拽完成时触发
  • dragenter
    • 目标元素
    • 拖拽元素进入目标元素
  • dragover
    • 目标元素
    • 拖拽元素在目标元素上移动
  • drop
    • 目标元素
    • 被拖拽的元素在目标元素上同时鼠标放开触发的事件
  • 需要阻止dragover的默认行为才会触发drop事件

  • 

    6.2 DragEvent事件对象

  • 传值

    • e.dataTransfer.setData(“data”, e.target.id);
  • 取值
    • e.dataTransfer.getData(“data”);
  • 显示当前拖拽过来的信息
    • e.dataTransfer.files();
  • 把传值的标签，放入到取值的标签中

  • 

    6.3 FileReader

  • 用于读取文件

  • abot（）
    • 终止读取
  • readAsBinaryString(file)
    • 将文件读取为二进制编码
  • readAsDataURL(file)
    • 将文件读取为DataURL编码

  • readAsText(file,[encoding])

    • 将文件读取为arraybutter

      7. 类样式添加

      7.1 classList

  • 添加类样式

  • 
  • 参数
  •