Vue 实现mvvm框架

最新推荐文章于 2024-04-04 15:14:53 发布
最新推荐文章于 2024-04-04 15:14:53 发布
阅读量414 收藏
点赞数
分类专栏： Vue.js

最近手痒，当然也是为了近阶段的跳槽做准备，利用周五时光，仿照vue用法，实现一下mvvm的双向绑定、数据代理、大胡子{{}}模板、指令v-on，v-bind等。当然由于时间紧迫，里面的编码细节没有做优化，还请各位看官多多包涵！看招：

实现原理

  • 数据的劫持观察（observe）
  • 观察者模式（watcher）
  • 使用es6的类class实现（当然，没有考虑到兼容性，只是为了实现而已）

代码：

  • 数据劫持
_observe(obj){
        // 递归遍历
        // let value;
        for (const key in obj) {
          let value;
          if (obj.hasOwnProperty(key)){
            // 利用原理 劫持数据---发布订阅

            value = obj[key];
            if (typeof value === 'object') {
              console.log('value', value)
              this._observe(value)
            }

            // 订阅(key)数据
            if (!this._binding[key]) {this._binding[key]= []};
            let binding = this._binding[key]
            // 重写getter, setter
            Object.defineProperty(obj, key, {
              enumerable: true,
              configurable: true,
              get() {
                return value
              },
              set(newVal) {
                if (value === newVal) return false;
                value = newVal
                console.log('newvalue', value)
                // 主要value更新，就发布通知(监听这个key的所有的)watcher更新（改变dom）
                binding.forEach(watcher => {
                  console.log('watcher', watcher)
                  watcher.update()
                });
              }
            })
          }
        }
      }
  • 实例代理数据
_proxyData(data, vm) {
        // data身上的所有属性全部挂载到vm实例上
        for (const key in data) {
          // let val = data[key];
          // ctx.key = val;
          Object.defineProperty(vm, key, {
            configurable: true,
            enumerable: true,
            get() {
              return data[key];
            },
            set(newVal) {
              data[key] = newVal;
              vm._observe(newVal)
            }
          })
        }
      }
  • 模板编译，添加发布订阅
_compile(root){
        // 获取所有节点
        let nodes = root.childNodes
        
        // 递归编译
        Array.from(nodes).forEach(node => {
          // 针对每一个节点进行处理

          // 元素节点
          if (node.nodeType === 1) {//只考虑绑定了一个指令
            // 获取节点的属性集合
            
            const attributes = Array.from(node.attributes);

            // 指令进行编译
            if (hasDirective(attributes, 'v-bind')) {
              const attrVal = getDirectiveValue(node, attributes, 'v-bind');
              const exp = getDirectiveParams(attributes, 'v-bind');
              // const 
              node.setAttribute(exp, this.$data[attrVal])
              this._binding[attrVal].push(new watcher({
                vm: this, 
                el: node,
                exp,
                attr: attrVal
              }))
            }
            if (hasDirective(attributes, 'v-on')) {
              const eventName = getDirectiveParams(attributes, 'v-on');
              node.addEventListener(eventName, (e) => {
                this.$methods[getDirectiveValue(node, attributes, 'v-on')].call(this)
              })
            }
            if (node.hasAttribute('v-model') && node.tagName === 'INPUT' || node.tagName === 'TEXTAREA') {
              let attrVal = node.getAttribute('v-model');
              this._binding[attrVal].push(new Watcher({
                  vm: this,
                  el: node,
                  attr: attrVal,
                  name: 'v-model'
                }))
              node.addEventListener('input', e=> {
                this.$data[attrVal] = node.value;
              })
              node.value = this.$data[attrVal]
            }

            // 递归接着处理
            if (node.hasChildNodes()) {
              this._compile(node)
            }
          }

          // 文本节点
          if (node.nodeType === 3) {
            let text = node.textContent;

            let keyArr = [];
            // 获取{{变量}}，用正则去匹配；watcher去观察{{变量}}(包裹元素)，
            let newText = text.replace(/\{\{(\w+)\}\}/g, (match, p0)=> {
              keyArr = [...keyArr, p0];
              // 替换属性为真正的属性值
              return this.$data[p0]
            })
            node.textContent = newText;

            // 把整个文本节点进行监控{{v1}}-----{{v2}}；添加到订阅到数组里等待通知
            keyArr.forEach(key => {
              // !this._binding[key] && (this._binding[key] = [])
              this._binding[key].push(new Watcher({
                vm: this,
                el: node,
                attr: text
              }))
            })
          }
        })
      }
  • 观察者实例
