h5 的api接口 地理位置,重力感应,摇一摇,requestAnimationFrame,localStorage,history,worker

    ==========================获取地理位置信息==========================
定位（GPS）， 台式机几乎没有GPS,笔记本绝大多数都没有GPS, 智能手机几乎都有GPS
电脑的定位方法： 使用网络，通过基站来粗略的估计你的地理位置

<script>
    window.navigator.geolocation.geolocation(function (position) {
        // 这个是成功的回调函数


    }, function () {
        // 这个是失败的回调函数
    })
    // 这个方法在电脑浏览器里面不可以使用， 需要在https的协议下可以打印，网页本身不可以获取，
    //  需要在chrome浏览器，可以翻墙的情况下，在https的协议下可以拿得到地理位置
    // 除了在https协议下可以使用外， 还可以在file协议下（本地打开网页的文件，打开控制台）使用这个方法，获取地理位置

    // 获取的结果 经度最大 180° 维度最大90°
</script>

===========================四行写一个服务器======================
基于node的环境下：
 // npm install express --save

 建立一个server.js
var express = require('express');
// 创建一个express对象
var app = new express();
// 使用的静态文件
app.use(express.static("./page"));
// 监听端口， 一般大于8000， 或者等于80，使用80端口后可以在浏览器里面不用输入端口号， 因为80端口是web的默认的端口
app.listen(12306);

启动方式， 进入对应的项目路径里面 输入node server.js（这个是对应文件服务器的文件）

===========================重力感应====================
 // 陀螺仪， 只有带有陀螺仪的设备才能支持体感（重力感应）
// 苹果设备的页面只有在https的协议的情况下才能使用这些接口
// 安卓设备就不会有这些问题
window.addEventListener("deviceorientation", function (event) {
    // alpha： 指北（指南针）[0，360） 当为0的时候指北。180指南
    // beta； 平放的时候beta值为0 如果将手机立起来，beta的值为90， 倒立的是-90°
    // gamma: 手机平放的时候值为0， 如果将手机左侧立起来，度数是90°， 右侧立起来度数是-90°

})

===================手机访问电脑=============================
条件： 1.手机和电脑在同一局域网下面 
       2. 获取电脑的ip地址
       3. 在手机上面输入网址
 mac: 1. 在终端输入ifconfig  找inet 192.168.xxx
         或者在终端输入 ifconfig | grep "inet" 使用过滤来找mac电脑的ip地址
       2. 打开系统编号设置，在网络中 ，找到其连接
window: 1.  使用win+r 打开 终端， 输入 ipconfig, 如果使用的是网线，找到以太网的ip地址
          如果是连接的是wifi，则找到wifi对应的IP地址就行
        2. 然后关闭防火墙、
        

 =================摇一摇=========================
 window.addEventListener("devicemotion", function (ev) {
    ev.acceleration.x  // 水平上的加速度
    ev.acceleration.y  // 竖着上的加速度
    ev.acceleration.z  // 垂直屏幕方向的加速度
    if (Math.abs(ev.acceleration.x) > 5 || Math.abs(ev.acceleration.y) > 5 || Math.abs(ev.acceleration.z) > 5) {
        // 判断手机是否在处于摇晃的状态， 就是判断加速度的大小， 要使用绝对值的大小大于一个常数
    }

})


=================动画优化，requestAnimationFrame================
// 在过去需要使一个物体连续运动， settimeInterval(), 会存在一个问题， 方块的移动速度不是均匀的
// 原因： 由于屏幕的刷新的频率， 每秒60次， 如果变化， 一秒超过60次， 必然会有一些动画帧会被丢掉

requestAnimationFrame(fn)

requestAnimationFrame 可以均匀移动，每秒60帧
setInterval(function(){}, 1000/60) 与requestAnimationFrame 的区别
setInterval 必须要执行第一帧， 第二帧才会执行，如果业务逻辑复杂， 第一帧的时间就会少于1/60秒，后面的执行就会受影响 
requestAnimationFrame 可以准时执行每一帧， 就是说不管业务逻辑多么复杂，都会准时执行


如何requestAnimationFrame 停住 使用 cancelAnimationFrame(timer)  和cleartimerout 的使用方法一样
requestAnimationFrame() 现在兼容性比较差，以后会变好

兼容性写法：
window.requestAnimationFrame = (function () {
    return window.requestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        function (id) {
            window.setTimeout(id, 1000 / 60);
        }
})()
 
 window.cancelAnimationFrame = (function () {
    return window.cancelAnimationFrame ||
        window.webkitCancelAnimationFrame ||
        window.mozCancelAnimationFrame ||
        function (id) {
            window.clearTimeout(id);
        }
})()


======================localStorage==================
以前存在的cookie, 每一个请求都会给服务器发送 许多cookie
开发一种存储环境， localStorage
存入数据： localStorage只能存入字符串 localStorage.key = JSON.stringify(value) localStorage.setItem("key",JSON.stringify(value))
取数据： JSON.parse(localStorage.key)   JSON.parse(localStorage.getItem("key"))
移除数据 localStorage.removeItem("key")

localStorage 与sessionStorage 的区别
1. 长时间存放在浏览器的， 写入localStorage(无论窗口是否关闭都需要存储)
2. 浏览器这一次的会话，需要临时存储的变量 写入localStorage, 没有窗口关闭的时候， sessionStorage会自动情况


localStorage 与cookie的区别
1. localStorage在发送请求的时候不会把数据发出去， cookie会把所有的数据带出去
2. cookie的存储的内容比较少， 大概4k， localStorage可以放比较多，大概5Mb


================history=============================
// 为了网页的性能， 单页面操作
history.pushState({value: value},null,"#"+value)
第一个参数： 放入历史栈里面的值
第二个参数： title, 一般不兼容
第三个参数： 一个锚点，用于返回上一次记录和下一次记录

// url变了，就会触发popstate， popState的触发优先级大于hashchange
window.addEventListener("popstate", function(ev){
    e.state // 获取的上一次或者下一次的对象值
})

// 描点变了就会触发hashchange
window.addEventListener("hashchange", function(ev){
ev // 获取的上一次或者下一次的对象值
})


============worker================================
js都是单线程的
worker是多线程的，是真的多线程， 不是伪多线程（ajax）
worker不能操作dom,没有window对象，不能读取文件. 可以发ajax,可以异步计算， 兼容性不怎么好

<script>
    var worker = new worker('worker.js'); // 里面使用的是js文件
    worker.postMessage({
        num: a
    })
    worker.onmessage = function(e){
        // 获取work.js 里面计算完的结果
    }
    worker.terminate(); 需要停止工作
</script>

<script>
    // worker.js
    this.onmessage = function(e){
        //  在这里 可以获取到postMessage里面的值
        // todo

    }
    this.postMessage('todo 完后的结果')
    this.close(); 停止工作，自己停止
</script>

问：在worker里面是否可以继续创建worker
答： 理论上是可以的，实际中，没有浏览器支持