HTML5新特性概述(下)

时间 2019-11-05

标签 html5 html 特性概述栏目 HTML5 繁體版

原文原文链接

本篇的html5新特性是下篇，将把html5上篇没有介绍到的新特性分享出来，OK，下面是正文：javascript

1. 拖放（Drag 和 drop）

拖放是html5提供一个新的特性，这个特性增长了拖拽事件的api,和定义能够拖拽的属性。举个例子，在h5以前实现拖拽功能，其实用的是一种模拟方式，鼠标onmousedown时，获取当前的一些信息，而后在onmousemove时不断更新推拽对象的left和top值，最后在onmouseup时对推拽对象完全赋值，并进行释放后一系列的程序操做。如今h5出来后呢，不在须要模拟了，由于它已经有标准的事件api了，下面看例子： `css

<style type="text/css">
.draggable{width: 120px; height: 120px;text-align: center; line-height: 120px; background-color: #8FBC8F; color: white; border: 5px solid yellowgreen; position: absolute; top: 0;left: 0;}
</style>

<div id="draggable" class="draggable" draggable="true">
		draggable
</div>

        var dragEl = document.getElementById('draggable');
        var l = null, t = null;
		
		dragEl.ondragstart = function (e) { // 准备推拽时
			l = e.clientX - this.offsetLeft, t = e.clientY - this.offsetTop;			
		}

		dragEl.ondrag = function (e) {  // 拖拽进行时
			var x = e.clientX, y = e.clientY;				
			this.style.left = x - l + 'px';
			this.style.top = y - t + 'px';
			console.log(x, y, l , t)
		}
		
		dragEl.ondragend = function (e) {   // 拖拽结束时
			var x = e.clientX, y = e.clientY;			
			this.style.left = x - l + 'px';
			this.style.top = y - t + 'px';
		}
复制代码

`html

注意：拖拽对象必须把draggable属性设置为true，其余开发思惟其实和之前同样的，没有多大差异，只是多了更多的监听事件而已，想要详细了解拖拽的同窗能够去拖放API查看。html5

2. 地理定位

地理定位这个特性，故名思意，就是获取用户位置信息的。经过getCurrentPosition()获取一系列定位信息，getCurrentPosition()有两个回调函数参数，获取地理位置成功的回调和失败的回调。java

`git

navigator.geolocation.getCurrentPosition(successPos)
function successPos (pos){
	console.log('用户定位数据获取成功')
	//console.log(arguments);
	console.log('定位时间：',pos.timestamp)
	console.log('经度：',pos.coords.longitude)
	console.log('纬度：',pos.coords.latitude)
	console.log('海拔：',pos.coords.altitude)
	console.log('速度：',pos.coords.speed)
复制代码

}` 想了解关于更多的地理位置特性的信息能够移步到HTML5 地理定位去查看哦。web

3. 离线存储

HTML5，经过建立 cache manifest 文件，能够建立 web 应用的离线版本。若是要启用应用程序缓存，必须在文档的 <html> 标签中包含 manifest 属性：每一个指定了 manifest 的页面在用户对其访问时都会被缓存。若是未指定 manifest 属性，则页面不会被缓存（除非在 manifest 文件中直接指定了该页面）。 manifest 文件的建议的文件扩展名是：".appcache".请注意，manifest 文件须要配置正确的 MIME-type，即 "text/cache-manifest"。必须在 web 服务器上进行配置api

manifest 文件可分为三个部分：浏览器

CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
NETWORK - 在此标题下列出的文件须要与服务器的链接，且不会被缓存
FALLBACK - 在此标题下列出的文件规定当页面没法访问时的回退页面（好比 404 页面）

下面是个完整的manifest文件： `缓存

CACHE MANIFEST
2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js

NETWORK:
login.asp

FALLBACK:
/html5/ /404.html
复制代码

` 离线存储这个功能，通俗的讲，其实就是把web的资源文件存储起来，我的以为移动端的应用效果会更好一些，毕竟流量贵呀，把一些文件存储起来，这样能够大大的节省流量和服务器的压力，固然一样更多的知识点伙伴们去官网查看吧HTML 5 应用程序缓存。

4. Web 存储

若是说离线存储是对web的资源文件存储，那么web 存储就是对应用程序里的数据作存储了。web存储提供了两个存储方式:

localStorage,没有时间限制的数据存储
sessionStorage,就是网页尚未关闭的状况下的存储，网页窗口关闭，则数据销毁。

在以前，这些都是由 cookie 完成的。可是 cookie 不适合大量数据的存储，由于它们由每一个对服务器的请求来传递，这使得 cookie 速度很慢并且效率也不高。

