HTML5新特性概述(下)

8,567 阅读7分钟

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

1. 拖放(Drag 和 drop)

拖放是html5提供一个新的特性,这个特性增加了拖拽事件的api,和定义可以拖拽的属性。举个例子,在h5之前实现拖拽功能,其实用的是一种模拟方式,鼠标onmousedown时,获取当前的一些信息,然后在onmousemove时不断更新推拽对象的lefttop值,最后在onmouseup时对推拽对象彻底赋值,并进行释放后一系列的程序操作。现在h5出来后呢,不在需要模拟了,因为它已经有标准的事件api了,下面看例子: `

<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';
		}

`

注意:拖拽对象必须把draggable属性设置为true,其他开发思维其实和以前一样的,没有多大差别,只是多了更多的监听事件而已,想要详细了解拖拽的同学可以去拖放API查看。

2. 地理定位

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

`

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 地理定位去查看哦。

3. 离线存储

HTML5,通过创建 cache manifest 文件,可以创建 web 应用的离线版本。如果要启用应用程序缓存,必须在文档的 <html> 标签中包含 manifest 属性:每个指定了 manifest 的页面在用户对其访问时都会被缓存。如果未指定 manifest 属性,则页面不会被缓存(除非在 manifest 文件中直接指定了该页面)。 manifest 文件的建议的文件扩展名是:".appcache".请注意,manifest 文件需要配置正确的 MIME-type,即 "text/cache-manifest"。必须在 web 服务器上进行配置

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') // 删除数据 `

注意:localStoragesessionStorage存储的数据都是字符串类型的数据,取出来的数据也是字符串类型,因此如果存储的对象不是字符串,则要转换成字符串数据类型

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总体的认识。本次分享就到这里了,喜欢的朋友帮给个赞吧,谢谢。