当前位置：首页 > JavaScript

js实现mvvm

2026-02-02 11:49:32JavaScript

实现 MVVM 模式的 JavaScript 核心方法

数据绑定实现

通过 Object.defineProperty 或 Proxy 实现数据劫持

// Proxy 实现
const data = { text: '' }
const proxy = new Proxy(data, {
  set(target, key, value) {
    target[key] = value
    updateView(key, value)
    return true
  }
})

function updateView(key, value) {
  console.log(`更新DOM: ${key} = ${value}`)
}

模板编译

使用文档片段编译 DOM 模板

function compile(template) {
  const fragment = document.createDocumentFragment()
  let node = document.querySelector(template)
  while (node.firstChild) {
    fragment.appendChild(node.firstChild)
  }

  // 替换模板变量
  traverse(fragment)
  document.querySelector(template).appendChild(fragment)
}

function traverse(node) {
  if (node.nodeType === 3) { // 文本节点
    node.nodeValue = node.nodeValue.replace(/\{\{(.*)\}\}/, (_, key) => {
      return data[key.trim()]
    })
  }
}

观察者模式实现

建立依赖收集系统

class Dep {
  constructor() {
    this.subs = []
  }
  addSub(sub) {
    this.subs.push(sub)
  }
  notify() {
    this.subs.forEach(sub => sub.update())
  }
}

class Watcher {
  constructor(vm, exp, cb) {
    this.vm = vm
    this.exp = exp
    this.cb = cb
    this.value = this.get()
  }
  get() {
    Dep.target = this
    const value = this.vm.data[this.exp]
    Dep.target = null
    return value
  }
  update() {
    this.cb(this.vm.data[this.exp])
  }
}

完整 MVVM 框架结构

class MVVM {
  constructor(options) {
    this.$el = options.el
    this.$data = options.data

    // 数据代理
    Object.keys(this.$data).forEach(key => {
      this.proxyData(key)
    })

    // 数据响应式
    observe(this.$data)

    // 模板编译
    new Compile(this.$el, this)
  }

  proxyData(key) {
    Object.defineProperty(this, key, {
      get() {
        return this.$data[key]
      },
      set(newVal) {
        this.$data[key] = newVal
      }
    })
  }
}

实际应用示例

<div id="app">
  <input v-model="message">
  <p>{{ message }}</p>
</div>

<script>
const vm = new MVVM({
  el: '#app',
  data: {
    message: 'Hello MVVM'
  }
})
</script>

关键点总结：