H5进阶

一、geoLocation

//获取地理位置信息，一些系统不支持该功能
//定位（GPS），台式机几乎没有，笔记本多数也没有，智能手机几乎都有
//网络，粗略估计地理位置(不准备，有延时)
window.navigator.geolocation.getCurrentPosition(
    function (position) {
        console.log(position)
    }
)
//https协议，file协议可以获取，http协议无法获取

二、服务器

var express = require('express');
var app = new express();
app.use(express.static('./page'));
app.listen(80);//端口号>8000,等于80
//默认访问80端口，express默认访问index.html

三、deviceorientation

陀螺仪，只有带有陀螺仪的设备才支持体感，一般为移动设备
苹果设备的页面只有在https协议的情况下才能使用这些窗口
11.1.x以及之前，是可以使用的。（含微信浏览器）

window.addEventListener('deviceorientation',function(e){
    document.getElementById('main').innerHTML = 'alpha'+e.alpha+'beta'+e.beta+'gamma'+e.gamma
});

alpha：指北（0-360），为0指北，180指南。
beta：平放时beta为0，手机立起来（竖直）为90。
gamma：平放时gamma为0，手机立起来（横直）为90。

四、devicemotion

devicemotion (设备运动/手势)：提供设备的加速度信息，表示为定义在设备上的坐标系中的笛卡尔坐标，其还提供了设备在坐标系中的自转速率。

window.addEventListener('devicemotion',function(e){
    document.getElementById('content').innerHTML = e.acceleration.x+' '+e.acceleration.y+' '+e.acceleration.z;
    if(Math.abs(e.acceleration.x)>10||Math.abs(e.acceleration.y)>10||Math.abs(e.acceleration.z)>1){
        alert('晃动了！');
    }
});

五、requestAnimationFrame

requestAnimationFrame每秒60帧
1帧（少于1/60s）
requestAnimationFrame可以准时执行每一帧
cancelAnimationFrame基本上相当于clearTimeout
cancelAnimationFrame兼容性很差

function move(){
    var square = document.getElementById('anim');
    if(quare.offsetLeft > 700){
    	can
        return;
    };
    square.style.left = square.offsetLeft + 20 + 'px';
    // requestAnimationFrame(move);
};
setInterval(move,1000/60);

六、localStorage

cookie：每次请求的时候都有可能传送许多无用的消息到后端
localStorage只能存储字符串

长时间存放在浏览器就用localStorage（无论窗口是否关闭都需要存储）
localStorage.name = ‘jimo’

临时需要存储的变量，每次窗口关闭，sessionStorage都会自动清空
sessionStorage.name = ‘jimo’

localStorage和cookie

1. localStorage在发送时不会把数据发出去，cookie会把所有数据带出去
2. cookie存储的内容比较少（4k），localStorage可以存放较多内容（5M）

七、history

<script>
var data = [{name:'html'},
            {name:'css'},
            {name:'js'},
            {name:'jimo'}];
    function search(){
        var value = document.getElementById('search').value;
        var result = data.filter(function(obj){
            if(obj.name.indexOf(value)>=0){
                return obj;
            }
        })
        render(result);
        history.pushState({inpVal:value},null,'#'+value);
    }
    function render(data){
        var content = '';
        for(var i = 0;i < data.length;i ++){
            content += `<div>${data[i].name}</div>`
        }
        document.getElementById('main').innerHTML = content;
    }
    window.addEventListener('popstate',function(e){
        document.getElementById('search').value = e.state.inpVal ? e.state.inpVal : '';
        var value = document.getElementById('search').value;
        var result = data.filter(function(obj){
            if(obj.name.indexOf(value)>=0){
                return obj;
            }
        })
        render(result);
    })
</script>
<input type="text" id="search"><button onclick="search()">搜索</button>
<div id="main"></div>
<script>
    render(data);
</script>

八、woeker

//js单线程
//worker多线程，不能操作dom，没有window对象，不能读取本地文件，可以发送ajax，可以计算
console.log('!!!!!!!');
var a = 999;
var worker = new Worker('worker.js');
worker.postMessage({//将数据给worker.js进行处理
    num: a
})
worker.onmessage = function(e){
    console.log(e.data);//接收处理后的数据
}
console.log('???????');

//worker.js
importScripts('**.js');//引入其他js
this.onmessage = function(e){
    var result = 0;
    for(let i = 0;i < e.data.num;i ++){
        result +=i;
    }
    this.postMessage(result);
};