Javascript
手把手教你Vue从零撸一个迷你版MVVM框架
本文主要是介绍手把手教你Vue从零撸一个迷你版MVVM框架，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！
这段时间 在工作之余的休息时间，学习了解Vue ，学习Vue的设计思想，通过Vue官网学习Vue的语法，通过Vue前端技术，搭建构建了一个简单的项目，在项目学习完之后，发现Vue是一个很有意思的前端技术，没事就看了源码，第一次看的时候不知道如何下手，就开始在百度，谷歌，两大搜索神器的帮助下，找到了学习的快捷之路。发现了难啃的骨头，才是最有意思的事。
Vue框架到底为我们做了什么？
- 数据和视图分离，解耦(开放封闭原则) 1.所有数据和视图不分离的，都会命中开放封闭原则 2.Vue 数据独立在 data 里面，视图在 template 中
- 以数据驱动视图，只关心数据变化，dom 操作被封装
- 使用原生js是直接通过操作dom来修改视图，例如
ducument.getElementById('xx').innerHTML="xxx" 复制代码- 以数据驱动视图就是，我们只管修改数据，视图的部分由框架去帮我们修改，符合开放封闭模式.
如何理解 MVVM ？
- MVC
- Model 数据 → View 视图 → Controller 控制器
- MVVM
- MVVM不算是一种创新
- 但是其中的 ViewModel 是一种创新
- ViewModel 是真正结合前端应用场景的实现
- 如何理解MVVM
- MVVM - Model View ViewModel，数据，视图，视图模型
- 三者与 Vue 的对应：view 对应 template，vm 对应 new Vue({…})，model 对应 data
- 三者的关系：view 可以通过事件绑定的方式影响 model，model 可以通过数据绑定的形式影响到view，viewModel是把 model 和 view 连起来的连接器
我们来看一下最后我们要达到的效果
我们先来看下我们简单的结构
以上就是我们简单搭建的项目目录结构，有需要了解可以去阅读源码来了解更多，这里就不做过多的展开
我们先来看下我们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地址
非常感谢您能抽出时间来阅读，如果对你有所帮助，欢迎转发分享，您的转发分享就是对我最大的鼓励和支持。
这篇关于手把手教你Vue从零撸一个迷你版MVVM框架的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
-
Vue CLI多环境配置学习：从入门到实践11-24
-
Vue CLI多环境配置学习：新手入门教程11-24
-
Vue CLI学习：初学者指南11-24
-
Vue CLI学习：从入门到上手的简单教程11-24
-
Vue3+Vite学习：从零开始的前端开发之旅11-24
-
Vue3阿里系UI组件学习入门教程11-24
-
Vue3的阿里系UI组件学习入门指南11-24
-
Vue3公共组件学习：新手入门教程11-24
-
Vue3公共组件学习入门指南11-24
-
vue3核心功能响应式变量学习11-24
-
Vue3学习：从入门到初级实战教程11-24
-
集成Ant Design Vue的图标入门11-24
-
集成Ant Design Vue图标入门教程11-24
-
Vue新手入门教程：从零开始学习Vue框架11-23
-
如何集成Ant Design Vue的图标11-23
栏目导航
