fe-linmu / blog Goto Github PK

vue add router

// 插件

let KVue

// 1. 实现一个install方法
class VueRouter {
  constructor(options) {
    this.$options = options

    // 响应式数据
    const initial = window.location.hash.slice(1) || '/'
    KVue.util.defineReactive(this, 'current', initial)

    // this.current = '/'

    // 监听事件
    window.addEventListener('hashchange', this.onHashChange.bind(this))
    window.addEventListener('load', this.onHashChange.bind(this))

    // 缓存path和route映射关系
    this.routeMap = {}
    this.$options.routes.forEach(route => {
      this.routeMap[route.path] = route
    })
  }

  onHashChange () {
    this.current = window.location.hash.slice(1)
    console.log(this.current)
  }
}

// 形参是Vue构造函数
KVueRouter.install = function (Vue) {
  // 保存构造函数（独立的包，不希望将vue也打包进去）
  KVue = Vue

  // 1. 挂载$router
  Vue.mixin({
    beforeCreate () {
      // 全局混入，将来在组件实例化的时候才执行
      // 此时Vue实例已经存在了
      // this指的是组件实例
      if (this.$options.router) {
        Vue.prototype.$router = this.$options.router
      }
    }
  })

  // 2. 实现两个全局组件
  Vue.component('router-link', {
    props: {
      to: {
        type: String,
        required: true
      }
    },
    // h是createElement函数
    render (h) {
      // <a href='#/xxx'></a>
      // h(tag,props,children)
      // jsx语法也可以用
      // return <a href={'#' + this.to}>{this.$slots.default}</a>
      return h(
        'a',
        {
          attrs: {
            href: '#' + this.to
          }
        },
        this.$slots.default
      )
    }
  })
  // rouetr-view 是一个容器
  Vue.component('router-view', {
    render (h) {
      // 1. 获取路由器实例
      // const routes = this.$router.$options.routes
      // const current = this.$router.current
      // const route = routes.find(route => route.path === current)
      // const comp = route ? route.component : null

      const { routeMap, current } = this.$router
      const comp = routeMap[current] ? routeMap[current].component : null

      // 获取路由表 eg:'/'===home组件
      // return h('div','view')
      return h(comp)
    }
  })
}

export default KVueRouter

vue add vuex

export default new Vuex.Store({
  state: { counter:0 },
})

// child
props: { msg: String }

// parent
<HelloWord msg="测试父子传值" />

// child
this.$emit('sonToFather', 'son-->Father')

// parent
<Cart @sonToFather="testSonToFather($event)"></Cart>

// Bus: 事件派发、监听和回调管理
class Bus {
  constructor() {
    this.event = {}
  }
  // 订阅事件
  $on (eventName, callback) {
    if (!this.event[eventName]) {
      this.event[eventName] = []
    }
    this.event[eventName].push(callback)
  }
  // 触发事件（发布事件）
  $emit (eventName, params) {
    let eventArr = this.event[eventName]
    if (eventArr) {
      eventArr.map(item => {
        item(params)
      })
    }
  }
  // 删除订阅事件
  $off (eventName, callback) {
    let arr = this.event[eventName]
    if (arr) {
      if (callback) {
        let index = arr.indexOf(callback)
        arr.splice(index, 1)
      } else {
        arr.length = 0
      }
    }
  }
}

// main.js
Vue.prototype.$bus = new Bus()

// child1
this.$bus.$on('testBus',handle)

// child2
this.$bus.$emit('testBus')

// brother1
this.$parent.$on('testParent',handle)

// brother2
this.$parent.$emit('testParent')

// parent
this.$children[0].xx = 'xxx'

// child:并未在props中声明foo
<p>{{$attrs.foo}}</p>

// parent
<HelloWorld foo="foo"/>

// parent
<HelloWorld ref="testRef">

mounted() {
  this.$refs.testRef.xx='xxx'
}

// ancestor
provide() {
  return {foo: 'foo'}
}

// descendant
inject: ['foo']

// comp1
<div>
  <slot></slot>
</div>

// parent
<Comp>testSlot</Comp>

// comp2
<div>
  <slot></slot>
  <slot name="content"></slot>
