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

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

下面我们就来简单的分析下我们这个函数的作用以及用法

//初始化
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的浏览器兼容性问题:地址

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

有兴趣的朋友欢迎加入交流!!!

相关文章
|
6天前
|
JavaScript
Vue基础知识总结 4:vue组件化开发
Vue基础知识总结 4:vue组件化开发
|
6天前
|
存储 JavaScript
Vue 状态管理工具vuex
Vue 状态管理工具vuex
|
9天前
|
JavaScript 前端开发 开发者
前端框架对比:Vue.js与Angular的优劣分析与选择建议
【10月更文挑战第27天】在前端开发领域,Vue.js和Angular是两个备受瞩目的框架。本文对比了两者的优劣,Vue.js以轻量级和易上手著称,适合快速开发小型到中型项目;Angular则由Google支持,功能全面,适合大型企业级应用。选择时需考虑项目需求、团队熟悉度和长期维护等因素。
15 1
|
10天前
|
前端开发 数据库
芋道框架审批流如何实现(Cloud+Vue3)
芋道框架审批流如何实现(Cloud+Vue3)
30 3
|
11天前
|
JavaScript
如何在 Vue 中使用具名插槽
【10月更文挑战第25天】通过使用具名插槽,你可以更好地组织和定制组件的模板结构,使组件更具灵活性和可复用性。同时,具名插槽也有助于提高代码的可读性和可维护性。
15 2
|
10天前
|
JavaScript 前端开发 API
前端框架对比:Vue.js与Angular的优劣分析与选择建议
【10月更文挑战第26天】前端技术的飞速发展让开发者在构建用户界面时有了更多选择。本文对比了Vue.js和Angular两大框架,介绍了它们的特点和优劣,并给出了在实际项目中如何选择的建议。Vue.js轻量级、易上手,适合小型项目;Angular结构化、功能强大,适合大型项目。
12 0
|
Web App开发 JavaScript 前端开发
Vue框架快速入门
Vue是现在最流行的前端框架之一,而且相对于其他两个框架React和Angular来说也更加易学,而且它的作者是国人,中文文档也很完善。当然Vue框架算是比较高级的框架,所以在使用过程中还需要JavaScript、JavaScript 2015、WebPack、NodeJS、npm、ESLint、JavaScript单元测试框架等其他知识和框架的使用方法。
1338 0
|
13天前
|
数据采集 监控 JavaScript
在 Vue 项目中使用预渲染技术
【10月更文挑战第23天】在 Vue 项目中使用预渲染技术是提升 SEO 效果的有效途径之一。通过选择合适的预渲染工具,正确配置和运行预渲染操作,结合其他 SEO 策略,可以实现更好的搜索引擎优化效果。同时,需要不断地监控和优化预渲染效果,以适应不断变化的搜索引擎环境和用户需求。
|
13天前
|
缓存 JavaScript 搜索推荐
Vue SSR(服务端渲染)预渲染的工作原理
【10月更文挑战第23天】Vue SSR 预渲染通过一系列复杂的步骤和机制,实现了在服务器端生成静态 HTML 页面的目标。它为提升 Vue 应用的性能、SEO 效果以及用户体验提供了有力的支持。随着技术的不断发展,Vue SSR 预渲染技术也将不断完善和创新,以适应不断变化的互联网环境和用户需求。
31 9
|
12天前
|
缓存 JavaScript UED
Vue 中实现组件的懒加载
【10月更文挑战第23天】组件的懒加载是 Vue 应用中提高性能的重要手段之一。通过合理运用动态导入、路由配置等方式,可以实现组件的按需加载,减少资源浪费,提高应用的响应速度和用户体验。在实际应用中,需要根据具体情况选择合适的懒加载方式,并结合性能优化的其他措施,以打造更高效、更优质的 Vue 应用。
下一篇
无影云桌面