web全栈架构师[笔记] — 03 html5新特性

HTML5新特性

一、geolocation

• PC端
  • 精度比较低
  • 通过IP库定位
• 移动端
  • 通过GPS
• window.navigator.geolocation
  • 单次 getCurrentPosition(成功,失败,参数)
    • 参数：
      • enableHighAccuracy 高精度模式——更慢、更费电
      • timeout 超时
      • maximumAge 缓存时间
    • 结果：
      • latitude/longitude 经度/纬度
      • altitude 海拔高度
      • accuracy 精确度
      • altitudeAccuracy 高精度精确度
      • heading 朝向
      • speed 速度
  • 监听 watchPosition

二、video、audio

• video
  • scr
  • autoplay
  • loop
  • poster
  • controls
  • video支持的格式
    • IE wmv、mp4
    • Chrome webq、mp4
    • FireFox ogv、mp4
• audio
  • 支持格式 mp3
• js接口
  • 方法
    • play() 播放
    • pause() 暂停
  • 属性
    • currentTime 当前播放时间 （s）
    • duration 长度（s）
    • volume 音量（0-100）
    • muted 静音（bool）

三、localStorage

• 本地存储：大(5M)/cookie(4K)
  • 1.大：1280倍
  • 2.localStorage不会被发往服务器
  • 3.方便
• localStorage/sessionStorage
  • localStorage 永久存储
  • sessionStorage 会话期存储（浏览器关了就没了）
• localStorage的用法跟json一模一样
  • localStorage.a=xxx 设置
  • localStorage.a 读取
  • delete localStorage.a 删掉
  • for in 遍历
• sessionStorage用法和localStorage一模一样

四、WebWorker

• 浏览器上实现的多进程
• 主机 > 程序 > 进程 > 线程 > 纤程
• 对比：

进程线程对比

	多进程（重）	多线程（轻）
开销	创建、销毁开销大	创建、销毁开销小
安全性	进程之间是隔离	线程之间是共享
资源	每个进程独立资源	同一个进程的所有线程共享资源
共享资源	麻烦	方便
编程难度	低（资源是独享的）	高（资源是共享的）

• 总结：
  • 多进程：性能低，编写简单
  • 多线程：性能高，编写复杂
• Web端：
  • 主进程 UI进程
  • 子进程(工作进程) 看不见的；只能完成计算、数据请求这些操作
• 优点：
  • 1.充分利用资源(多个进程同时工作)
  • 2.防止主进程卡住
• 缺点：
  • 不能执行任何UI操作，子进程只能执行计算型任务
• 结论：WebWorker在工作中用的很少——Web中计算型任务就不多

五、文件操作、拖拽

• 事件
  • 进入 .ondragenter
  • 离开 .ondragleave
  • 悬停 .ondragover
    • 默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。这要通过调用 ondragover 事件的 event.preventDefault() 方法
  • 放置 .ondrop
    • 同悬停阻止默认事件，调用 event.preventDefault() 方法
• FileReader：对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。其中File对象可以是来自用户在一个input元素上选择文件后返回的FileList对象,也可以来自拖放操作生成的 DataTransfer对象,还可以是来自在一个HTMLCanvasElement上执行mozGetAsFile()方法后返回结果
  • 属性
    • error
    • onload
    • readyState
    • result
  • 方法
    • abort()
    • readAsArrayBuffer()：原始二进制数据，用于编辑（不常用）
    • readAsBinaryString()：二进制的文本形式数据，用于上传
    • readAsDataURL()：base64，用于图片
    • readAsText()：文本，用于文本文件
  • 继承
    • EventTarget
  • Events
    • onabort
    • onerror
    • onload
    • onloadstart
    • onloadend
    • onprogress

六、manifest

• 文件是简单的文本文件，它告知浏览器被缓存的内容（以及不缓存的内容）
  • CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
  • NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存
  • FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）
• 参考地址:
  • HTML 5 应用程序缓存

七、canvas

• HTML 5 Canvas 参考手册
• 学习HTML5 Canvas这一篇文章就够了

八、WebSQL/IndexedDB