在项目中，我们经常会遇到同时发送多个HTTP请求的情况，对于同域名的请求，浏览器会限制同时发起的请求数量，当超过浏览器并发请求限制时，超过的请求将会等待，直到有请求返回时才会进行下一次请求。这是浏览器的一种保护机制，为了防止通过浏览器发起过量的请求，耗尽资源。在小程序中也会有同样的机制，例如，微信小程序中说明 wx.request 的最大并发限制是 10 个，wx.connectSocket 的最大并发限制是 5 个（参见 微信小程序官方文档-基础能力/网络/使用说明-网络-3.网络请求-使用限制 ），但是这里有个BUG，在小程序中如果并发请求超过10个，并不会等待而是直接失败，所以实际上需要用户自己处理并发请求数，在超过10个时，请求需要在队列中等待而不是直接失败。

阅读更多

网络

安全

性能

工程化

前端趋势

JS

HTML

CSS

Vue

React

小程序

Webpack

书写一个数组去重的方法

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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

// 利用ES6 Set数据结构去重
function deduplication(array) {
    return Array.from(new Set(array));
    // return [...new Set(array)];
}

// 遍历一遍 利用对象的属性不能相同的特点去重
function deduplication(array) {
    let obj = {}, result = [];
    for(let i = 0; i< array.length; i++){
        if(!obj[array[i]]){ //如果能查找到，证明数组元素重复了
            obj[array[i]] = 1;
            result.push(array[i]);
        }
    }
    return result;
};

// 双层遍历，内层遍历改用indexOf
function deduplication(array) {
    let result = [];
    array.forEach(function(item, index ,arr){  //这里利用map，filter方法也可以实现外层遍历
        if(arr.indexOf(item, index + 1) < 0) {
            result.push(item);
        }
    });
    return result;
};

// 双层遍历, 遇到重复则跳过，不重复的插入到新数组
function deduplication(array){
    var result = [];
    for(let i = 0; i < array.length; i++){
        for(let j = i + 1; j < array.length; j++){
            if(array[i] === array[j]){
                j = ++i;
            }
        }
        result.push(array[i]);
    }
    return result;
}

// 双层遍历，删除重复，返回原数组 *对原数组有修改
function deduplication(array){
    let len = array.length;
    for(let i = 0; i < len; i++){
        for(let j = i + 1; j < len; j++){
            if(array[i] == array[j]){
                array.splice(j, 1);
                len--;
                j--;
            }
        }
    }
    return array;
};

阅读更多

阶乘

在数学上, 自然数n的阶乘写作n!。一个正整数 n 的阶乘, 就是所有小于等于 n 的正整数的乘积，0的阶乘为1。比如:

5！ = 5 4 3 2 1 = 120

问题： 求自然数n的阶乘

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

/**
 * @param {number} number
 * @return {number}
 */
export default function factorial(number) {
  let result = 1;
  // 0 或 1 返回 1
  if (number === 0 || number === 1) {
    return 1;
  }
  // 大于等于2时循环相乘
  for (let i = 2; i <= number; i++) {
    result *= i;
  }

  return result;
}

使用尾递归的方法

1
2
3
4
5
6
7
8

/**
 * @param {number} n
 * @param {number} total
 * @return {number}
 */
export default function factorial(n, total = 1) {
  return n === 1 ? total : factorial(n - 1, n * total);
}

阅读更多

模块化

什么是模块化

Javascript在最初的时候没有自己的模块化标准和引入外部模块的方法，类似于 c 的 #include java 的 package ，一个完备的编程语言会考虑一个工程在运行时各个模块的引用和依赖关系。但显然 Javascript 在设计之初只是被当作了一个网页端的脚本语言，既然 HTML 中可以引用js，为什么还要设计 js 中引入 js 的方法呢。可是 Javascript 的发展实在是太快了，我们知道现在 Javascript 不仅在网页中使用，服务器(Nodejs)，PC客户端(Electron)甚至移动客户端都有Js的程序。如何更好的定义模块并进行模块间的引用成了Javascript的当务之重。
模块化是一种将系统分离成独立功能部分的方法，可将系统分割成独立的功能部分，严格定义模块接口、模块间具有透明性。

阅读更多

我需要什么样的同事

招人首先应该明确招收人的性质。看，如果我需要的是一个技术专家我肯定不会提出和实习生一样的要求。如果我只是要招收一个打杂的人，我也不会要求他非得具有研究生学历。成本是很好的衡量一个人价值的方法，当老板（或者你自己就是老板）告诉你有一个HC时，首先应当明确的是这是一个什么样的HC。

阅读更多

指令v-if v-show有什么不同？

v-if 和 v-show都是Vue中的指令而且都可以用来控制模板的渲染。

v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS( display:none) 进行切换。

一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

阅读更多

函数节流（throttle）与函数去抖（debounce）

以下场景往往由于事件频繁被触发，因而频繁执行DOM操作、资源加载等重行为，导致UI停顿甚至浏览器崩溃。

1. window对象的resize、scroll事件

2. 拖拽时的mousemove事件

3. 射击游戏中的mousedown、keydown事件

4. 文字输入、自动完成的keyup事件

实际上对于 window 的 resize 事件，实际需求大多为停止改变大小n毫秒后执行后续处理；而其他事件大多的需求是以一定的频率执行后续处理。针对这两种需求就出现了 debounce 和 throttle 两种解决办法。

阅读更多

该文章用来记录一些常见的前端简单面试题，这些题目部分是因为比较细碎，部分是比较偏门（对某个不常用功能的深入知识），部分是因为还没来得及，所以没有单独列出文章来讲述。

阅读更多