</div>

// parent
<Comp2>
  <!-- 默认插槽用default做参数 -->
  <template v-slot:default>具名插槽</template>
  <!-- 具名插槽用插槽名做参数 -->
  <template v-slot:content>内容...</template>
</Comp2>

// comp3
<div>
  <slot :foo="foo"></slot>
</div>

// parent
<Comp3>
  <!-- 把v-slot的值指定为作用域上下文对象 -->
  <template v-slot:default="slotProps">来自子组件数据：{{slotProps.foo}}</template>
</Comp3>

onInput(e) {
  // ...
  // $parent指FormItem
  this.$parent.$emit('validate')
}

inject: ['form'], // 注入
mounted() { // 监听校验事件
  this.$on('validate',() => {this.validate()})
},
methods:{
  validate() {
    // 获取对应 FormItem 校验规则
    console.log(this.form.rules[this.prop])
    // 获取校验值
    console.log(this.form.model[this.prop])
  }
}

import Schema from 'async-validator'

validate() {
  // 获取对应 FormItem 校验规则
  const rules = this.form.rules[this.prop]
  // 获取校验值
  const value = this.form.model[this.prop]
  // 校验描述对象
  const descriptor = {[this.prop]:rules}
  // 创建校验器
  const schema = new Schema(descriptor)
  // 返回 Promise，没有触发 catch 就说明验证通过
  return schema.validate({[this.prop]:value},errors=>{
    if (errors) {
      // 将错误信息显示
      this.error = errors[0].message
    } else {
      // 校验通过
      this.error = ''
    }
  })
}

validate(cb){
  // 调用所有含有 prop 属性的子组件的 validate 方法并得到 Promise 的值
  const tasks = this.$children
      .filter(item => item.prop)
      .map(item => item.validate())
  // 所有任务必须全部成功才算校验通过，任一失败则校验失败
  Promise.all(tasks)
      .then(() => cb(true))
      .catch(() => cb(false))
}

this.$create(Notice, {
  title: '林慕-弹窗组件'
  message: '提示信息',
  duration: 1000
}).show()

import Vue from 'vue'

// 创建函数接收要创建组件定义
function create(Component, props) {
  // 创建一个 Vue 实例
  const vm = new Vue({
    render(h) {
      // render 函数将传入组件配置对象转换为虚拟 dom
      console.log(h(Component,{props}))
      return h(Component, {props})
    }
  }).$mount() // 执行挂载函数，但未指定挂载目标，表示只执行初始化工作

  // 将生成 dom 元素追加至 body
  document.body.appendChild(vm.$el)
  // 给组件实例添加销毁方法
  const comp = vm.$children[0]
  comp.remove = () => {
    document.body.removeChild(vm.$el)
    vm.$destroy()
  }
  return comp
}

// 暴露调用接口
export default create

export function create2 (Component, props) {
  let VueMessage = Vue.extend({
    render(h) {
      return h(Component, {props})
    }
  })
  let newMessage = new VueMessage()
  let vm = newMessage.$mount()
  let el = vm.$el
  document.body.appendChild(el) 
  const comp = vm.$children[0]
  comp.remove = () => {
    document.body.removeChild(vm.$el)
    vm.$destroy()
  }
  return comp
}

export function create3 (Component, props) {
  // 组件构造函数如何获取？
  // 1. Vue.extend()
  const Ctor = Vue.extend(Component)
  // 创建组件实例
  const comp = new Ctor({ propsData: props })
  comp.$mount()
  document.body.appendChild(comp.$el)
  comp.remove = function () {
    document.body.removeChild(comp.$el)
    comp.$destroy()
  }
  return comp
}

// 使用
this.$notice({title: 'xxx'})

const obj = {}

function defineReactive (obj, key, val) {
  Object.defineProperty(obj, key, {
    get () {
      console.log(`get ${key}:${val}`)
      return val
    },
    set (newVal) {
      if (newVal !== val) {
        console.log(`set ${key}:${newVal}`)
        val = newVal
      }
    }
  })
}

defineReactive(obj, 'foo', 'foo')

obj.foo = 'test foo'

