wtw's Frontend

道阻且长,行则将至💪🏻

0%

发表于 分类于

typescript

interface vs type

相同点:

  • 都可描述一个对象或者函数
  • 都允许继承拓展

不同点:

  • type 可以声明基本类型别名,联合类型,元组等类型,用于描述数据结构
  • interface 能够声明合并,用于描述类型关系
阅读全文 »

发表于 更新于 分类于

算法

排序

冒泡排序

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function bubbleSort(array) {
    const result = [...array],
        length = result.length;
    for (let i = 0; i < length; i++) {
        for (let j = 0; j < length - i; j++) {
            if (result[j] > result[j + 1]) {
                const temp = result[j];
                result[j] = result[j + 1];
                result[j + 1] = temp;
            }
        }
    }
    return result;
}

插入排序

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function insertSort(array) {
    const result = [...array],
        length = result.length;
    for (let i = 0; i < length; i++) {
        let j = i;
        while ((result[j - 1] > result[j]) && j > 0) {
            const temp = result[j];
            result[j] = result[j - 1];
            result[j - 1] = temp;
            j--;
        }
    }
    return result;
}

归并排序

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
function merge(a, b) {
    const a_length = a.length,
        b_length = b.length,
        arr = [];
    let i = 0,
        j = 0;
    while (i < a_length && j < b_length) {
        if (a[i] <= b[j]) {
            arr.push(a[i]);
            i++;
        } else {
            arr.push(b[j]);
            j++
        }
    }
    if (i === a_length && j < b_length) {
        while (j < b_length) {
            arr.push(b[j]);
            j++;
        }
    }
    if (j === b_length && i < a_length) {
        while (i < a_length) {
            arr.push(a[i]);
            i++
        }
    }
    return arr;
}

function mergeSort(arr) {
    const length = arr.length;
    if (length <= 1) {
        return arr;
    }
    const middle = Math.floor(length / 2),
        left = arr.slice(0, middle),
        right = arr.slice(middle);
    return merge(mergeSort(left), mergeSort(right));
}

快速排序

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
function benchMark(arr, left, right) {
    let i = left,
        j = right,
        x = arr[left];
    while (i < j) {
        while (i < j && arr[j] >= x) {
            j--;
        }
        if (i < j) {
            arr[i] = arr[j];
        }
        while (i < j && arr[i] <= x) {
            i++
        }
        if (i < j) {
            arr[j] = arr[i];
        }
    }
    arr[i] = x;
    return i;
}

function quickSort(arr, left = 0, right = arr.length - 1) {
    if (left < right) {
        const index = benchMark(arr, left, right);
        quickSort(arr, left, index - 1);
        quickSort(arr, index + 1, right);
    }
    return arr;
}
阅读全文 »

发表于 更新于 分类于

browser

process

分析

  • 浏览器的进程
    • 浏览器进程
    • 渲染进程
      • GUI 线程: 用于处理、解析、渲染 html、css
      • JS 线程: 也就是程序员所说的所谓 “JS 单线程”
      • 定时器线程: 处理定时器(setTimeout、setInterval),将符合条件的回调事件移入至事件触发线程
      • 事件触发线程: Event Loop 事件循环执行机制
      • 异步 HTTP 请求线程: 处理 http 请求,将符合条件的回调事件移入至事件触发线程
    • GPU 进程
    • 插件进程
    • 网络进程

request

请求头

  • content-type: 向服务器端请求获取资源的类型
  • referer: 包含了当前请求页面的来源页面的地址
  • user-agent: 则是用于告知服务器端,访问者是由什么工具请求的

OPTIONS

概念

HTTP request OPTIONS 相当于是 Chrome 浏览器发的一个”预检”请求,它会向服务器申请权限检测信息,如果申请通过,浏览器才会真正向服务器发送一个正式的 HTTP 请求.

阅读全文 »

发表于 更新于 分类于

js

compose

ES5

1
2
3
4
5
6
7
8
function compose() {
    var args = Array.prototype.slice.call(arguments);
    return function (x) {
        return args.reduceRight(function (a, b) {
            return b(a);
        }, x);
    }
}

ES6

1
const compose = (...args) => x => args.reduceRight((a, b) => b(a), x);

pipe

ES5

1
2
3
4
5
6
7
8
function pipe() {
    var args = Array.prototype.slice.call(arguments);
    return function (x) {
        return args.reduce(function (a, b) {
            return b(a);
        }, x);
    }
}

ES6

阅读全文 »

发表于 更新于 分类于

v8

垃圾回收机制

使用分代回收策略,分为新、老生代.

  • 新生代: 新生代的堆内存被分为多个 SemiSpace 空间,每个 SemiSpace 分为两部分 from 和 to,分配对象空间时,只在 from 中分配,to 是闲置的,垃圾回收机制会按照以下步骤:
    • 查找 from 中还存活的对象,将其全部移入到 to
    • 反转 from 和 to
    • 对 to 尽数回收
  • 新生代 -> 老生代
    • 新生代垃圾回收机制中,from 中的对象经过多次复制依然还存活,就将其移入老生代
    • 在反转 from 和 to 的过程中,如果 to 空间的使用量超过了 25%,那么 from 中的对象全部移入老生代
  • 老生代
    • 标记删除: 对象已死亡,会直接被剃掉删除
    • 标记合并: 将存活的对象移到一边,将被回收的对象移到另一边,直接对可被回收的区域进行整体的垃圾回收
阅读全文 »

发表于 更新于 分类于

css

水平居中

对于父子关系的布局，如何让子元素居中就是一个课题~

text-align + inline-block

1
2
3
4
5
6
7
  .parent {
    text-align: center;
}

.children {
    display: inline-block;
}

absolute + transform(translate)

1
2
3
4
5
6
7
8
9
  .parent {
    position: relative;
}

.children {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

table + margin

1
2
3
4
5
6
7
  .parent {
    display: table;
    margin: 0 auto;
}

.children {
}

flex + justify-content

阅读全文 »