手把手教你Vue从零撸一个迷你版MVVM框架

作者: Somnus_小凯 | 来源:发表于2020-03-23 09:47 被阅读0次

这段时间在工作之余的休息时间，学习了解Vue ，学习Vue的设计思想，通过Vue官网学习Vue的语法，通过Vue前端技术，搭建构建了一个简单的项目，在项目学习完之后，发现Vue是一个很有意思的前端技术，没事就看了源码，第一次看的时候不知道如何下手，就开始在百度，谷歌，两大搜索神器的帮助下，找到了学习的快捷之路。发现了难啃的骨头，才是最有意思的事。

Vue框架到底为我们做了什么？

数据和视图分离，解耦(开放封闭原则)
1.所有数据和视图不分离的，都会命中开放封闭原则
2.Vue 数据独立在 data 里面，视图在 template 中
以数据驱动视图，只关心数据变化，dom 操作被封装
1. 使用原生js是直接通过操作dom来修改视图，例如
```
ducument.getElementById('xx').innerHTML="xxx"
```
1. 以数据驱动视图就是，我们只管修改数据，视图的部分由框架去帮我们修改，符合开放封闭模式.

如何理解 MVVM ？

MVC
1. Model 数据 → View 视图 → Controller 控制器
MVVM
1. MVVM不算是一种创新
2. 但是其中的 ViewModel 是一种创新
3. ViewModel 是真正结合前端应用场景的实现
如何理解MVVM
1. MVVM - Model View ViewModel，数据，视图，视图模型
2. 三者与 Vue 的对应：view 对应 template，vm 对应 new Vue({…})，model 对应 data
3. 三者的关系：view 可以通过事件绑定的方式影响 model，model 可以通过数据绑定的形式影响到view，viewModel是把 model 和 view 连起来的连接器

我们来看一下最后我们要达到的效果

vue.gif

我们先来看下我们简单的结构

mini-MVVM结构

Vue项目源码

以上就是我们简单搭建的项目目录结构，有需要了解可以去阅读源码来了解更多，这里就不做过多的展开

我们先来看下我们index.html完整代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>MiniMVVM 框架demo演示</title>
        <link rel="stylesheet" href="./css/mini-mvvm.css"/> 
    </head>
    <body>
        <div id="app">
            <h1>{{title}}</h1>
            <div>
                <span>文本输入框：</span>
                <input type="text" v-model="message"/>
            </div>
            <section>
                <samp>数据显示结果:</samp>
                <hr/>
                <span>{{message}}</span>
            </section>
        </div>

    <script type="text/javascript" src="js/mini-mvvm.js"></script>
    <script>
        var app=new MiniMVVM({
            el:'#app',
            data:{
                title:'Mini-MVVM demo演示',
                message:'Hello World ! ! !'
            }
        });
    </script>

    </body>
</html>

大家看到这里有没有发现，我们调用不是Vue 而是我们自己自定义的MiniMVVM，没错。那我们再来看看Vue的用法，帮大家回顾一下

<div id="app">
  {{ message }}
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

Hello Vue!

我们已经成功创建了第一个 Vue 应用！看起来这跟渲染一个字符串模板非常类似，但是 Vue 在背后做了大量工作。现在数据和 DOM 已经被建立了关联，所有东西都是响应式的。我们要怎么确认呢？打开你的浏览器的 JavaScript 控制台 (就在这个页面打开)，并修改 app.message 的值，你将看到上例相应地更新。
接下来是我们的函数类

(function () {
    //初始化类
    class MiniMVVM {...}
    //模板编译类
    class TemplateCompile {...}

    //数据劫持类，响应式
    class Observer {...}

    //观察者
    class Watcher {...}

    //发布订阅类 自定义事件
    class Emitter {...}

    //存储指令和工具方法
    let CompileTool = {...};
    window.MiniMVVM = MiniMVVM;
})();

