Source Map

有了 Source Map，就可以从压缩代码中找到原始代码。

相关资料
JavaScript Source Map 详解√
【JS基础】sourceMap是个啥√

HTTP cookies

HTTP Cookie（Web Cookie 或者浏览器 Cookie）
是服务器发送到用户浏览器并保存在本地的一小块数据，它会在浏览器下次向同一服务器再发起请求时被携带并发送到服务器上。通常，它用于告知服务端两个请求是否来自同一浏览器，如保持用户的登陆状态。Cookie 是基于无状态的HTTP协议记录稳定的状态信息成为了可能。

Cookie 的本职工作并非本地存储，而是“维持状态”
HTTP协议是无状态的，HTTP协议自身不对请求和响应之间的通信状态进行保存。
Cookie指某些网站为了辨别用户身份而储存在用户本地终端上的数据(通常经过加密)。 cookie是服务端生成，客户端进行维护和存储。

服务器 → 浏览器 → 存储在本地
浏览器再发起请求会携带 cookie → 服务器

入门

switch

三元运算\逻辑与运算符\includes

中级

数组/对象

相关资料
你可以这样优化 if-else 代码√
编写高质量可维护的代码之优化逻辑判断

状态管理模式

问题：当我们的应用遇到多个组件共享状态时，单向数据流的简洁性很容易被破坏并产生以下问题：

• 多个视图依赖于同一状态
• 来自不同视图的行为需要变更同一状态

解决方法：

• 将数据以及操作数据的行为都定义在父组件；
• 将数据以及操作数据的行为传递给需要的各个子组件（有可能需要多级传递）

上述的解决方法并未根本上解决问题，随着项目的复杂会暴露出以下问题：

• 传参的方法对于多层嵌套的组件将会非常繁琐，并且对于兄弟组件间的状态传递无能为力。
• 我们经常会采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝。以上的这些模式非常脆弱，通常会导致无法维护的代码。

因此，为什么不把组件的共享状态抽取出来，以全局单例模式管理呢？通过定义和隔离状态管理中的各种概念并通过强制规则维持视图和状态间的独立性，我们的代码将会变得更结构化且易维护。这就是 Vuex 背后的基本思想。

Vuex

Vue 简介

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

防抖（debounce）

setTimeout 方法

1
2
3
4
5
6
7
8
9
10
11

var debounce = function(fn, delayTime) {
  var timeId; // 用于存储定时器
  // 闭包 防止 timeId 被销毁
  return function() {
    var context = this, args = arguments; // args 存储传入的参数
    timeId && clearTimeout(timeout); // 判断定时器是否存在，存在则删除定时器
    timeId = setTimeout(function{ // 添加定时任务
    fn.apply(context, args);
    }, delayTime)
  }
}

思路解析：
执行 debounce 函数之后会返回一个新的函数，通过闭包的形式，维护一个变量 timeId ，每次执行该函数的时候会结束之前的延迟操作，重新执行 setTimeout 方法，也就实现了上面所说的指定的时间内多次触发同一个事件，会合并执行一次。

1. 上述代码中arguments只会保存事件回调函数中的参数，譬如：事件对象等，并不会保存 fn、delayTime
2. 使用 apply 改变传入的fn方法中的this指向，指向绑定事件的 DOM 元素。

关于我 hexo 博客上传问题

1. ping github.com

   ping 不通看自己是不是启用了代理或vpn，然后再看 host 文件中 github 对应的地址是否能访问通。
   之前访问不通，在 host 文件中添加了

2. 30.253.112 github.com

3. 199.108.153 assets-cdn.github.com

4. 199.109.153 assets-cdn.github.com

5. 199.110.153 assets-cdn.github.com

6. 199.111.153 assets-cdn.github.com

7. 232.5.194 github.global.ssl.fastly.net

8. 101.113.194 github.global.ssl.fastly.net
   我全部删除掉，怎么添加 host 我在 GitHub 技巧 有提到过。

相关资料
Failed to connect to github.com port 443: Timed out(Windows)
GitHub解决git@github.com: Permission denied (publickey).问题

跨浏览器测试工具

BrowserShots