// 对象响应化：遍历每个key，定义getter、setter
function observe (obj) {
  if (typeof obj !== 'object' || obj == null) {
    return
  }
  Object.keys(obj).forEach(key => {
    defineReactive(obj, key, obj[key])
  })
}

const obj = { foo: 'foo', bar: 'bar', baz: { a: 1 } }
observe(obj)
obj.foo = 'foooooooooooo'
obj.bar = 'barrrrrrrrrrr'
obj.baz.a = 10 // 嵌套对象no ok

function defineReactive (obj, key, val) {
  observe(val)    // 递归 observer 方法处理嵌套对象
  Object.defineProperty(obj, key, {
    //...
  })
}

obj.baz = {a:1}
obj.baz.a = 10 // no ok

set(newVal) {
    if (newVal !== val) {
        observe(newVal) // 新值是对象的情况
        notifyUpdate()

obj.dong='林慕'
obj.dong // 并没有 get 信息

const arrayProto = Array.prototype
// 先克隆一份数组原型
export const arrayMethods = Object.create(arrayProto)
// 七个改变数组的方法
const methodsToPatch = [
  'push',
  'pop',
  'shift',
  'unshift',
  'splice',
  'sort',
  'reverse'
]

// 拦截变化方法并发出事件
methodsToPatch.forEach(function (method) {
  // 缓存原方法
  const original = arrayProto[method]
  def(arrayMethods, method, function mutator (...args) {
    // 执行原始方法
    const result = original.apply(this, args)
    // 额外通知变更，只有这7个方法有这个待遇
    const ob = this.__ob__
    let inserted
    switch (method) {
      case 'push':
      case 'unshift':
        inserted = args
        break
      case 'splice':
        inserted = args.slice(2)
        break
    }
    // 对新加入对象进行响应化处理
    if (inserted) ob.observerArray(inserted)
    // 通知改变
    ob.dep.notify()
    return result
  })
})

function observe (obj) {
  if (typeof obj !== 'object' || obj === null) {
    return
  }

  new Observer(obj)
}

function defineReactive (obj, key, val) { }

class KVue {
  constructor(options) {
    this.$options = options
    this.$data = options.data

    observe(this.$data)
  }
}

class Observer {
  constructor(value) {
    this.value = value
    this.walk(value)
  }
  walk (obj) {
    Object.keys(obj).forEach(key => {
      defineReactive(obj, key, obj[key])
    })
  }
}

class KVue {
  constructor(options) {
    // ...
    proxy(this, '$data')
  }
}

function proxy (vm) {
  Object.keys(vm.$data).forEach(key => {
    Object.defineProperty(vm, key, {
      get () {
        return vm.$data[key]
      },
      set (newVal) {
        vm.$data[key] = newVal
      }
    })
  })
}

class Compile {
  constructor(el, vm) {
    this.$vm = vm
    this.$el = document.querySelector(el)

    if (this.$el) {
      // 编译模板
      this.compile(this.$el)
    }
  }
  compile (el) {
    // 递归遍历el
    const childNodes = el.childNodes
    Array.from(childNodes).forEach(node => {
      // 判断其类型
      if (this.isElement(node)) {
        console.log('编译元素：', node.nodeName)
      } else if (this.isInterpolation(node)) {
        console.log('编译插值文本：', node.textContent)
      }
      if (node.childNodes && node.childNodes.length > 0) {
        this.compile(node)
      }
    })
  }

  // 元素
  isElement (node) {
    return node.nodeType === 1
  }

  // 判断是否是插值表达式{{xxx}}
  isInterpolation (node) {
    return node.nodeType === 3 && /\{\{(.*)\}\}/.test(node.textContent)
  }
}  

compile(el) {
  // ...
    } else if (this.isInerpolation(node)) {
      // console.log("编译插值⽂本" + node.textContent);
      this.compileText(node);
    }
  });
}
compileText(node) {
  console.log(RegExp.$1);
  node.textContent = this.$vm[RegExp.$1];
}

