JavaScript高级程序设计笔记(18)-新兴API

Page Visibility API

• document.hidden: 表示页面是否隐藏的布尔值
• document.VisibilityState: 表示下列4个可能状态的值
  • 页面在后台标签页中或浏览器最小化
  • 页面在前台标签页中
  • 实际的页面已经隐藏，但用户可以看到页面的预览
  • 页面在屏幕外执行预渲染处理
• visibilitychange事件: 当文档从可见变为不可见或从不可见变为可见时，触发该事件

Geolocation API

navigator.geolocation.getCurrentPosition(function(position){
    //position对象有两个属性：coords和timestamp
    //而coords对象将包含latitude(维度)、longitude(经度)、accuracy(经纬度坐标的精度，以米为单位)
    console.log(position.coords.latitude + ',' + position.coords.longitude);
}, function(error){
    console.log(error.code + ',' + error.message);
},{
    enableHighAccuracy: true,//表示是否必须尽可能使用最准确的位置信息
    timeout: 5000,//等待位置信息的最长时间
    maximumAge: 25000//表示上一次取得坐标信息的有效时间，如果时间到，则重新取得新坐标信息
})

var watchId = navigator.geolocation.watchPosition(function(position){
    //
}, function(error){
    //
})

clearWatch(watchId);

File API

var filesList = document.getElementById("myFile");
EventUtil.addHander(fileList, 'change', function(event){
    var files = EventUtil.getTarget(event).files,
        i = 0,
        len = files.length;
    while(i < len){
        console.log(files[i].name + '(' + files[i].type + ',' files[i].size + 'bytes)');
    }
})

FileReader类型

• readAsText(file, encoding): 以纯文本形式读取文件，将读取到的文件保存在result属性中，第二个参数是指定编码类型，可选。
• readAsDataURL(file): 读取文件并将文件以数据URI的形式存放在result属性中；
• readAsBinaryString(file): 读取文件并将一个字符串保存在result属性中，字符传中的每个字符表示一个字节。
• readAsArrayBuffer(file): 读取文件并将一个包含文件内容的ArrayBuffer保存在result属性中。

由于读取过程是异步的，FileReader也提供了几个事件，最有用的三个：progress、error和load。error只有一个属性code，1表示未找到文件，2表示安全性错误，3表示读取中断，4表示文件不可读，5表示编码错误。

var fileList = document.getElementById('myFile');
EventUitl.addHander(fileList, 'cchange', function(event){
    var info = '',
        output = document.getElementById('output'),
        progress = document.getElementById('progress'),
        files = EventUtil.getTarget(event).files,
        type = 'default',
        reader = new FileReader();
    if(/image/.test(files[0].type)){
        reader.readAsDataURL(files[0]);
        type = 'image';
    }else{
        reader.readAsText(files[0]);
        type = 'text';
    }
    reader.onerror = function(error){
        output.innerHTML = 'Could not read file, error code is ' + reader.error.code;
    }
    reader.onprogress = function(event){
        if(event.lengthComputable){
            progress.innerHTML = event.loaded + '/' + event.total;
        }
    }
    reader.onload = function(){
        var html = '';
        switch(type){
            case 'image':
                html = '<img src=\""+ reader.result + "\" >";
                break;
            case 'text':
                html = reader.result;
                break;
        }
        output.innerHTML = html;
    }
})

读取部分内容

blob是File类型的服类型。

function blobSlice(blob, startByte, length){
    if(blob.slice){
        return blob.slice(startByte, length);
    }else if(blob.webkitSlice){
        return blob.webkitSlice(startByte, length);
    }else if(blob.mozSlice){
        return blob.mozSlice(startByte, length);
    }else{
        return null;
    }
}

对象URL

function createObjectURL(blob){
    if(window.URL){
        return window.URL.createObjectURL(blob);
    }else if(window.webkitURL){
        return window.webkitURL.createObjectURL(blob);
    }else{
        return null;
    }
}

函数返回的是一个字符串，指向一块内存地址。

如果不需要相应的数据，最好释放它占用的内存，可以把对象URL传给window.URL.revokeObjectURL()

读取拖放的文件

使用XHR上传文件

Web计时

window.performance对象

window.performance.navigation包含属性：

• redirectCount: 页面加载的重定向次数
• type: 数值常量，表示刚刚发生的导航类型
  • performance.navigation.TYPE_NAVIGATE(0): 页面第一次加载
  • performance.navigation.TYPE_RELOAD(1): 页面重载过
  • performance.navigation.TYPE_BACK_FORWARD(2): 页面通过后退或前进按钮打开

performance.timing属性也是一个对象，每个对象属性都是时间戳。

• navigationStart: 开始导航到当前页面的时间。
• unloadEventStart: 前一个页面的unload事件开始的时间。只有在前一个页面与当前页面来自同一个域时，这个属性值才有值，否则值为0
• ….

Web Workers

使用worker

var worker = new Worker('xxx.js');
worker.postMessage('start!');

Worker通过message和error事件与页面通信。

worker.onmessage = function(event){
    var data = event.data;
    //数据处理
}

Worker不能完成给定的任务时会触发error事件。

worker.onerror = function(event){
    console.log('Error: ' + event.fielname + ' (' + event.lineno + "):" + event.message);
}

终止Worker动作， terminate()方法

worker.terminate();

Worker的全局作用域

Web Worker所执行的Javascript代码完全在另一个作用域中，与当前网页中的代码不共享作用域。