21|新兴API

01|requestAnimationFrame

(function(){
    function draw(timestamp){
        // 计算两次重绘的时间间隔
        let drawStart = (timestamp || Date.now()),
        diff = drawStart - startTime;

        // 使用diff确定下一步的绘制时间

        // 把startTime重写为这一次的绘制时间
        startTime = drawStart;

        // 重绘UI
        requestAnimationFrame(draw);
    }

    let requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame,
    startTime = window.mozAnimationStartTime || Date.now();
    requestAnimationFrame(draw);
})();

02|File API

//通过监听change事件并读取files集合，就可以知道每个文件信息
fileList.addEventListener("change", function(event){
    var files = event.target.files,
    i=0,
    len = files.length;
    while(i"; 
            i++; 
        } 
        output.innerHTML = info; 
    } 
} 
EventUtil.addHandler(droptarget, "dragenter", handleEvent); 
EventUtil.addHandler(droptarget, "dragover", handleEvent); 
EventUtil.addHandler(droptarget, "drop", handleEvent);


//使用XHR上传文件-- 利用FormData对象
var droptarget = document.getElementById("droptarget"); 
function handleEvent(event){ 
    var info = "", 
        output = document.getElementById("output"), 
        data, xhr, 
        files, i, len; 
    EventUtil.preventDefault(event); 
    if (event.type == "drop"){ 
        data = new FormData(); 
        files = event.dataTransfer.files; 
        i = 0; 
        len = files.length; 
        while (i < len){ 
            data.append("file" + i, files[i]); 
            i++; 
        } 
        xhr = new XMLHttpRequest(); 
        xhr.open("post", "FileAPIExample06Upload.php", true); 
        xhr.onreadystatechange = function(){ 
            if (xhr.readyState == 4){ 
                alert(xhr.responseText); 
            } 
        }; 
        xhr.send(data); 
    } 
} 
EventUtil.addHandler(droptarget, "dragenter", handleEvent); 
EventUtil.addHandler(droptarget, "dragover", handleEvent); 
EventUtil.addHandler(droptarget, "drop", handleEvent);