compile(el) {
  //...
  if (this.isElement(node)) {
    // console.log("编译元素" + node.nodeName);
    this.compileElement(node)
  }
}
compileElement(node) {
  let nodeAttrs = node.attributes;
  Array.from(nodeAttrs).forEach(attr => {
    let attrName = attr.name;
    let exp = attr.value;
    if (this.isDirective(attrName)) {
      let dir = attrName.substring(2);
      this[dir] && this[dir](node, exp);
    }
  });
}
isDirective(attr) {
  return attr.indexOf("k-") == 0;
}
text(node, exp) {
  node.textContent = this.$vm[exp];
}

const watchers = []  // 临时用于保存 watcher 测试用
// 监听器：负责更新视图
class Watcher {
  constructor(vm, key, updateFn) {
    // kvue 实例
    this.vm = vm;
    // 依赖 key
    this.key = key;
    // 更新函数
    this.updateFn = updateFn;
    // 临时放入 watchers 数组
    watchers.push(this)
  }
  // 更新
  update () {
    this.updateFn.call(this.vm, this.vm[this.key]);
  }
}

// 调 update 函数执插值文本赋值
compileText(node) {
  // console.log(RegExp.$1);
  // node.textContent = this.$vm[RegExp.$1];
  this.update(node, RegExp.$1, 'text')
}
text(node, exp) {
  this.update(node, exp, 'text')
}
html(node, exp) {
  this.update(node, exp, 'html')
}
update(node, exp, dir) {
  const fn = this[dir + 'Updater']
  fn && fn(node, this.$vm[exp])
  new Watcher(this.$vm, exp, function (val) {
    fn && fn(node, val)
  })
}
textUpdater(node, val) {
  node.textContent = val;
}
htmlUpdater(node, val) {
  node.innerHTML = val
}

class Dep {
  constructor() {
    this.deps = []
  }
  addDep (dep) {
    this.deps.push(dep)
  }
  notify () {
    this.deps.forEach(dep => dep.update());
  }
}

class Watcher {
  constructor(vm, key, updateFn) {
    Dep.target = this;
    this.vm[this.key];
    Dep.target = null;
  }
}

defineReactive(obj, key, val) {
  this.observe(val);
  const dep = new Dep()
  Object.defineProperty(obj, key, {
    get () {
      Dep.target && dep.addDep(Dep.target);
      return val
    },
    set (newVal) {
      if (newVal === val) return
      dep.notify()
    }
  })
}

class KVue {
  constructor(options) {
    this.$options = options // 挂载实例
    this.$data = options.data  // 数据响应化
    // 监听拦截数据
    this.observe(this.$data)

    // // 模拟一个 watcher 创建
    // new Watcher()
    // this.$data.a
    // new Watcher()
    // this.$data.c.d
    // // 模拟结束
    new Compile(options.el, this)
    // created 执行
    if (options.created) {
      options.created.call(this)
    }
  }
  observe (value) {
    if (!value || typeof value !== 'object') {
      return
    }
    // 遍历该对象
    Object.keys(value).forEach(key => {
      this.defineReactive(value, key, value[key])
      // 代理 data 中的属性到 vue 实例上
      this.proxyData(key)
    })
  }
  // 数据响应化
  defineReactive (obj, key, val) {

    this.observe(val) // 递归解决数据的嵌套

    const dep = new Dep() // 每执行一次 defineReactive，就创建一个 Dep 实例

    Object.defineProperty(obj, key, { // 数据劫持
      configurable: true,
      enumerable: true,
      get () {
        Dep.target && dep.addDep(Dep.target)
        return val
      },
      set (newVal) {
        if (newVal === val) {
          return
        }
        val = newVal
        console.log(`${key}属性更新了:${val}`)
        dep.notify()
      }
    })
  }
  proxyData (key) {
    Object.defineProperty(this, key, {
      configurable: true,
      enumerable: true,
      get () {
        return this.$data[key]
      },
      set (newVal) {
        this.$data[key] = newVal
      }
    })
  }
}
// Dep：用来管理 Watcher
class Dep {
  constructor() {
    this.deps = [] // 这里存放若干依赖（watcher），一个依赖对应一个属性，依赖就是视图上的引用
  }
  addDep (dep) {
    this.deps.push(dep)
  }
  notify () {
    this.deps.forEach(dep => dep.update())
  }
}
// Watcher:小秘书，界面中的一个依赖对应一个小秘书
class Watcher {
  constructor(vm, key, cb) {
    this.vm = vm
    this.key = key
    this.cb = cb
    // 将当前 Watcher 实例指定到 Dep 静态属性 target
    Dep.target = this
    this.vm[this.key]  // 触发 getter、添加依赖
    Dep.target = null
  }
  update () {
    console.log('Watcher监听的属性更新了')
    this.cb.call(this.vm, this.vm[this.key])
  }
}

