资讯专栏INFORMATION COLUMN

JavaScript 新兴的API——“其他新API”的注意要点

hosition / 901人阅读

摘要:对象包括和以及失败回调函数接收对象对象有和两个属性可选对象接收一个对象对象内容有以及该方法接收的参数与上面的一致。

早期的动画循环

在js中创建动画的典型方式就是用setInterval方法控制所有动画:

(function() {
    function animations() {
        //animations...
    }
    setInterval(animations, 100);
})()

最平滑动画的最佳循环间隔是100ms/60,约为17ms;大多数电脑显示器的刷新频率是60Hz。

但是如果UI线程繁忙,比如忙于处理用户操作,那么即使把代码加入到列队也不会立即执行。

循环间隔的问题

CSS的动画优势在于浏览器知道动画什么时候开始,因此会计算出正确的循环间隔,在恰当的时候刷新UI,而对于JavaScript动画,浏览器无从知晓什么时候开始。

目前,W3C已经着手起草requestAnimationFrame()API。

Page Visibility API

该API包括以下三个部分:

document.hidden:是否隐藏

document.visibilityState:4个可能的状态值

后台标签或最小化

前台标签

实际页面隐藏,但用户看到页面预览

屏幕外执行预渲染

visibilitychange事件

如:

document.addEventListener("visibilitychange", function () {
    console.log(document.hidden);
});
Geolocation API

navigator.geolocation这个对象包括三个方法:

getCurrentPosition:接收3个参数(成功回调函数、可选的失败回调函数、可选的选项对象)

成功回调函数会接收到一个Position对象参数,该对象有两个属性:coordstimestamp

coords:对象包括latitudelongitude以及accuracy

失败回调函数接收error对象

error对象有codemessage两个属性

可选对象接收一个对象:对象内容有enableHighAccuracytimeout以及maximumAge

watchPosition:该方法接收的参数与上面的一致。配合clearWatch方法使用,类似setTimeout和clearTimeout

clearWatch

如:

navigator.geolocation.getCurrentPosition(function(position) {
    do_something(position.coords.latitude, position.coords.longitude); //第一个参数为成功的回调函数
});

navigator.geolocation.getCurrentPosition(function(position) {
    console.log(position.coords.latitude);
    console.log(position.coords.timestamp);
}, function(err) { //第二个参数为失败的回调函数
    console.log("Error code: " + err.code);
    console.log("Error message: " + err.message);
});

navigator.geolocation.getCurrentPosition(function(position) {
    console.log(position.coords.latitude);
    console.log(position.coords.timestamp);
}, function(err) {
    console.log("Error code: " + err.code);
    console.log("Error message: " + err.message);
}, { //第三个参数接收对象
    enableHighAccuracy: true,
    timeout: 1000,
    maximumAge: 30000
});
File API

HTML5 DOM中添加了元素files集合,通过文件输入字段选择一个或多个文件,files集合中将包括一组File对象,每个File对象对应着一个文件,每个File对象有下面的只读属性:

name:本地文件系统中的文件名

size:文件的字节大小

type:字符串,文件的MIME类型

lastModifiedDate:字符串,上次文件被修改的事件

如:

var files = document.getElementById("files");
files.onchange = function () {
    var list = event.target.files; //FileList对象
    // console.log(list); //name: lastModified: lastModifiedDate: webkitRelativePath:
    for (var i = 0, len = list.length; i < len; i++) {
        console.log("name: " + list[i].name + "; type: " + list[i].type + "; size: " + list[i].size + "bytes"); //name: opening.png; type: image/png; size: 324991bytes
    };
};
FileReader

浏览器都支持前两个方法:

readAsText;

readAsDataURL

readAsBinaryString

readAsArrayBuffer

如下例子:

var files = document.getElementById("files");
files.onchange = function() {
    var files = event.target.files,
        info = "",
        output = document.getElementById("output"),
        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 () {
        output.innerHTML = "Could not read, error: " + reader.error.code;
    };
    reader.onprogress = function () {
        if (event.lengthComputable) {
            output.innerHTML = event.loaded + "/" + event.total;
        }
    };
    reader.onload = function () {
        var html = "";
        switch (type) {
            case "image":
                html = "";
                break;
            case "text":
                html = reader.result;
                break;
        }
        output.innerHTML = html;
    };
};

