发表于 | 分类于

浅谈 service worker

service Worker 简介

service worker 是浏览器在后台独立于网页运行的脚本, 它打开了通向不需要网页或用户交互的功能的大门。

service worker 简介

  • 基于 web worker: 一个独立于 JavaScript 主线程的独立线程，在里面执行需要消耗大量资源的操作不会阻塞主线程
  • 在 web worker 的基础上增加了离线缓存的能力
  • 本质上充当 Web 应用程序（服务器）与浏览器之间的代理服务器，可以拦截全站的请求，并作出相应的请求。
  • 创建有效的离线体验（将一些不常更新的内容缓存在浏览器，提高访问体验）
  • 由事件驱动的, 具有生命周期
  • 可以访问 cache 和 indexDB
  • 支持推送
  • 可以让开发者自己控制管理缓存的内容以及版本

service worker 可以拦截当前网站所有的请求，进行判断，如果需要向服务器发送请求的就转给服务器，如果可以使用缓存的就使用缓存，大大提高浏览器的体验。
在客户端离线的状态下，可以将静态资源进行缓存，从而减少白屏时间，加快页面响应速度。

阅读全文 »

发表于 | 分类于

Vue2 中 computed 和 watch 区别

两者 API 都实现了对数据的监听，但还是有些许差别的。可以看官网介绍

computed

对于视图渲染的任何复杂逻辑都可以使用 计算属性 computed
使用 computed 可以防止 template 模版过重，且使用大量复杂逻辑表达式处理数据时，会对页面的可维护性造成很大影响
计算的属性不在 data 和 props 中

基础使用

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
<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>

  // bad
  <p>{{ this.message.split('').reverse().join('') }}</p>
</div>

var vm = new Vue({
  el: '#example',

  data() {
    return {
      message: 'Hello'
    }
  },

  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})
阅读全文 »

发表于 | 分类于

async 实现
diff算法
vue3 setup
一键换肤
事件委托
原型
事件循环
链表
双向绑定
promise
盒子模型
内存泄漏
设计模式 发布订阅
柯里化
webpack 打包优化
vue 组件封装
跨域
vue data()
fiber

发表于 | 分类于

React 事件原理

React 事件系统

事件注册

初始化形成必要的映射关系

事件绑定

diffProperties 处理 React 合成事件

legacyListenToEvent 注册事件监听器

绑定 dispatchEvent

参考

发表于 | 分类于

JS ES6+ 语法新特性

ECMAScript 6 入门
只总结一些常用的 es6+ 用法

ES6 (2015)

1.类 (class)

1
2
3
4
5
6
7
8
9
10
11
class People {
  constructor(name) {
    this.name = name
  }
  console() {
    console.log(this.name)
  }
}

const man = new People('aa')
man.console()

2.模块化 (es module)
可以把一个 js 文件当作一个模块

1
2
3
4
5
6
// 模块 A 中导出一个方法
export const sumA = (a, b) => a + b

// 模块 B 中使用
import { sumA } from './A'
console.log(sumA(1, 2))
阅读全文 »

发表于 | 分类于

Promise 深度理解

在理解 Promise 之前，要先理解什么是异步编程。JavaScript 的异步编程比较特殊，我们一般称之为单线程异步编程。

JS 单线程异步编程

JS 是单线程的

JavaScript 同时只能处理一件事情。上面的代码还没执行完成，则无法执行下面的代码。
JavaScript 中也有部分操作是异步编程。

但 JavaScript 绝非我们传统编程中的多线程开发，可以同时做多件事情。因为是单线程处理，所以如果 JavaScript 引擎正在处理任务，其他任务就不会被处理。

浏览器基于 EventQueue事件队列, EventLoop事件循环 两大机制，构建出了异步编程的效果。

异步宏任务

  1. 定时器
  2. DOM 事件
  3. Http 请求(ajax, fetch, jsonp,…)

异步微任务

  1. Promise(resolve, reject, then)
  2. async await
  3. requestAnimationFrame
阅读全文 »

发表于 | 分类于

JavaScript 常用小技巧

类型检查小工具

JavaScript 不是强类型语言，我们可以通过集成强类型检测 TypeScript， 但是有时候我们只是想做一个简单的类型检查。这时候就可以用到 typeof 关键字。

typeof 的问题在于，用于基本数据类型和函数时效果很好，但是对于数组和对象来说，由于它们都被视为对象，因此很难把握它们之间的区别。

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
const isOfType = (() => {
  // create a plain object with no prototype
  const type = Object.create(null);

  // check for null type
  type.null = x => x === null;
  
  type.undefined = x => x === undefined;
  
  type.nil = x => type.null(x) || type.undefined(x);

  type.string = x => !type.nil(x) && (typeof x === 'string' || x instanceof String);
  
  type.number = x => !type.nil(x) && ((!isNaN(x) && isFinite(x) && typeof x === 'number') || x instanceof Number);

  type.boolean = x => !type.nil(x) && (typeof x === 'boolean' || x instanceof Boolean);

  type.array = x => !type.nil(x) && Array.isArray(x);

  type.object = x => ({}).toString.call(x) === '[object Object]';

  type.type = x => (x, X) => !type.nil(x) && x instanceof X;

  type.set = x => type.type(x, Set);

  type.map = x => type.type(x, Map);

  type.date = x => type.type(x, Date);

  return type;
})()
阅读全文 »

发表于 | 分类于

git 连接 github 超时问题

port 22 报错

当 git clone 代码的时候遇到 port 22

1
ssh: connect to host github.com port 22: Connection timed out

找到 git 的安装地址

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// 1.找到 git 安装地址
whereis git

// 2. 编辑配置
vi /etc/ssh/ssh_config

// 3.在末尾加入
Host github.com
User git
Hostname ssh.github.com
PreferredAuthentications publickey
IdentityFile ~/.ssh/id_rsa
Port 443

// 4. 测试 git 是否连接 github 成功
ssh -T git@github.com
// or debugger
ssh -vT git@github.com
阅读全文 »