在 HTML5 中，数据不是由每一个服务器请求传递的，而是只有在请求时使用数据。它使在不影响网站性能的状况下存储大量数据成为可能。对于不一样的网站，数据存储于不一样的区域，而且一个网站只能访问其自身的数据。

localStorage.setItem('key', 'val') // 存储数据

localStorage.getItem('key') // 取数据

localStorage.removeItem('key') // 删除数据

localStorage.clear() // 删除全部数据

localStorage.key(index) // 获取某个索引数据的

sessionStorage.setItem('key', 'val') // 存储数据

sessionStorage.getItem('key') // 取数据

sessionStorage.removeItem('key') // 删除数据 `

注意：localStorage和sessionStorage存储的数据都是字符串类型的数据，取出来的数据也是字符串类型，所以若是存储的对象不是字符串，则要转换成字符串数据类型

5. WebSocket

WebSocket 是 HTML5 开始提供的一种在单个 TCP 链接上进行全双工通信的协议。

WebSocket 使得客户端和服务器之间的数据交换变得更加简单，容许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只须要完成一次握手，二者之间就直接能够建立持久性的链接，并进行双向数据传输。

在 WebSocket API 中，浏览器和服务器只须要作一个握手的动做，而后，浏览器和服务器之间就造成了一条快速通道。二者之间就直接能够数据互相传送。

WebSocket 属性

Socket.readyState 只读属性,表示链接状态：0 - 表示链接还没有创建，1 - 表示链接已创建，能够进行通讯，2 - 表示链接正在进行关闭，3 - 表示链接已经关闭或者链接不能打开。
Socket.bufferedAmount 只读属性,已被 send() 放入正在队列中等待传输，可是尚未发出的 UTF-8 文本字节数。

WebSocket 事件

Socket.onopen 链接创建时触发
Socket.onmessage 客户端接收服务端数据时触发
Socket.onerror 通讯发生错误时触发
Socket.onclose 链接关闭时触发

例子：`

function WebSocketTest()
     {
        if ("WebSocket" in window)
        {
           alert("您的浏览器支持 WebSocket!");
           
           // 打开一个 web socket
           var ws = new WebSocket("ws://localhost:9998/echo");
            
           ws.onopen = function()
           {
              // Web Socket 已链接上，使用 send() 方法发送数据
              ws.send("发送数据");
              alert("数据发送中...");
           };
            
           ws.onmessage = function (evt) 
           { 
              var received_msg = evt.data;
              alert("数据已接收...");
           };
            
           ws.onclose = function()
           { 
              // 关闭 websocket
              alert("链接已关闭..."); 
           };
        }
        
        else
        {
           // 浏览器不支持 WebSocket
           alert("您的浏览器不支持 WebSocket!");
        }
     }
     
     WebSocketTest()
复制代码

` 关于更多的WebSocket你们就去HTML5 WebSocket了解吧。

6. Web Workers

web worker 是运行在后台的 JavaScript，独立于其余脚本，不会影响页面的性能。您能够继续作任何愿意作的事情：点击、选取内容等等，而此时 web worker 在后台运行。关于web worker的应用大概分为三个部分：

一. 建立 web worker 文件，worker文件是一个单独的js文件，写好逻辑后，经过postMessage()方法吧数据发送出去
二. 调用页面建立worker对象，var w = new Worker("worker文件路径").而后经过实例对象调用onmessage事件进行监听，并获取worker文件里返回的数据
三.终止web worker，当咱们的web worker建立后会持续的监听它，须要停止的时候则使用实例上的方法w.terminate()。

下面是个简单的 web worker文件 `

// 这是一个单独的js文件
var i=0;
function timedCount()
{
i=i+1;
postMessage(i); //把数据发送出去
setTimeout("timedCount()",500);
}
timedCount();
复制代码

` 在html页面调用worker文件，并建立worker对象

<div>计数器: <output id="result"></output></div>
<button onclick="startWorker()">开始Worker</button>
<button onclick="stopWorker()">中止Worker</button>

var w;
function startWorker()
{
if(typeof(Worker)!=="undefined")
{
  if(typeof(w)=="undefined")
    {
    w=new Worker("worker.js");    // 建立worker实例对象
    }
  w.onmessage = function (event) {  // 经过onmessage事件接收数据
    document.getElementById("result").innerHTML=event.data;
  };
}
else
{
document.getElementById("result").innerHTML="Sorry, your browser
 does not support Web Workers...";
}
}

function stopWorker()
{
w.terminate();  // 中止worker任务
}
复制代码

` 注意：因为Worker属于外部文件，所以它不能获取javascript这些对象： window 对象，document 对象，parent 对象。

总结

HTML5新特性概述本次用上下俩篇进行了总结和简单的概述，目的就是给你们一个关于html5整体的认识。本次分享就到这里了，喜欢的朋友帮给个赞吧，谢谢。