前端：单页面框架知识点回顾以及梳理

作为前端工程师，在提高上需要重视不是看那些单页面框架的源码，需要重视的是首先熟悉框架的用法，框架在实际项目中的分层是什么样的，组件怎么设计，数据如何和视图高效的解耦，数据管理的用法（例如Vuex），项目中技术的选型。最后到非常了解后再去了解一些原理，实现或者底层的模式。

具体可能有有的要点为：

组件设计模式

最早的前端开发是以页面为模式，后来页面转移到了应用，有一些模块封装的一些需求，导致了需要将页面分解为组件。组件最大的好处在于其作用域是相互独立的。React最大的贡献在于指出组件可以是一种函数，认为组件何以像函数这样进行组合、递归等操作。具体组件可以分为：

1. 展示型：数据进，DOM出
2. 接入型：获取服务端数据
3. 交互型：比如各类加强版的表单组件，由于逻辑通用，所以强调复用
4. 功能型：比如 <router-view>，<transition>，作为一种扩展、抽象机制存在

数据绑定的基本实现/变化侦测

变化侦测可以分为两种

1. pull：不知道具体哪个数据变化了，系统获取某个信号后进行暴力的比对，例如Virtual DOM的diff或者脏检查。目前这种方法能用的原因是JS目前比较快。
2. push：能够知道具体哪个数据变了：

function bindData(target, event){
  for(let key in target) {
    if(target.hasOwnProperty(key)) {
      {
        let v = target[key];
        Object.defineProperty(target, key, {
          get: function() {
            return v;
          },
          set: function(_value) {
            v = _value;
            event.call(this)
          }
        })
      }
    }
  }
}

let a = 1;
function b() {
  console.log('a has been changed')
}
bindData(a, b());
a = 2;
// 'a has been chaged'

主要的知识点有：

1. 原型链：hasOwnPeoperty确定其key值为对象本身拥有的而不是原型链中的
2. 属性的定义：definProperty，定义特定的set属性，在调用的时候调用相应函数
3. 函数的执行环境：使用call进行定义

MVVM基本思路

1. view：布局文件，html形式
2. viewModel：对外暴露公共属性，view和model的中间绑定，类似于组件
3. model：数据层

父子组件通信

1. 父->子：props
2. 子->父：$emit
3. 状态管理：从原事件映射到状态的改变