zoukankan      html  css  js  c++  java
  • 关于HTML(一)---------HTML5新特性2

    (六)、地理定位

     简单地用一句话概括就是,使用js获取浏览器当前所在的地理坐标,实现LBS(Location Based Service,基于定位的服务)。

      下面写一下它的基本调用:

      if(navigator.geolocation){

        navigator.geolocation.getCurrentPosition(successFn,errorFn,{

          enableHighAccuracy:true,//获得高精度位置,默认为false

          timeout:5000,//获取地理位置的超时时间,默认不限时

          maximumAge:3000//最长有效期

        });

      }

      *errorFn就是获取地理位置信息失败后的回调函数,输出一些错误信息

      *successFn是成功获取后的回调函数,可以结合一些框架实现地理定位,比如百度地图、Google Map API等

    (七)拖放API

     拖放API是H5专门为了鼠标拖放而新提供了7个事件,可以分成三个部分来讲。

      一、拖动的源对象(source)可以触发的事件

        dragstart:拖动开始

        drag:拖动进行中

        dragend:拖动结束

      二、拖动的目标对象(target)可以触发的事件

        dragenter:拖动进入时

        dragover:源对象在目标对象上方时

        dragleave:拖动离开时

        drop:鼠标释放时

        *特别注意的一点是,如果想触发drop事件,必须阻止dragover的默认行为

      三、源对象和目标对象间的数据传递

        当然可以使用全局变量,这里要讲的是一种更好的方法——使用拖放事件的dataTransfer属性

        例:源对象保存数据:

          source.onxxx=function(e){

            e.dataTransfer.setData('key','value');

          };

          目标对象接收数据:

          target.onxxx=function(e){

            e.dataTransfer.getData('key');

          }

    (八)、Web Worker

    由于js是单线程的,所以H5添加了这个叫做webWorker的概念,允许js创建多个线程,但是子线程完全受主线程控制,且不能操作DOM,从而来处理一些比较耗时的操作。

      那么如何创建一个子线程呢?通过这么一个构造函数var worker = new Worker('worker.js');

      *常用的一些API:

      1、postMessage():用来在主线程和子线程间传递数据。

      2、terminate():终止子线程,无法再调用,除非另外重创。(worker.terminate();)

      3、message:消息发送时触发,通过事件的data属性获得传递的数据。

      4、error:当出错时触发,通过事件的message属性获得错误信息。

      下面给出一个Demo:

        先是主线程界面:

        接着是worker.js界面:

     

     我们再来看下输出结果:

     

    上面的这个demo其实已经能大致把一个webWorker的使用表达清楚了,额外补充下:

      1、可以在worker中可以通过importScripts(url)加载另外的脚本文件

      2、可以使用定时器的方法,但其余的DOM操作不支持

      3、可以使用AJAX发起请求

      4、可以访问navigator的部分属性

      5、不能跨域加载js文件

      6、各个浏览器的差异性,例:Firefox中支持worker中再建worker,Chrome不支持

     (九)、Web Storage

     

    H5的webStorage技术一共提供了两个对象:window.sessionStorage和window.localStorage。

      一、window.sessionStorage——会话级存储

      存储一个数据:sessionStorage['key']=value;

             /sessionStorage.setItem('key',value);

      读取一个数据:var data = sessionStorage['key'];

             /var data = sessionStorage.getItem('key');

      获取数据的个数:sessionStorage.length

      清除所有的数据:sessionStorage.clear();

      清除一个数据:sessionStorage.removeItem('key');

      二、window.localStorage——本地存储

      存储一个数据:localStorage['key']=value;

             /localStorage.setItem('key',value);

      读取一个数据:var data = localStorage['key'];

             /var data = localStorage.getItem('key');

      获取数据的个数:localStorage.length

      清除所有的数据:localStorage.clear();

      清除一个数据:localStorage.removeItem('key');

    (十)Web Socket

    webSocket是H5新加的一个协议,为了解决http协议的request、response一一对应和它自身的被动性,以及ajax轮询等问题。一方可以发送多条信息,连接不中断,永久连接,但也导致了服务器连接的客户端数量有限。

      简单的介绍下客户端的使用:

      var ws = new WebSocket('ws://地址:端口号');//创建ws客户端

      ws.onopen=function(){//连接成功时触发

        ws.send();//发送信息

        ws.onmessage=function(e){//获得信息时触发

          e.data;//接收的信息

        }

      }

  • 相关阅读:
    iOS--不重复随机数srand(time(0))
    iOS--kvo&kvc的使用
    iOS-- 添加真机测试
    iOS-- 使用xib实现自动布局
    iOS8-- Size Class的使用
    iOS--排序算法集合
    iOS--使用MD5加密
    iOS--判断一个字符串是不是手机号
    iOS--ASIHTTPRequest类库的添加和使用
    Python入门
  • 原文地址:https://www.cnblogs.com/huangqiao/p/8821795.html
Copyright © 2011-2022 走看看