// 用法 new Compile(el,vm)
class Compile {
  constructor(el, vm) {
    // 要遍历的宿主节点
    this.$el = document.querySelector(el)
    this.$vm = vm
    // 开始编译
    if (this.$el) {
      // 转换内部内容为片段 Fragment
      this.$fragment = this.node2Fragment(this.$el)
      // 执行编译
      this.compile(this.$fragment)
      // 将编译完的 html 结果追加至 $el
      this.$el.appendChild(this.$fragment)
    }
  }
  // 将宿主元素中代码片段拿出来遍历，这样做比较高效
  node2Fragment (el) {
    const frag = document.createDocumentFragment()
    // 将 el 中所有子元素搬家至 frag 中
    let child
    while (child = el.firstChild) {
      frag.appendChild(child)
    }
    return frag
  }
  // 编译过程
  compile (el) {
    const childNodes = el.childNodes
    Array.from(childNodes).forEach(node => {
      // 类型判断
      if (this.isElement(node)) {
        // 元素
        console.log('编译元素' + node.nodeName)
        // 查找k-/@/:
        const nodeAttrs = node.attributes
        Array.from(nodeAttrs).forEach((attr) => {
          const attrName = attr.name // 属性名
          const exp = attr.value  // 属性值
          if (this.isDirective(attrName)) {
            // k-text
            const dir = attrName.substring(2)
            // 执行指令
            this[dir] && this[dir](node, this.$vm, exp)
          }
          if (this.isEvent(attrName)) {
            const dir = attrName.substring(1) // @click
            this.eventHandler(node, this.$vm, exp, dir)
          }
        })
      } else if (this.isInterpolation(node)) {
        // 插值文本
        console.log('编译文本' + node.textContent)
        this.compileText(node)
      }
      // 递归子节点
      if (node.childNodes && node.childNodes.length > 0) {
        this.compile(node)
      }
    })
  }
  compileText (node) {
    console.log(RegExp.$1)
    // node.textContent = this.$vm.$data[RegExp.$1]
    this.update(node, this.$vm, RegExp.$1, 'text')
  }
  // 更新函数
  update (node, vm, exp, dir) {
    const updaterFn = this[dir + 'Updater']
    // 初始化
    updaterFn && updaterFn(node, vm[exp])
    // 依赖收集
    new Watcher(vm, exp, function (value) {
      updaterFn && updaterFn(node, value)
    })
  }
  html (node, vm, exp) {
    this.update(node, vm, exp, 'html')
  }
  htmlUpdater (node, value) {
    node.innerHTML = value
  }
  text (node, vm, exp) {
    this.update(node, vm, exp, 'text')
  }
  // 双绑
  model (node, vm, exp) {
    // 指定 input 的 value 属性
    this.update(node, vm, exp, 'model')
    // 视图对模型响应
    node.addEventListener('input', e => {
      vm[exp] = e.target.value
    })
  }
  modelUpdater (node, value) {
    node.value = value
  }
  textUpdater (node, value) {
    node.textContent = value
  }
  // 事件处理器
  eventHandler (node, vm, exp, dir) {
    let fn = vm.$options.methods && vm.$options.methods[exp]
    if (dir && fn) {
      node.addEventListener(dir, fn.bind(vm))
    }
  }
  isDirective (attr) {
    return attr.indexOf('k-') === 0
  }
  isEvent (attr) {
    return attr.indexOf('@') === 0
  }
  isElement (node) {
    return node.nodeType === 1
  }
  // 插值文本
  isInterpolation (node) {
    return node.nodeType === 3 && /\{\{(.*)\}\}/.test(node.textContent)
  }
}