JavaScript (120)

算法

插半优化

var arr = [4,2,3,2,3,5,1,0,7,6]
Array.prototype.inserSort = function(){
    for(var i=1; i<this.length; i++){
        var low = 0,
            high = i - 1,
            temp = this[i];
        while(low <= high){
            var middleIndex = parseInt((low + high) / 2, 10);
            if(this[middleIndex] === temp){
                low = middleIndex;
                break;
            }else if(this[middleIndex] < temp){
                low = middleIndex + 1;
            }else{
                high = middleIndex - 1;
            }
        }
        if(low === i){
            continue;
        }
        for(var j=i; j>low; j--){
            this[j] = this[j-1];
        }
        this[low] = temp;
    }
    return this
}

希尔排序

var arr = [4,2,3,2,3,5,1,0,7,6];
Array.prototype.shellSort = function(){
    var len = this.length,
        temp,
        gap = 1;
    while(gap < len/3){
        gap = gap * 3 + 1;
    }
    for(gap; gap > 0; gap = parseInt(gap / 3, 10)){
        for(var i=gap; i<len; i++){
            var temp = this[i];
            for(var j=i-gap; j>=0 && this[j] > temp; j-=gap){
                this[j+gap] = this[j];
            }
            this[j+gap] = temp;
        }
    }
    return this;
}

正则

千分位

function comdify(n){
    return n.replace(/(^\d*)(.\d*$)/, function(s, s1, s2){
        return s1.replace(/\d{1,3}(?=(\d{3})+$)/g,'$&,') + s2
    })   
}

获取 version 号

/[^_]*(?=\.(js|css))/

DOMReady

首先看 script 标签渲染

1. <script src="script.js"></script>没有 defer 或 async，浏览器会立即加载并执行指定的脚本，“立即”指的是在渲染该 script 标签之下的文档元素之前，也就是说不等待后续载入的文档元素，读到就加载并执行。
2. <script async src="script.js"></script>有 async，加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行（异步）。
3. <script defer src="myscript.js"></script>有 defer，加载后续文档元素的过程将和 script.js 的加载并行进行（异步），但是 script.js 的执行要在所有元素解析完成之后，DOMContentLoaded 事件触发之前完成。

DOMContentLoaded

当初始html文档完全加载并解析之后触发，无需等待样式、图片、子frame结束。

// 使用方法
document.addEventListener("DOMContentLoaded", function (event) {
    console.log("初始DOM 加载并解析");
});

load

当一个资源及其依赖的资源结束加载时触发。包括页面中的样式、图片、子frame等；

// 使用方法
window.addEventListener("load", function (event) {
    console.log("window 所有资源加载完成");
});

readystatechange

document有readyState属性来描述document的loading状态，readyState的改变会触发readystatechange事件。

1. loading：文档仍然在加载
2. interactive：文档结束加载并且被解析，但是想图片，样式，frame之类的子资源仍在加载

3. complete：文档和子资源已经结束加载，该状态表明将要触发load事件。

   document.onreadystatechange = function () { console.log(document.readyState) if (document.readyState === “complete”) { console.log(‘初始DOM,加载解析完成’) } }

beforeunload

当浏览器窗口，文档或其资源将要卸载时，会触发beforeunload事件。这个时候文档是依然可见的，并且这个事件在这一刻是可以取消的。 如果处理函数为Event对象的returnValue属性赋值非空字符串，浏览器会弹出一个对话框，来询问用户是否确定要离开当前页面（如下示例）。有些浏览器会将返回的字符串展示在弹框里，但有些其他浏览器只展示它们自定义的信息。没有赋值时，该事件不做任何响应。

window.addEventListener("beforeunload", function (event) {
    console.log('即将关闭')
    event.returnValue = "确定要退出么？";
});

unload

当文档或者一个子资源将要被卸载时，在beforeunload 、pagehide两个事件之后触发。 文档会处于一个特定状态。

• 所有资源仍存在 (图片, iframe 等.)
• 对于终端用户所有资源均不可见
• 界面交互无效 (window.open, alert, confirm 等.)

• 错误不会停止卸载文档的过程

  window.addEventListener(‘unload’, function (event) { console.log(‘即将关闭’); });

页面加载流程

1. 第一个readyState肯定接收不到，DOM 开始加载，此时readyState === 'interactive'。
2. document 加载结束，但是样式、图片等资源并未结束，此时触发readystatechange，状态变为readyState === 'complet'，触发事件DOMContentLoaded。
3. 资源加载完毕触发load
4. 关闭页面时一次触发beforeunload和unload。

上周解决难点

图片拼接，图片按照原始尺寸的两倍绘制在canvas上，然后将canvas导出成图片，再将图片当前尺寸绘制到canvas上，再次导出，得到当前尺寸合并后的图片。

图片合成如果是拍照的图片，如果图片被旋转，图片的blob对象中有旋转信息，需要将图片旋转之后再绘制到图片上。

图片上传跨域，首先上传的文件对象必须是form表单，文件还必须是blob对象，cors跨域首先会发起一次options，对请求进行预检，请求返回Access-Control-Allow-Origin: 允许域名，确认了允许跨域，浏览器会再次发送正常的XMLHttpRequest的请求建立连接返回数据。

如果请求中需要携带cookie,Access-Control-Allow-Origin: 不能为*