前端框架基础扫盲

[MJingv]

原理

双向绑定

实现方法

1. 发布订阅

• backbone

2. 脏值检查

• 变量dirty做记录，所以叫脏值检查
• 步骤

  1. angular根本不监听数据的变动
  2. 在恰当时机从$rootScope开始遍历所有$scope，检查它们是否有变化
  3. 有变化，变量dirty为true
  4. 循环步骤3，直到$scope没有属性变化结束遍历

3. 数据劫持

• object.defineProperty 【Setter getter】

Object.defineProperty
(obj, pro,{
    enumerable: true,
    configurable: true,
Get:function(){},
Set:function(val){}
})

• proxy【元编程】

  1. 从Reflect对象上可以拿到语言内部的方法
  2. Proxy返回的是一个新对象,我们可以只操作新的对象达到目的

• 对比

object.defineProperty	proxy
劫持对象的访问器，获取属性变化	Proxy可以直接监听对象而非属性
劫持get、set	有13中拦截方法get、set、has、delete、apply、isExtensible、ownKeys、deleteProperty、construct等13种
无法监听数组变化，只能劫持对象的属性（要遍历、要深拷贝）	无法用polyfill磨平

• vue 双向绑定 实现步骤

  1. 劫持：用proxy || Object.defineProperty 生成 Observer 针对 对象 || 对象的属性进行劫持，在属性发生变化时同志订阅者
  2. 收集：解析器compile解析模版中的directive(指令)，收集指令依赖的方法和数据，等待数据变化后进行渲染
  3. 桥梁：watcher是observer和compile的桥梁，它接受observer产生的数据变化，并根据compile的指令进行视图渲染，是的数据变化促使视图变化

[MJingv]

基础前行

mvvm

virtual-dom

前端路由跳转

Reac vs Vue

[MJingv]

react长列表渲染

资料来源

JS魔法堂：函数节流（throttle）与函数去抖（debounce）

节流与防抖

背景

事件频繁触发dom、资源重复加载导致ui崩溃

• window的resize、scroll事件
• 拖拽mousemove事件
• 游戏mousedown、keydown事件
• 文字输入、自动完成keyup事件

防抖（debounce）

• 原理：满n秒执行，不足重置定时器（人上完了，公交车才开）

const debounce = (delay,cb)=>{
    let timer;
    return ()=>{
        clearTimeout(timer)
        timer=setTimeout(()=>{
            cb()
        },delay)    
    }
}

节流（throttle）

• 原理：定期执行

const throttle =(delay,cb)=>{

    let now = new Data().getTime();
    let last=0
    if(now-last<delay) return
    last=now;
    cb()

    }

预加载

定义：将所有所需的资源提前请求加载到本地，这样后面在需要用到时就直接从缓存取资源。

为什么用预加载

• 在页面全部加载前，对主要内容进行预加载，减少等待时间

实现方法

• 加载后 display:none
• new image()放入script文件去加载
• xhr对象精细控制【跨域】

懒加载【延迟加载】

定义：滚动的可视区域外不加载

为什么用懒加载：

• 提升用户体验
• 减少无效资源加载
• 防止并发加载资源过多会阻塞js加载

原理

• img标签src设空，真实路径放属性中
• 监听scroll，cb判断是否在可视区域【getBoundingClientRect.bottom>=0 && getBoundingClientRect.top < document.documentElement.clientHeight】
• 若图片在可视区域，将data-original赋值给src

优化

• 节流
• 防抖
• IntersectionObserver API

  1. 可以自动"观察"元素是否可见
  2. 由于可见（visible）的本质是,目标元素与视口产生一个交叉区，所以这个 API 叫做"交叉观察器
  3. 精准控制进入可视区域的时间、距离等
  4. intersectionObserver API 异步，线程空闲才会执行

React优化

react-virtualized

• 值得注意的是这些基础组件都是继承于React中的PureComponent，因此当state变化的时候，只会做一个浅比较来确定重新渲染与否

react-tiny-virtual-list

• 完全不支持子元素的动态高度或者宽度

others

• 原生dom添加大量nodes ：createDocumentFragment
• react优化大方向

  1. shouldComponentUpdate(nextProps,nextState)【对象地址相同，不会更新】
  2. PureComponent【浅比较】
  3. immutable【深比较】

[MJingv]

vue

组件间通信

父子

• props && emit
• slot
• v-model
• $parent && $children
• v-on && $listeners
• .sync (emit语法糖)

兄弟

• this.$parent.$children && children name

跨多层次组件通信

• provide / inject

任意组件

• Vuex
• Event Bus
• mobx等

extend 能做什么

• 作用是扩展组件生成一个构造器，通常会与 $mount 一起使用

mixin 和 mixins 区别

• mixin 用于全局混入，会影响到每个组件实例，通常插件都是这样做初始化的
• mixins 如果多个组件中有相同的业务逻辑，就可以将这些逻辑剥离出来，通过 mixins 混入代码
• mixins 混入的钩子函数会先于组件内的钩子函数执行，并且在遇到同名选项的时候也会有选择性的进行合并

computed 和 watch 区别

• computed 是计算属性，依赖其他属性计算值，并且 computed 的值有缓存，只有当计算值变化才会返回内容
• watch 监听到值的变化就会执行回调，在回调中可以进行一些逻辑操作