html5中有哪些api

这篇文章主要介绍了html5中有哪些api,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。

创新互联主要从事网站设计、成都网站建设、网页设计、企业做网站、公司建网站等业务。立足成都服务肇东,十年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:13518219792

html5的api有:1、requestAnimationFrame;2、客户端存储;3、历史记录(History);4、worker;5、file Reader;6、websocoket等等。

本教程操作环境:windows7系统、HTML5版、Dell G3电脑。

一、requestAnimationFrame(请求动画关键帧)

1.1  requestAnimationFrame怎么使用?

铺垫:

先看一下,我们平时在JS中是怎么让一个元素产生动画效果的。

我们平时都是用定时器来设置多长时间后发生什么动画,或者位移




    
    

html5中有哪些api

我们可以看到,用JS定时器就可以实现动画效果

但是,JS定时器会有一个缺点

html5中有哪些api

浏览器的重绘是每1s  ——》 60次,所以大约为16ms重绘一次

如果我们像上面执行的一样,每隔10ms就增加 left50px 。页面就会造成关键帧丢失

html5中有哪些api

requestAnimationFrame:(优化后)





    
    

html5中有哪些api

1.2  requestAnimationFrame与setTImeout的区别?

setTimeout 是以 n 毫秒后执行回调函数,回调函数中可以递归 调用 setTimeout 来实现动画。

.demo {
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            left: 0;
        }
    



    
    

html5中有哪些api

使用 requestAnimationFrame 执行动画,最大优势是能保证回调函数在屏幕每一次刷 新间隔中只被执行一次,这样就不会引起丢帧,动画也就不会卡顿。

.demo {
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            left: 0;
        }
    



    
    

html5中有哪些api

1.3  requestAnimationFrame的优势

html5中有哪些api

二、客户端存储

2.1  Storage: 不会传到服务器

2.1.1 Storage 如何使用  掌握方法

html5中有哪些api

存储对象:

html5中有哪些api

html5中有哪些api

取出对象:

html5中有哪些api

储存数组:

html5中有哪些api

html5中有哪些api

取出数组:

html5中有哪些api

API    localstorage sessionStorage  共同适用

html5中有哪些api

设置,获得

html5中有哪些api

移除属性(指定个别属性)

html5中有哪些api

清除所有已设置的属性

html5中有哪些api

2.1.2  localstorage sessionStorage cookie区别

localstorage:

存储信息到用户的设备上,一般为5MB

永久存储,除非手动清除

会存储到同域下

sessionStorage:

存储信息到用户的设备上,一般为5MB

临时存储,页面关闭就会清除

不会存储到同域下

cookie:

存储信息到用户的设备上,数据量较小  4k

navigator.cookieEnabled  检查是否启用了cookie

html5中有哪些api

三、历史记录

BOM中的 History对象方法

现在已知我有三个标签页(从红色小方块开始)

html5中有哪些api

3.1history.length   长度

通过调用这个方法就可以知道,当前历史记录里面有几条数据(几个网页)

html5中有哪些api

3.1history.back()   回退

当前位置在第三页(淘宝页面),回退一页就会跳转到第二页(百度页面)

html5中有哪些api

3.2 history.forward()   前进

当前在红色小方块当前页,前进一页就会跳转至第二页(百度页面)

html5中有哪些api

3.3 history.go(n)     跳转至指定页

当前在红色小方块页面即为第0页,go(2)就会跳转至第三页(淘宝页面)

html5中有哪些api

当前在淘宝页面即为第三页,go(-2)就会跳转至第一页(红色方块页面)

html5中有哪些api

HTML5中新增的方法   此方法受同源策略限制,需要在服务器下操作

html5中有哪些api

1、pushState   添加一条历史记录

html5中有哪些api

2、replaceState   替换当前的历史记录

html5中有哪些api

html5中有哪些api

1.  popstate 监听页面历史记录一旦发生改变时触发

        history.pushState(null, null, '#a');
        window.addEventListener('popstate', function(e){  //监听 popstate事件 有没有发生改变 
            console.log("历史记录发生改变,我触发了");
        }, false)

html5中有哪些api

应用场景

多应用于搜索,后台管理系统,或者父子页面之间的切换(开发一个页面就够了)

html5中有哪些api





    
    
    
    Document
    



    
    搜索
    
    

2.  hashchange

用于监听hash值的改变触发事件,就是链接 # 这个东西的改变而触发

跟popstate的用法大同小异,都差不多。用途也都是一样的。所以大家可以自己试试

四、worker  (受同源策略限制,需要在服务器下运行)

