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

1,420 阅读7分钟

这段时间 在工作之余的休息时间,学习了解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的浏览器兼容性问题:地址

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