HTML5 中的几个 API

作者: Michael_lpf | 来源:发表于2017-03-07 16:30 被阅读0次

HTML5 中的几个 API
HTML5语音合成Speech Synthesis API简介
前端实现语音合成
2019-10-20
HTML5 第一天
FileReader
（1.1标签变化）HTML5简介
HTML5本地存储localStorage、sessionSto
DOM扩展
浅谈 HTML5 Geolocation

Part 1：Geolocation

Geolocation 简述

HTML5 中的地理位置，是由底层硬件设备提供给浏览器的。
如果用户同意，浏览器就会返回地址。
地理位置一般从经度纬度，GPS，WiFi，IP 地址，用户提供信息等获得。很多设备使用多种组合的方式。

Geolocation 在浏览器中的支持

浏览器对这个 API 的支持很不错👇

Paste_Image.png

检查浏览器是否支持 Geolocation 的代码片段👇

if(navigator.geolocation){
    alert('supported !');
}
else{
    alert('not supported !');
}

两种位置请求

单次定位请求
使用 getCurrentPosition() 方法，它接受一个必选参数和两个可选参数。

navigator.geolocation.getCurrentPosition(updateLocation)

其中，必选参数这个函数最为重要，它只接受一个参数 position 对象。position 对象中包含 coords 和获取位置时的时间戳。
而 Geolocation 编程中核心信息都包含在 position.coords 中
- position.coords.longitude （经度）
- position.coords.latitude （纬度）
- position.coords.accuracy （精确度）
- position.coords.altitude （海拔高度）
- position.coords.heading （行进方向）
- position.coords.speed （速度）
第一个可选参数指定地理位置请求失败时做的事，它接受一个参数 error 对象，错误编号 code 包含在其中：
- 0 (UNKNOW_ERROR)：尝试获取位置信息时发生意外错误
- 1 (PERMISSION_DENIED)：用户拒绝了获取位置信息请求
- 2 (POSITION_UNAVAILABLE)：浏览器无法获取您的位置信息
- 3 (TIMEOUT)：获取位置信息超时
第二个可选参数是一个对象，包含：
- enableHighAccuracy 启动 HTML5 Geolocation 服务的高精确度模式
- timeout 最长获取时间，ms 为单位，默认值为 infinity，也即是无限长。
- maximumAge 获取位置时间间隔，ms 为单位，默认值为 0，也即是每次每次请求都重新计算位置。

看一个完整的🌰

(function(){
    //  检测浏览器支持
    if(navigator.geolocation){
        //  核心方法
        navigator.geolocation.getCurrentPosition(
            updateLocation, 
            errorHandle,
            { timeout: 2000 })
    }
    else{
        alert('not supported !');
    }
}())
//  位置请求成功时的处理
function updateLocation(position) { 
    var latitude = position.coords.latitude,
        longitude = position.coords.longitude, 
        accuracy = position.coords.accuracy, 
        altitude = position.coords.altitude, 
        heading = position.coords.heading, 
        speed = position.coords.speed; 

    alert('纬度'+latitude);
    alert('经度'+longitude);
    alert('准确度'+accuracy);
    alert('海拔高度'+altitude);
    alert('行进方向'+heading);
    alert('速度'+speed);
}
//  位置请求失败时的处理
function errorHandle(error){
    switch(error.code){
        case 0: alert('尝试获取您的位置信息时发生错误');
            break;      
        case 1: alert('用户拒绝了获取位置信息请求');
            break;      
        case 2: alert('浏览器无法获取您的位置信息');
            break;      
        case 3: alert('获取您位置信息超时');
            break;
    }
}

多次定位请求
使用 watchPosition() 方法，持续监听地理位置。
它的用法和 getCurrentPosition 完全相同。
并添加了 clearWatch() 控制停止监听👇

var watch = navigator.geolocation.watchPosition(
        updateLocation, errorHandle,
        { timeout: 3000 }
    );
navigator.geolocation.clearWatch(watch);

👆 clearWatch() 和停止计时器的用法类似。

Part 2：Web Worker

Web Worker 简述

一句话概括，Web Worker 就是用作多线程编程的。使 JavaScript 具备一定的后台处理能力。
让主线程处理页面交互，耗时长的任务（比如大量的数据处理）留给 Web Worker。
浏览器对其支持较好 👇

Paste_Image.png

创建一个 Web Worker

使用 new Worker() 新建一个 Web Worker，异步引入并执行 worker.js 👇

var worker = new Worker("worker.js");

worker.postMessage("msg from prime");

worker.onmessage = function(event){
    console.log(event.data);
}

👆 主进程通过 postMessage() 与 Worker 通信，但不能传递函数。
通过 onmessage 事件监听，接收 Worker 传递回的信息。这样父进程就可以在 Worker 完成任务后做响应的业务处理（比如更新 DOM 等）。
onmessage 的回调函数，接受一个 event 对象作参数，它包含两个属性：

target 指向发送信息的 Worker，在多个 Worker 时候很有用。
data Worker 发回的数据内容。

Worker

Worker 本身没什么特别。
同样使用 onmessage 监听主线程发送的信息，使用 postMessage() 发出信息。

this.onmessage = function(event){
    console.log(event.data);
    postMessage('msg from worker');
}

终止 Worker

Worker 是很占资源的，在其完成任务后，我们可能希望终止它来释放内存 👇

this.close();

也可以在主进程中终止它 👇

worker.terminate();

💡 被终止的 Worker 就不等再启动了。

做不到的和做得到的

Worker 中不能访问 window,document 等重要对象，也许是因为不想让多个线程参与到 DOM 更新中造成麻烦。
但可以访问 XMLHttpRequest，localStorage，sessionStorage，
还可以使用很多函数入如：setTimeout()，setInterval()，navigator() 等。