这是我们mini版的函数类，这里我们只实现了简单的双向数据绑定，目的是为了让大家学习思想，以及理解分析


  function initMixin (Vue) {...}

  function initInternalComponent (vm, options) {...}

  function resolveConstructorOptions (Ctor) {...}

  function resolveModifiedOptions (Ctor) {...}

  function Vue (options) {
    if (!(this instanceof Vue)
    ) {
      warn('Vue is a constructor and should be called with the `new` keyword');
    }
    this._init(options);
  }

  initMixin(Vue);
  stateMixin(Vue);
  eventsMixin(Vue);
  lifecycleMixin(Vue);
  renderMixin(Vue);

  /*  */

  function initUse (Vue) {...}

  /*  */

  function initMixin$1 (Vue) {...}

  /*  */

  function initExtend (Vue) {

如果让我们光来看Vue.js 就是一万两千行代码，我相信大多数和我一样，看到这么多行代码人已经崩溃了直接就选择了放弃，我们虽然是mini版的，我们也借助vue设计来写我们mini版。
下面我们就来简单的分析下我们这个函数的作用以及用法

//初始化
class MiniMVVM {
        constructor(options) {
            this.$el = options.el;
            this.$data = options.data;
            //判断是否有模板，如果有模板的话，就执行编译和数据劫持
            if (this.$el) {
                //1,数据劫持
                this.$data = (new Observer()).observe(this.$data);
                //2,模板编译
                new TemplateCompile(this.$el, this);
            }
        }
    }

这里我们主要是为了获取我们模板信息以及数据
下一步我们来看一下我们数据劫持监听

 //数据劫持类，响应式
    class Observer {
        constructor(data) {
            this.data = data;
            this.observe(this.data);
        }

        observe(data) {
            //验证是否存在，是否是对象
            if (!data || typeof data !== 'object') {
                return;
            }
            //使用proxy 代理拦截监听
            let that = this;
            //初始化发布订阅
            let emitter = new Emitter();
            let handler = {
                get(target, key) {
                    //递归当前target[key] 是否是对象
                    if (typeof target[key] === 'object' && target[key] !== null) {
                        return new Proxy(target[key], handler);
                    }
                    //判断当前key下面的watcher是否存在
                    if (Emitter.watcher) {
                        emitter.addSub(Emitter.watcher);
                    }
                    return target[key];
                },
                set(target, key, newVal) {
                    if (target[key] !== newVal) {
                        target[key] = newVal;
                        emitter.notify();
                    }
                }
            }
            //创建proxy代理
            let pdata = new Proxy(data, handler);
            return pdata;
        }
    }

Proxy语法和用例

let p = new Proxy(target, handler);

将目标和处理程序传递给Proxy构造函数，这样就创建了一个proxy对象。

//模板编译类
    class TemplateCompile {
        constructor(el, vm) {
            //1,获取元素
            this.el = (el.nodeType === 1 ? el : document.querySelector(el));
            //2，获取vm实例
            this.vm = vm;
            //如果元素存在，然后我们进行编译
            if (this.el) {
                //获取模板
                let fragment = this.nodeToFragment(this.el);
                //模板语法解析
                this.cpmpile(fragment);
                //把最后生成的文档结构重新append到我们页面中去
                this.el.appendChild(fragment);
            }

        }
        //获取模板
        nodeToFragment(el) {
            let fragment = document.createDocumentFragment();
            let firstChild = null;

            while (firstChild = el.firstChild) {
                fragment.appendChild(firstChild);
            }
            return fragment;
        }
        //解析文档碎片，编译模板中的变量
        cpmpile(fragment) {
            //1，获取所有的子节点（包括元素解点）
            let childNodes = fragment.childNodes;
            //2,遍历循环每个节点
            Array.from(childNodes).forEach(node => {
                //如果是元素节点
                if (node.nodeType === 1) {
                    //递归遍历子节点
                    this.cpmpile(node);
                    //处理我们的元素节点
                    this.complieElement(node);
                } else {
                    //处理我们的文本节点
                    this.complieText(node);
                }
            })
        }

        //编译处理
        complieText(nodeText) {
            //获取文本节点的内容
            let exp = nodeText.textContent;
            //这里我们通过正则获取{{}}里面的数据
            let re = /{{[^}]+}}/g;
            if (re.test(exp)) {
                //渲染页面数据
                CompileTool.text(nodeText, this.vm, exp)
            }

        }
        //编译处理元素节点
        complieElement(node) {
            console.log(node);
            //取出所有的属性
            let attrs = node.attributes;
            //边里属性 检测是否具备‘-v’
            Array.from(attrs).forEach(attr => {
                console.log(attr.name);
                if (attr.name.includes('v-')) {
                    //如果是v-attr 这样的指令 我们去我们对应的寻找属性值字符串所对应的值
                    let exp = attr.value;
                    let type = exp.split('-')[1];
                    //调用model指令对应的方法，渲染页面数据
                    CompileTool.model(node, this.vm, exp);
                }
            })

        }
    }

这是我们模板类代码，这里主要是解析我们定义好的模板语法，下面我们再来看下我们观察者类

//观察者
    class Watcher {
        constructor(vm, exp, callback) {
            this.vm = vm;
            this.exp = exp;
            this.callback = callback;
            //获取当前的值
            this.oldValue = this.get();
        }
        get() {
            //初始化发布订阅状态值
            Emitter.watcher = this;
            //获取这个data上面的值
            let val = CompileTool.getVal(this.vm, this.exp)
            //清空一下发布状态置
            Emitter.watcher = null;
            //返回当前值
            return val;
        }
        update() {
            //获取当前值
            let newVal = CompileTool.getVal(this.vm, this.exp)
            //拿到旧的值
            let oldVal = this.oldValue;
            //比较两次的值，是否保持一致，如果不一致就执行回调
            if (newVal != oldVal) {
                this.callback(newVal);
            }
        }
    }

观察者见名思义，看过或者学习过设计模式的都应该知道观察者模式,这里就不做过多的解释，有兴趣的朋友可以百度一下。
剩下的就是我们的发布订阅

//发布订阅类 自定义事件
    class Emitter {
        constructor() {
            this.subs = [];
        }
        //添加一个订阅
        addSub(watcher) {
            this.subs.push(watcher);
        }
        //通知执行订阅
        notify() {
            this.subs.forEach(v => v.update());
        }
    }

通过以上不到300的行的代码，我们就实现了简单的双向数据绑定
有朋友会说你现在没有其他的文件以及配置，是的，不需要我们也是能实现数据的双向绑定，这里的剩下的webpack打包，webpack打包这个算是比较简单了，对于学习前端vue来说，那是再熟悉不过的了，这里就不过多的介绍了，下一章节我们在继续探讨webpack打包脚本详细介绍。

下面提供几个学习es地址大家可以去看一下，中英文都有。

ES5地址

中文版：中文地址
英文版：英文地址

ES6地址

中文版：中文地址
英文版：英文地址
ES6的浏览器兼容性问题:地址

非常感谢您能抽出时间来阅读，如果对你有所帮助，欢迎转发分享，您的转发分享就是对我最大的鼓励和支持。

手把手教你Vue从零撸一个迷你版MVVM框架

Vue框架到底为我们做了什么？

如何理解 MVVM ？

我们来看一下最后我们要达到的效果

我们先来看下我们简单的结构

我们先来看下我们index.html完整代码

ES5地址

ES6地址

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读