【前端大概一分钟】日常工作总结

如何抛出、捕获全局异常

<script>
    // 捕获全局错误方法要写在前面，否则异常会中断js执行，导致无法捕获
    window.onerror = function (event) {
        console.log('全局错误');
        return true;
    };
    var foo = function () {
        try {
            // 使用异步方法抛出全局错误，比如 promise、async/await、settimeout...
            setTimeout(function () { throw new Error( 'errorMessage') }, 0);
        } catch (err) {
            console.log('局部错误')
        } finally {
            console.log('无法捕获全局错误')
        }
    };
    foo();
</script>
复制代码

详情可查阅hawx1993大神的回答

使用 new Image() 避免跨域

有一个需要检测网速的需求，最开始是使用ajax请求，由于图片不在同一服务器需要处理跨域，因此使用new Image()的方法来避免跨域。

<script>
    var handleRequest = function() {
        var img = new Image();
        // 图片大小
        var imgSize = 1000;
        var startTime = new Date();
        
        img.onload = function() {
            var endTime = new Date();
            // 计算下载时间
            var duration = endTime - startTime;
            // 计算网速
            console.log(imgSize / duration);
        }
        // 发送请求
        img.src = 'http://....';
    }
</script>
复制代码

引用 MDN 对 CORS 的判定

出于安全原因，浏览器限制从脚本内发起的跨源HTTP请求。 例如，XMLHttpRequest和Fetch API遵循同源策略。 这意味着使用这些API的Web应用程序只能从加载应用程序的同一个域请求HTTP资源，除非使用CORS头文件。

new Image( ) 等价于在 html 页面添加 <img src="" alt="" /> 标签，并不是通过 js 脚本操作，从而避免了跨域。

给数组添加自定义属性

js 中的 Array 是对 Object 的一种抽象，因此可以对数组定义自定义属性。

添加自定义的属性不会导致length属性自增，这在某些情况下可以用来为数组添加自定义的数据