this.onmessage = function(event){
    console.log(event.data);
    //  错误
    document.getElementByTagName('body');
    //  正确
    setTimeout(function(){
        postMessage('msg from worker')
    }, 3000);
}

一个完整的🌰

//  webworker.html
<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript">
        // 发送信息给 Worker
        function postMsg(){
            worker.postMessage('Hi there !');
        }
        // 接收 Worker 的信息
        function msgHandler(event){
            console.log(event.data);
        }
        // 错误处理
        function errHandler(event){
            console.log(event.message);
        }
        // 终止进程
        function stopWorker(){
            console.log('worker terminated !');
            worker.terminate();
        }
        // 启动
        function initDemo(){
            // 浏览器支持检查
            if(typeof(Worker) !== 'undefined'){
                worker = new Worker('worker.js');
                worker.onmessage = msgHandler;
                worker.onerror = errHandler;
                document.getElementById('postBtn').onclick = postMsg;
                document.getElementById('stopBtn').onclick = stopWorker;
            }
        }
        window.onload = initDemo;
    </script>
    <title>WebWorker</title>
</head>
<body>
    <button id="postBtn">Post</button>
    <button id="stopBtn">Stop</button>
</body>
</html>

//  worker.js
this.onmessage = function(event){
    console.log(event.data);
    postMessage('Hi there back !')
}

Part 3：拖拽

简述

HTML5 之前，拖拽元素的功能需要大量的 mousedown、mouseup、mouseover 和大量的代码来实现。
HTML5 中，定义了拖拽 API ，现在拖拽页面个中的东西变得方便多了。
在 PC 端的支持还可以👇

Paste_Image.png

实现拖拽的几个核心 API

draggable：标记一个元素的可拖拽性
首先要在希望被拖拽的元素中添加 draggable 属性并设置 true👇

<img draggable="true">

ondragstart：拖拽开始时触发的事件
在 ondragstart 事件非常重要，因为它是唯一支持 dataTransfer.setData() 传递信息的事件。
ondragover：拖拽元素进入目标区域触发的事件。这个事件是拖拽中必须制定的。要在其中阻止默认事件发生 preventDefault() ，否则拖拽功能是无法实现的。
ondrop：拖拽元素在目标区域中释放触发的事件。拖拽的一些收尾工作一般在这里处理。
ondragend：拖拽完成后触发的事件。
dataTransfer：用来传递信息的媒介。在拖拽中，我们一般在 ondragstart 事件中通过 dataTransfer 来传递被拖拽的元素的 ID 值给 ondrop 事件。

一个拖拽图片的🌰

//  drag.html
<!DOCTYPE HTML>
<html>
<head>
    <title>HTML5实现拖拽操作</title>
    <meta charset="utf-8"/>
    <style>
        .album
        {
            border: 3px dashed #ccc;
            float: left;
            margin: 10px;
            min-height: 100px;
            padding: 10px;
            width: 220px;
            height: 160px;
        }
        img{
            width:60px;
            height: 40px;
            margin: 4px;
        }
    </style>
</head>
<body">
    <div id="info">
        <h2>可将照片直接拖到垃圾箱中</h2>
    </div>
    <div id="album" class="album">
        <h2>相册</h2>
        ![](img/01.jpg)
        ![](img/02.jpg)
        ![](img/03.jpg)
    </div>
    <div id="trash" class="album">
        <h2>垃圾箱</h2>
    </div>

    <script type="text/javascript" src="drag.js"></script>
</body>
</html>

//  drag.js
(function init(){
    var info = document.getElementById('info'),
        album = document.getElementById('album'),
        target = document.getElementById('trash');

    album.ondragstart = function(e){
        var imgId = e.target.id;
        e.dataTransfer.setData('text', imgId);
        info.innerHTML = '<h2>图片可移至垃圾箱</h2>'
    }
    document.ondragend = function(e){
        info.innerHTML = '<h2>可将照片直接拖到垃圾箱中</h2>';
    }
    target.ondragover = function(e){
        info.innerHTML = '<h2>释放鼠标，将图片放入垃圾箱</h2>'
        e.preventDefault();
    }
    target.ondrop = function(e){
        var draggedId = e.dataTransfer.getData('text'),
            oldEle = document.getElementById(draggedId);
        oldEle.parentNode.removeChild(oldEle);
        target.appendChild(oldEle);
    }
}())

[完]

HTML5 中的几个 API
Part 1：Geolocation Geolocation 简述 HTML5 中的地理位置，是由底层硬件设备提供...
HTML5语音合成Speech Synthesis API简介
一、关于HTML5语音Web Speech API HTML5中和Web Speech相关的API实际上有两类，一...
前端实现语音合成
HTML5语音Web Speech API HTML5中和Web Speech相关的API实际上有两类，一类是“语...
2019-10-20
HTML5 File API 在 HTML5 的 input 标签中，新增了一个 type=file 属性的表单控...
HTML5 第一天
-What is HTML5 定义 HTML5 ≈ HTML↑ + CSS↑ + JavaScript API↑ ...
FileReader
HTML5 FileReader API
（1.1标签变化）HTML5简介
What is HTML5 定义 HTML5 ≈ HTML↑ + CSS↑ + JavaScript API↑ H...
HTML5本地存储localStorage、sessionSto
-HTML5 的本地存储 API 中的 localStorage 与 sessionStorage 在使用方法上是...
DOM扩展
DOM扩展 Selectors API和HTML5 Selctor API querySelector() que...
浅谈 HTML5 Geolocation
Geolocation API HTML5 中，window.navigator 对象新增了一个 geolocat...