• 支持多种浏览器
• 生成屏幕截图展示不同浏览器渲染表现
• 在线工具

Browser Sandbox

• 可运行在桌面和平板上的应用程序
• 支持多种浏览器

MultiBrowser

• 桌面应用程序
• 测试网站的桌面版本和移动版本
• 可以进行手动测试或自动化测试
• 支持多种浏览器

LambdaTest

• 在线服务
• 进行不同平台的跨浏览器测试
• 提供集成调试工具

Experitest Cross Browser Testing

• 测试网站在不同环境下的兼容性和性能
• 可以与其他服务集成起来(比如 Github、Gitlab、Jenkins、TravisCI 和 CircleCI 等)
• 网站的部署流程流水线化

BrowserStack

• 跨浏览器测试
• 被一些大型开源项目采用

browserling

浏览器兼容测试网址

移动端测试

vConsole

• 移动端调试工具

Fundebug

• 专业的应用 BUG 监控平台

相关资料
17款最好用的跨浏览器测试工具
移动端调试痛点？——送你五款前端开发利器√
微信小程序bug免费监控√

alert

console

基本输出

1
2
3
4
5
6

console.log("打印字符串");   // 在控制台打印字符串
console.error("我是个错误"); // 在控制台打印错误信息
console.info("我是个信息");  // 在控制台打印信息
console.warn("我是个警告");  // 在控制台打印警告信息
console.debug("我是个调试"); // 在控制台打印调试信息
console.clear();             // 清空控制台

格式化输出

1
2
3
4
5
6

console.log("%s年",2016);         // %s表示字符串
console.log("%d年%d月",2016,11);  // %d表示整数
console.log("%f",3.1415926);      //%f小数
console.log("%o",console);        //%o表示对象
console.log("%c自定义样式","font-size:30px;color:#00f");
console.log("%c我是%c自定义样式","font-size:20px;color:green","font-size:10px;color:red");

DOM输出

1
2

var ul = document.getElementsByTagName("ul");
console.dirxml(ul)

对象输出

1
2

var o = {name:"Lily",age:18};
console.dir(obj)

1
2
3

var stu = [{name:"Bob",age:13,hobby:"playing"},{name:"Lucy",age:14,hobby:"reading"},{name:"Jane",age:11,hobby:"shopping"}];
console.log(stu);
console.table(stu);

成组输出

1
2
3
4
5

console.group("start"); // 引号里是组名
console.log("sub1");
console.log("sub1");
console.log("sub1");
console.groupEnd("end");

函数计数和跟踪

1
2
3
4
5
6
7
8
9
10
11
12

function fib(n){ // 输出前n个斐波那契数列值
  if( n == 0) return;
  console.count("调用次数"); // 放在函数里，每当这句代码运行输出所在函数执行次数
  console.trace(); // 显示函数调用轨迹(访问调用栈）
  var a = arguments[1] || 1;
  var b = arguments[2] || 1;
  console.log("fib=" + a);
  [a, b] = [b, a + b];
  fib(--n, a, b);
}

fib(6);

计时

1
2
3

console.time() // 计时开始
fib(100); // 用上述函数计算100个斐波那契数
console.timeEnd() // 计时结束并输出时长

断言语句

1
2

console.assert(true, "我错了");
console.assert(false,"我真的错了");

获取省市县

省：https://datavmap-public.oss-cn-hangzhou.aliyuncs.com/areas/csv/100000_province.json
市：https://datavmap-public.oss-cn-hangzhou.aliyuncs.com/areas/csv/510000_city.json
县：https://datavmap-public.oss-cn-hangzhou.aliyuncs.com/areas/csv/341700_district.json

手机号码归属地查询接口

淘宝网（精确到省份）：http://tcc.taobao.com/cc/json/mobile_tel_segment.htm?tel=18331623695
百付宝（精确到省份）：https://www.baifubao.com/callback?cmd=1059&callback=phone&phone=15850781443

相关资料
阿里云的省市区经纬度接口√
手机号码归属地查询api接口√

收藏夹爆满~~~溢出来一些内容

互联网公司 github

阿里巴巴

阿里妈妈

腾讯