如果想中断则需要调用abort方法。

读取部分内容

Blob的实例,slice()方法

blob.slice(startByte, length)

对象URL

引用保存在File或Blob中数据的URL:

window.URL.createObjectURL()方法

要释放内存则把对象URL传给:

window.URL.revokeObjectURL()方法

拖放文件
var droptarget = document.getElementById("drop");
droptarget.addEventListener("dragenter",function () {
    event.preventDefault();
});
droptarget.addEventListener("dragover",function () {
    event.preventDefault();
});
droptarget.addEventListener("drop",function () {
    event.preventDefault();
    var file = event.dataTransfer.files[0];
    console.log(file.name)
});

在drop事件中,可以通过event.dataTransfer.files读取文件信息。

XHR方法上传文件

data = new FormData();
...
data.append("file" + i, files[i]);
...
xhr.send(data);
Web 计时

Web Timing API

window.performance对象

PerformanceNavigation.redirectCount

type

performance.timing属性

navigationStart

unloadEventStart

unloadEventEnd

redirectStart

redirectEnd

fetchStart

domainLookupStart

domainLookupEnd

connectStart

connectEnd

secureConnectionStart

requestStart

responseStart

responseEnd

domLoading

domInteractive

domContentLoadedEventStart

domContentLoadedEventEnd

domComplete

loadEventStart

loadEventEnd

toJSON

Web Workers

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/78984.html

相关文章

  • JavaScript DOM扩展——“选择符API和元素遍历”注意要点

    摘要:实际上,的核心就是通过选择符查询文档取得元素的引用。方法该方法接收一个选择符,返回的是所有匹配的元素而不仅仅是一个元素。而其底层实现则类似于一组元素的快照,而非不断对文档进行搜索的动态查询。 选择符API Selector API Level1 的核心就是两个方法:querySelector()和querySelectorAll()。实际上,jQuery的核心就是通过CSS选择符查询D...

    justCoding 评论0 收藏0
  • JavaScript DOM扩展——“专有扩展”注意要点

    摘要:另外,以及这两个方法,在测试了一下,并无反应。不知是否兼容问题。下面是获得焦点的时候,自动以每毫秒的速度往下滚屏 文档模式 页面的文档模式是由IE8引入的,文档模式决定了可以使用的CSS级别、JS中的API以及如何对待文档类型(doctype);在IE9,提供了4中文档模式: IE5:混杂模式; IE7:IE7标准模式渲染页面; IE8:IE8标准模式渲染页面,可以使用Selecto...

    wudengzan 评论0 收藏0
  • JavaScript Ajax与Comet——“其他跨域技术”注意要点

    摘要:由两部分组成回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数,回调函数的名字一般是在请求中指定的。下面是以个的例子回调函数的名字就是是通过动态的元素来使用的,使用时可以为属性指定一个跨域。是为与其他传递消息的很相似。 图像Ping技术 根据一个网页可以从任何网页中加载图像而不用担心使用跨域的原理, 我们可以动态的创建图像, 使用他们的onload和onerror事件处理程序...

    Hwg 评论0 收藏0
  • React要点入门学习总结

    摘要:上面代码中,通过为组件指定事件的回调函数,确保了只有等到真实发生事件之后,才会读取属性。七表单代码九要点文本输入框的值,不能用读取,而要定义一个事件的回调函数,通过读取用户输入的值。 一.JSX简介 JSX即JavaScript XML,一种在React组件内部构建标签的类XML语法。在不使用JSX的情况下,React程序中创建DOM是这样的: //v0.11 React.DOM.h1...

    Towers 评论0 收藏0
  • JavaScript HTML5脚本编程——“媒体元素”注意要点

    摘要:事件除了大量属性之外,这两个媒体元素还可以触发很多事件。下表列出了媒体元素相关的事件。这两个媒体元素都有一个方法,该方法接收一种格式编解码器字符串,返回或空字符串。 audio和video元素的用法如下: 不支持音频 不支持视频 因为并非所有浏览器都支持所有媒体格式,所以可以指定多个不同的媒体来源。为此,不用在标签中指定src属性,而是要像下面这样使用一或多个元素。 ...

    baoxl 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<