本篇的 html5 新特性是下篇, 将把 html5 上篇没有介绍到的新特性分享出来, OK, 下面是正文:
1. 拖放 (Drag 和 drop)
拖放是 html5 提供一个新的特性, 这个特性增加了拖拽事件的 API, 和定义可以拖拽的属性. 举个例子, 在 h5 之前实现拖拽功能, 其实用的是一种模拟方式, 鼠标 onmousedown 时, 获取当前的一些信息, 然后在 onmousemove 时不断更新推拽对象的 left 和 top 值, 最后在 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 https://wangdoc.com/javascript/events/drag.html 查看.
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') // 删除数据 `
注意: 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 Windows)
- {
- 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 http://www.runoob.com/html/html5-websocket.html 了解吧.
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 这些对象: Windows 对象, document 对象, parent 对象.
总结
HTML5 新特性概述本次用上下俩篇进行了总结和简单的概述, 目的就是给大家一个关于 html5 总体的认识. 本次分享就到这里了, 喜欢的朋友帮给个赞吧, 谢谢.
来源: https://juejin.im/post/5bea349a518825170d1a9db1