class Watcher {
      constructor({
        vm,
        name,
        el,
        exp,
        attr,
      }) {
        this.vm = vm;
        this.el = el;
        this.name = name;
        this.exp = exp;
        this.attr = attr;
      }
      // 更新text,或更新属性
      update() {
        // 改变节点的属性
        if (this.el.nodeType === 1) {
          // this.el.value = this.vm.$data[this.exp]
          if (this.name === 'v-model') {
            console.log('value', this.el)
            this.el.value = this.vm.$data[this.attr]
          }
          this.el[this.attr] = this.vm.$data[this.exp]
        }
        // 文本节点
        else {
          let text = this.attr;
          // 获取{{变量}}，用正则去匹配；watcher去观察{{变量}}(包裹元素)，
          let newText = text.replace(/\{\{(\w+)\}\}/g, (match, p0)=> {
            // 替换属性为真正的属性值
            return this.vm.$data[p0]
          })
          this.el.textContent = newText;
        }
      }
    }
  • 整体代码
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>vue实现</title>
  <style>
  </style>
</head>
<body>
  <div id="app">
    <!-- <form> -->
    <h2>{{title}}</h2>
    <p>{{text}}</p>
    <input type="text" v-model="number">
    <button v-on:click="increase">增加</button>
    <button v-on:click="decrease">减少</button>
    <!-- </form> -->
    <p>我点的时候就会变化{{number}}---{{number}}</h2>
  </div>
  <script>
    // 构造watcher类，用来观察数据变化来（本质更新dom的指令属性或innertext)
    /**
     * vm: vue实例 
     * name: 指令名
     * el: 节点
     * exp: 指令对应的参数
     * attr: 指令值（绑定的属性名）
    **/ 
    class Watcher {
      constructor({
        vm,
        name,
        el,
        exp,
        attr,
      }) {
        this.vm = vm;
        this.el = el;
        this.name = name;
        this.exp = exp;
        this.attr = attr;
      }
      // 更新text,或更新属性
      update() {
        // 改变节点的属性
        if (this.el.nodeType === 1) {
          // this.el.value = this.vm.$data[this.exp]
          if (this.name === 'v-model') {
            console.log('value', this.el)
            this.el.value = this.vm.$data[this.attr]
          }
          this.el[this.attr] = this.vm.$data[this.exp]
        }
        // 文本节点
        else {
          let text = this.attr;
          // 获取{{变量}}，用正则去匹配；watcher去观察{{变量}}(包裹元素)，
          let newText = text.replace(/\{\{(\w+)\}\}/g, (match, p0)=> {
            // 替换属性为真正的属性值
            return this.vm.$data[p0]
          })
          this.el.textContent = newText;
        }
      }
    }


    function hasDirective(attrs, dir) {
      return attrs.some(attr => attr.name.indexOf(dir) !== -1)
    }
    function getDirectiveParams(attrs, dir) {
      dir = attrs.find(attr => attr.name.indexOf(dir) !== -1).name
      return dir.split(':')[1] ? dir.split(':')[1].split('.')[0] : '';
    }
    function getDirectiveValue(node, attrs, dir) {
      return attrs.find(attr => attr.name.indexOf(dir) !== -1).value;
    }

    class DuVue {
      constructor(options) {
        this._init(options);
      }
      _init(options) {
        this.$options = options
        this.$data = options.data
        this.$methods = options.methods
        this.$el = document.querySelector(options.el)

        this._binding = {}
        this._observe(this.$data)
        // 代理所有数据
        this._proxyData(this.$data, this)

        this._compile(this.$el)
      }
      _observe(obj){
        // 递归遍历
        // let value;
        for (const key in obj) {
          let value;
          if (obj.hasOwnProperty(key)){
            // 利用原理 劫持数据---发布订阅

            value = obj[key];
            if (typeof value === 'object') {
              console.log('value', value)
              this._observe(value)
            }

            // 订阅(key)数据
            if (!this._binding[key]) {this._binding[key]= []};
            let binding = this._binding[key]
            // 重写getter, setter
            Object.defineProperty(obj, key, {
              enumerable: true,
              configurable: true,
              get() {
                return value
              },
              set(newVal) {
                if (value === newVal) return false;
                value = newVal
                console.log('newvalue', value)
                // 主要value更新，就发布通知(监听这个key的所有的)watcher更新（改变dom）
                binding.forEach(watcher => {
                  console.log('watcher', watcher)
                  watcher.update()
                });
              }
            })
          }
        }
      }
      // 实例代理数据
      _proxyData(data, vm) {
        // data身上的所有属性全部挂载到vm实例上
        for (const key in data) {
          // let val = data[key];
          // ctx.key = val;
          Object.defineProperty(vm, key, {
            configurable: true,
            enumerable: true,
            get() {
              return data[key];
            },
            set(newVal) {
              data[key] = newVal;
              vm._observe(newVal)
            }
          })
        }
      }
      _compile(root){
        // 获取所有节点
        let nodes = root.childNodes
        
        // 递归编译
        Array.from(nodes).forEach(node => {
          // 针对每一个节点进行处理

          // 元素节点
          if (node.nodeType === 1) {//只考虑绑定了一个指令
            // 获取节点的属性集合
            
            const attributes = Array.from(node.attributes);

            // 指令进行编译
            if (hasDirective(attributes, 'v-bind')) {
              const attrVal = getDirectiveValue(node, attributes, 'v-bind');
              const exp = getDirectiveParams(attributes, 'v-bind');
              // const 
              node.setAttribute(exp, this.$data[attrVal])
              this._binding[attrVal].push(new watcher({
                vm: this, 
                el: node,
                exp,
                attr: attrVal
              }))
            }
            if (hasDirective(attributes, 'v-on')) {
              const eventName = getDirectiveParams(attributes, 'v-on');
              node.addEventListener(eventName, (e) => {
                this.$methods[getDirectiveValue(node, attributes, 'v-on')].call(this)
              })
            }
            if (node.hasAttribute('v-model') && node.tagName === 'INPUT' || node.tagName === 'TEXTAREA') {
              let attrVal = node.getAttribute('v-model');
              this._binding[attrVal].push(new Watcher({
                  vm: this,
                  el: node,
                  attr: attrVal,
                  name: 'v-model'
                }))
              node.addEventListener('input', e=> {
                this.$data[attrVal] = node.value;
              })
              node.value = this.$data[attrVal]
            }

            // 递归接着处理
            if (node.hasChildNodes()) {
              this._compile(node)
            }
          }

          // 文本节点
          if (node.nodeType === 3) {
            let text = node.textContent;

            let keyArr = [];
            // 获取{{变量}}，用正则去匹配；watcher去观察{{变量}}(包裹元素)，
            let newText = text.replace(/\{\{(\w+)\}\}/g, (match, p0)=> {
              keyArr = [...keyArr, p0];
              // 替换属性为真正的属性值
              return this.$data[p0]
            })
            node.textContent = newText;

            // 把整个文本节点进行监控{{v1}}-----{{v2}}；添加到订阅到数组里等待通知
            keyArr.forEach(key => {
              // !this._binding[key] && (this._binding[key] = [])
              this._binding[key].push(new Watcher({
                vm: this,
                el: node,
                attr: text
              }))
            })
          }
        })
      }
    }
    window.onload = function(){
      var duVue = new DuVue({
        el: '#app',
        data: {
          number: 0,
          title: '手写vue',
          text: '用到es6 class',
          obj: {a:1}
        },
        methods: {
          increase() {
            console.log('click-increase')
            this.number++
          },
          decrease() {
            this.number--
          }
        }
      })
      console.log(duVue)
    }
  </script>