4.1 了解worker

worker字面意思是工人、雇佣员工的意思。

worker是一种异步执行JS的方式。

4.2 worker应用

   var worker = new worker('worker.js');    
   // worker文件必须和主文件满足同源策略

就是在执行代码前雇佣一名工人(一个JS文件),把数据交给他让他异步执行,执行完了给主人返回回来。

主人可以在执行完代码后,调用解雇工人的方法,就不能继续传数据,

工人可以在执行完代码后,调用辞职方法,就不能继续传数据。

传输数据

postMessage 、onmessage

html5中有哪些api

返回数据

html5中有哪些api

4.3 结束worlker

html5中有哪些api

html5中有哪些api

html5中有哪些api

4.4woker的缺点

(1)同源限制

分配给 Worker 线程运行的脚本文件,必须与主线程的脚本文件同源。

(2)DOM 限制

Worker 线程所在的全局对象,与主线程不一样,无法读取主线程所在网页的 DOM 对象,也无法使用documentwindowparent这些对象。但是,Worker 线程可以navigator对象和location对象。

(3)通信联系

Worker 线程和主线程不在同一个上下文环境,它们不能直接通信,必须通过消息完成。

(4)脚本限制

Worker 线程不能执行alert()方法和confirm()方法,但可以使用 XMLHttpRequest 对象发出 AJAX 请求。

(5)文件限制

Worker 线程无法读取本地文件,即不能打开本机的文件系统(file://),它所加载的脚本,必须来自网络。

4.5 其他特性

html5中有哪些api

4.6主要应用场景

Ajax轮询可以使用,每隔一段时间获取一下数据(用一个定时期每隔一段时间,向后端发送一次请求)

五、fileReader(上传文件,读取中的详细信息)

5.1 fileReader的使用方法

var reader = new FileReader();

html5中有哪些api

 按照不同项目的需求使用不同的方法,在这里我们就用这里面的readAsDataURL( )这个方法

我们先来看怎么读取文件,我们需要先把文件发送至服务器,等他给我返回文件的URL地址,然后我拿着URL地址来渲染我的页面

html5中有哪些api

既然我们可以接收到返回的地址,那我们就可以把图片渲染到页面了

html5中有哪些api




    
    
    

html5中有哪些api




    
    
    

html5中有哪些api

 在文件读取中我们可以知道两个值  loaded、total

html5中有哪些api

已知这两个值,我们就可以实现加载进度条了




    
    
    
        
    
    
    

html5中有哪些api

然后我们还可以添加终止读取,就是在文件上传的中途,停止上传

只需要添加一个按钮,和一个点击事件

        btn.onclick = function () {
            reader.abort();
            console.log('终止');
        }

html5中有哪些api

5.2 fileReader 可实现的功能

图片预览、异步向发送服务端发送请求

六、websocket(不受同源策略限制)

websocket是一种网络协议,是在HTTP基础上做了一些优化的协议,与HTTP无直接关系。

6.1  简单回忆HTTP协议

html5中有哪些api

6.2为什么有HTTP还需要websocket呢?

因为HTTP协议有一个缺陷:通信只能由客户端发起

服务器端不能实时的发送最新数据给客户端,

我想要最新的数据怎么办呢? 只能用Ajax轮询(开启一个定时器,每隔一段时间调用请求一次数据)

然而websocket呢只需要发送一次请求,只要服务器有最新数据就会自动给你发送过来,不用再次请求

比如现在做的是一个天气状况的项目,每当天气有变化就会自动更新最新天气状况了

6.3 websocket的特点

html5中有哪些api

6.4 websocket事件

html5中有哪些api

6.5 创建websocket

ws://echo.websocket.org/    是用来测试的地址
    var socket = new WebSocket('ws://echo.websocket.org/');

html5中有哪些api

调用e.data就可以打印出来数据了

html5中有哪些api

我们再来看看close这个方法

html5中有哪些api

6.6 websocket属性

html5中有哪些api

html5中有哪些api

6.7 websocket的优点

客户端与服务器都可以主动传送数据给对方;

不用频率创建TCP请求及销毁请求,减少网络带宽资源的占用,同时也节省服务器资源;

可以只请求一次,就会自动更新返回

感谢你能够认真阅读完这篇文章,希望小编分享的“html5中有哪些api”这篇文章对大家有帮助,同时也希望大家多多支持创新互联,关注创新互联行业资讯频道,更多相关知识等着你来学习!


文章标题:html5中有哪些api
路径分享:http://pwwzsj.com/article/jocpjo.html

其他资讯