Personal Blog

今天面了一家公司，电面。差不多是这些题目

1. 动画
2. 浏览器储存
3. 缓存机制 – 强缓存和协商缓存
4. vue响应式原理 – 2和3
5. react事件
6. 浏览器安全和工程化
7. http协议
8. Promise
9. typescript
10. 浏览器性能优化
11. vue3相比vue2的优点
12. webpack优化
13. 首屏优化
14. 元素隐藏

先看代码

1
2

const a = 1
[...[1,2,3]].forEach(item=>console.log(item))

乍一看，是不是感觉挺正常的，在浏览器的log窗口应该能输出1，2，3，才对
然后在浏览器跑一下，发现

然后emm排查了一下，语法是没问题的，浏览器版本是最新的开发版本，es6的语法肯定是支持的，那问题其实就是a=1 后面漏了分号，所以代码就成了这样

1

const a = 1[...[1,2,3]].forEach(item=>console.log(item))

那代码成了这样那肯定不能正确解析了～

果然，漏写分号不是好习惯～

介绍

Docker 是由开发人员和系统管理员 构建 、运行和容器共享的应用程序的一个平台。使用容器部署应用程序称之为集装箱化。

特点

docker 为什么能够越来越受欢迎，那是因为:

1. 灵活性：即使再复杂的应用也能够被容器化。
2. 轻量性：容器共享主机内核，并且在系统资源利用方面比虚拟机更加的高效
3. 便携性：你可以在本地将应用打包成镜像，然后上传到云端，然后就可以在任何地方运行这个镜像
4. 解耦：容器拥有高度自治权以及封闭性，你可以在不干扰其他应用程序的情况下对其中一个进行升级或者替换
5. 拓展性：可以在数据中心自动分发容器副本
6. 容器对应用隔离，对用户来说完全是黑盒，不用关心容器内发配置
   阅读全文 »

用 ts 开发 react 组件

基础函数式组件

不用传递任何的 prop，直接返回一个 jsx 作为 react 组件

1
2
3

function Title() {
  return <h1>Welcome to this application</h1>;
}

runAsync

使用 web worker 在一个单独的线程中执行函数，能够允许执行不阻塞 UI 渲染的耗时函数

1. 使用 blob 形式的 url 来创建worker,worker的内容应该是函数的系列化版本，然后立即返回函数的返回值

2. 返回值是一个promise，它监听了worker的onmessage and onerror两个事件，返回从主线程发送过来的数据或者是抛出一个错误

   阅读全文 »

前言

vue3 出了 beta，了解一下响应式数据的实现

正文

reactive

下面这些是在 reactive 中导入的外部文件

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

import { isObject, toRawType, def, hasOwn, makeMap } from '@vue/shared'##这些都是通用方法
## 两个handler，待会儿说为啥
import {
  mutableHandlers,
  readonlyHandlers,
  shallowReactiveHandlers,
  shallowReadonlyHandlers
} from './baseHandlers'
import {
  mutableCollectionHandlers,
  readonlyCollectionHandlers,
  shallowCollectionHandlers
} from './collectionHandlers'
## 然后是ref，是为了给primitive类型的value做reactive
import { UnwrapRef, Ref } from './ref'

Object.keys

上一个Object.keys()在js中的用法

1
2
3
4
5
6
7
8
9
10

const obj = {
    name:'John',
    age:12,
    id:1
}
Object.keys(obj).forEach(key=>{
    //output   'John',12,1
    console.log(obj[key])
})

前言

好奇provide怎么实现的，然后呢就去扒了下源码hhh，看了下provide的function，有点懵,provide的代码在runtime-core/src/apiInject.ts里面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

export interface InjectionKey<T> extends Symbol {}

export function provide<T>(key: InjectionKey<T> | string, value: T) {
  if (!currentInstance) {
    if (__DEV__) {
      warn(`provide() can only be used inside setup().`)
    }
  } else {
    let provides = currentInstance.provides
    # by default an instance inherits its parent's provides object
    # but when it needs to provide values of its own, it creates its
    # own provides object using parent provides object as prototype.
    # this way in `inject` we can simply look up injections from direct
    # parent and let the prototype chain do the work.
    const parentProvides =
      currentInstance.parent && currentInstance.parent.provides
    if (parentProvides === provides) {
      provides = currentInstance.provides = Object.create(parentProvides)
    }
    # TS doesn't allow symbol as index type
    provides[key as string] = value
  }
}

vuex 简述

vuex 本质上就是 vue 中的 mixin，store 在每个 vue 组建实例创建的时候通过 mixin 的方式注入的，mixin 就类似这样的格式

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

const mixComponent = {
    data(){
        return {
            message:'hello',
            foo:'abc'
        }
    }
}
new Vue({
    mixins:[mixComponent],
    data(){
        return {
            message:'goodbye',
            bar:'def'
        }
    },
    created(){
        console.log(this.$data)
        # => {message:'goodbye',foo:'abc',bar:'def'}
    }
})

当组建和混入的 mixins 含有同名选项时，这些选项将会以适当的方式进行合并，比如 mixins 中的 data 和组建的 data 有同名属性时，那么将会以组建中的数据为准。当具有同名的钩子函数时，那么同名的钩子函数将会组成一个数组，它们都将被调用。另外，mixins 中的钩子函数将会在组件自身钩子之前调用。
值为对象的选项时，它们将会被合并为一个对象，k-v 冲突时，取组件中的 kv。
而 vuex 正是全局的 mixins，将会在每个组件 create 的时候注入

内网穿透就是把本地服务映射到具有公网IP地址的服务器上，通过访问在公网上的机器，就可以访问到内网