</body>
</html>
Jarvan大熊
关注
专栏目录
Vue：MVVM模型
changpili123456的博客
09-30 532
使用Vue.js来理解MVVM模型，体验双向数据绑定
入门 - vue中v-model的实现原理和完整用法详解
最新发布
qq_61863348的博客
08-16 2076
v-model是vue的双向绑定的指令，能将页面上控件输入的值同步更新到相关绑定的data属性，也会在更新data绑定属性时候，更新页面上输入控件的值。在view层，model层相互需要数据交互，即可使用v-model。inputselect等）可以简写为v-model，因为v-model默认收集的就是value值。
Vue中的mvvm框架
m0_67736146的博客
05-08 1828
在Vue框架中，MVVM是指“模型-视图-视图模型”
Vue的MVVM框架
weixin_45890764的博客
01-13 595
MVVM是Model-View-ViewModel的简写。即模型-视图-视图模型。【模型】指的是后端传递的数据。【视图】指的是所看到的页面。【视图模型】mvvm模式的核心，它是连接view和model的桥梁。它有两个方向：一是将【模型】转化成【视图】，即将后端传递的数据转化成所看到的页面。实现的方式是：数据绑定。二是将【视图】转化成【模型】，即将所看到的页面转化成后端的数据。实现的方式是：DOM 事件监听。这两个方向都实现的，我们称之为数据的双向绑定。在MVVM的框架下视图和模型是不能直接通信的。它们通过V
Vue的MVVM框架理解
qq_48922481的博客
08-09 616
<--Vue的学习记录--> 个人理解 Vue：展示给用户看的视图 Module：vue的功能模块 Vue Module：解析module并传输至vue的解析模块 Vue页面产生的指令和事件是由Vue Module进行解析的，解析后确认到有这个事件，然后就会回调到module里，进行不同的回调，这个就是vue的MVVM框架，Vue.js就是一个标准的MVVM框架。 （图片来源于王红元老师的讲课视频，老师的讲课很好，让我获益匪浅） ...
如何实现Vue的MVVM框架
08-12
大家都知道，vue是个MVVM框架，能够实现view和model的双向绑定，不像backbone那样，model改变需要手动去通知view更新，而vue实现的原理就是通过Object.defineProperty实现数据挟持，定义setter，然后数据改变的时候通知视图更新。
vue实现简单的MVVM框架
12-03
不知不觉接触前端的时间已经过去半年了，越来越发觉对知识的学习不应该只停留在会用的层面，这在我学jQuery的一段时间后便有这样的体会。 虽然jQuery只是一个JS的代码库，只要会一些JS的基本操作学习一两天就能很快掌握jQuery的基本语法并熟练使用，但是如果不了解jQUery库背后的实现原理，相信只要你一段时间不再使用jQuery的话就会把jQuery忘得一干二净，这也许就是知其然不知其所以然的后果。 最近在学vue的时候又再一次经历了这样的困惑，虽然能够比较熟练的掌握vue的基本使用，也能够对MV*模式、数据劫持、双向数据绑定、数据代理侃上两句。但是要是稍微深入一点就有点吃力了。所以这几
personVue一个模仿vue实现mvvm框架的简单轮子
08-12
而"personVue"则是一个旨在模仿Vue.js实现的轻量级MVVM框架。这个项目不仅为我们提供了一个学习Vue.js设计理念和机制的良好平台，还为开发者们提供了在实际应用中尝试和理解MVVM模式的机会。 MVVM（Model-View-...
基于vue的MVVM框架的研究与分析
07-20
Vue.js 是一种流行的轻量级前端开发框架，它遵循MVVM（Model-View-ViewModel）设计模式，为开发者提供了一种高效且易用的方式来构建用户界面。Vue的核心特性包括组件化、响应式数据绑定、指令系统以及易于集成的生态...
vue的MVVM架构设计模式
qq_45750263的博客
11-17 1448
常见的架构设计模式有MVC、MVP、MVVM。三者的共同点在于MV,既Model模型层和View视图层，模型层主要是业务逻辑相关的数据以及数据的处理，视图层主要是负责将数据渲染到页面上，展示给用户。那不同点在哪里。
五、【VUE基础】VUE的MVVM架构模型
天行健，君子以自强不息
07-28 229
VUE的MVVM架构模型
Vue MVVM模型，新手学web前端开发
2301_76232361的博客
04-04 732
MVVM 是的缩写，它是一种基于前端开发的架构模式，其核心是提供对View 和ViewModel 的双向数据绑定，这使得ViewModel 的状态改变可以自动传递给 View，即所谓的数据双向绑定。Vue.js是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库，专注于View 层。它的核心是 MVVM 中的 VM，也就是ViewModel。ViewModel负责连接 View 和Model，保证视图和数据的一致性，这种轻量级的架构让前端开发更加高效、便捷。
简单的实现MVVM框架
Csw_PHPer的博客
05-27 435
在前端领域， MVVM的出现无疑极大的节省了开发人员的心智，用 jquery 操作dom渲染页面的日子一去不复返。Model:数据模型View:视图View-Model:Model和View的桥梁，通过它，数据模型的变化可以直接反应到视图上，同样在视图上修改数据也会反应到数据模型。所以 MVVM的核心在于，数据驱动视图和双向数据绑定。
vue笔记1 渐进式、 MVVM 框架
qq_44613178的博客
03-16 1230
Vue学习笔记1，mvvm
MVVM框架哪家强？基于Vue实现MVVM框架
2301_76484015的博客
04-21 586
要特别注意的是，在内部编写的JavaScript代码，需要用jQuery把MVVM的初始化代码推迟到页面加载完毕后执行，否则，直接在内执行MVVM代码时，DOM节点尚未被浏览器加载，初始化将失败。这里需要注意，vue.js是未压缩的用于开发的版本，它会在浏览器console中输出很多有用的信息，帮助我们调试代码。MVVM就是在前端页面上，应用了扩展的MVC模式，我们关心Model的变化，MVVM框架自动把Model的变化映射到DOM结构上，这样，用户看到的页面内容就会随着Model的变化而更新。
vue的MVVM框架
liuyuhua666的博客
06-19 937
前端开发的历史 前端在整个开发过程当中所占的比重越来越大，数据渲染的操作逐渐向前端转移！ 前端开发的主流工作任务 数据渲染！ 前端做数据渲染： 1. DOM操作，一个个元素的去修改 2. 字符串拼接的方案 3. 模板引擎 4. MVVM框架 MV* 框架: MV*模式指的其实就是对代码进行按照功能划分模块的方式！ MVC: Model: 和数据相关的代码，负责提供数据的...
Vue中的MVVM框架
weixin_30689307的博客
07-23 213
ViewModel：数据双向绑定 场景： 　　针对具有复杂交互逻辑的前段应用 　　提供基础的架构抽象 　　通过Ajax数据持久化，保证前端用户体验 什么是vue.js？ 　　是一个轻量级的mvvm框架 　　数据驱动+组件化的前端开发 　　Github超过25k+的star数，社区完善 Vue对比Angular，react 　　vue更清凉，gzip有20k+ 　　...
VUE的MVVM框架解析
Blog_BC的博客
09-05 626
这篇文章主要介绍了MVVM模式中ViewModel和View、Model有什么区别?本文分别解释了它们的功能和作用,然后总结了它之间的区别,需要的朋友可以参考下： Model：简而言之就是业务逻辑相关的数据对象。 View：就是展现出来的用户界面。 　基本上，绝大多数软件所做的工作无非就是从数据存储中读出数据，展现到用户界面上，然后从用户界面接收输入，写入到数据存储里面去。所以，对于
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值