ホームページ > 記事 > ウェブフロントエンド > MVVMの原理とVueでの実装方法を詳しく解説
MVVMの原理とVueでの実装方法を詳しく解説
- 青灯夜游転載
- 2020-07-15 16:44:062670ブラウズ
Vue での MVVM 原則の分析と実装
まず、次のものが必要です。 Vue についての確実な理解 MVVM を理解し、理解します。これは、次の原則の読み取り、学習、および書き込みを正常に完了するのに役立ちます
#以下は、私の Aba Aba による Vue での MVVM 原則の詳細なウォークスルーです。実装については、この記事から学ぶことができます:
1. Vue データ双方向バインディング コア コード モジュールと実装原則
2. 方法サブスクライバー パブリッシャー パターンでは、データがビューを駆動し、ビューがデータを駆動し、ビューがビューを駆動することができますか
3. 要素の命令を解析する方法
#1. アイデアを整理する
##実装のフローチャート:
MVVM に似た Vue フレームワークの単純なバージョンを実装したい場合は、次の点を実装する必要があります:
1. データ オブジェクトのすべてのプロパティを監視するデータ監視オブザーバーを実装します。データが変更された場合は、最新の値を取得してサブスクライバーに通知できます。 。
2. パーサー Compile を実装して、ページ ノードの命令を解析し、ビューを初期化します。
3. オブザーバー Watcher を実装し、データ変更をサブスクライブし、関連する更新関数をバインドします。そしてオブザーバーコレクションの一員に加わってください。 Dep は Observer と Watcher の間のブリッジであり、データの変更は Dep に通知され、Dep は対応する Watcher にビューを更新するように通知します。
2. 実装
以下は ES6 で書かれており、比較的簡潔なので実装可能です。 300 行を超えるコードで構成される、シンプルな MVVM フレームワーク。
1. HTML ページの実装
Vue の記述方法に従って、ページ上にいくつかのデータと命令を定義し、次の 2 つを紹介します。 JSドキュメント。まず MVue オブジェクトをインスタンス化し、el、data、method パラメータを渡します。 Mvue.js ファイルとは何ですか?
html
<body>
<div id="app">
<h2>{{person.name}} --- {{person.age}}</h2>
<h3>{{person.fav}}</h3>
<h3>{{person.a.b}}</h3>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<h3>{{msg}}</h3>
<div v-text="msg"></div>
<div v-text="person.fav"></div>
<div v-html="htmlStr"></div>
<input type="text" v-model="msg">
<button v-on:click="click111">按钮on</button>
<button @click="click111">按钮@</button>
</div>
<script src="./MVue.js"></script>
<script src="./Observer.js"></script>
<script>
let vm = new MVue({
el: '#app',
data: {
person: {
name: '星哥',
age: 18,
fav: '姑娘',
a: {
b: '787878'
}
},
msg: '学习MVVM实现原理',
htmlStr: '<h4>大家学的怎么样</h4>',
},
methods: {
click111() {
console.log(this)
this.person.name = '学习MVVM'
// this.$data.person.name = '学习MVVM'
}
}
})
</script>
</body>
2. パーサーとオブザーバーの実装
MVue .js
// 先创建一个MVue类,它是一个入口
Class MVue {
construction(options) {
this.$el = options.el
this.$data = options.data
this.$options = options
}
if(this.$el) {
// 1.实现一个数据的观察者 --先看解析器，再看Obeserver
new Observer(this.$data)
// 2.实现一个指令解析器
new Compile(this.$el,this)
}
}
?
// 定义一个Compile类解析元素节点和指令
class Compile {
constructor(el,vm) {
// 判断el是否是元素节点对象，不是就通过DOM获取
this.el = this.isElementNode(el) ? el : document.querySelector(el)
this.vm = vm
// 1.获取文档碎片对象，放入内存中可以减少页面的回流和重绘
const fragment = this.node2Fragment(this.el)
// 2.编辑模板
this.compile(fragment)
// 3.追加子元素到根元素(还原页面)
this.el.appendChild(fragment)
}
// 将元素插入到文档碎片中
node2Fragment(el) {
const f = document.createDocumnetFragment();
let firstChild
while(firstChild = el.firstChild) {
// appendChild
// 将已经存在的节点再次插入，那么原来位置的节点自动删除，并在新的位置重新插入。
f.appendChild(firstChild)
}
// 此处执行完，页面已经没有元素节点了
return f
}
// 解析模板
compile(frafment) {
// 1.获取子节点
conts childNodes = fragment.childNodes;
[...childNodes].forEach(child => {
if(this.isElementNode(child)) {
// 是元素节点
// 编译元素节点
this.compileElement(child)
} else {
// 文本节点
// 编译文本节点
this.compileText(child)
}
// 嵌套子节点进行遍历解析
if(child.childNodes && child.childNodes.length) {
this.compule(child)
}
})
}
// 判断是元素节点还是属性节点
isElementNode(node) {
// nodeType属性返回 以数字值返回指定节点的节点类型。1-元素节点 2-属性节点
return node.nodeType === 1
}
// 编译元素节点
compileElement(node) {
// 获得元素属性集合
const attributes = node.attributes
[...attributes].forEach(attr => {
const {name, value} = attr
if(this.isDirective(name)) { // 判断属性是不是以v-开头的指令
// 解析指令（v-mode v-text v-on:click 等...）
const [, dirctive] = name.split('-')
const [dirName, eventName] = dirctive.split(':')
// 初始化视图 将数据渲染到视图上
compileUtil[dirName](node, value, this.vm, eventName)
// 删除有指令的标签上的属性
node.removeAttribute('v-' + dirctive)
} else if (this.isEventName(name)) { //判断属性是不是以@开头的指令
// 解析指令
let [, eventName] = name.split('@')
compileUtil['on'](node,val,this.vm, eventName)
// 删除有指令的标签上的属性
node.removeAttribute('@' + eventName)
} else if(this.isBindName(name)) { //判断属性是不是以:开头的指令
// 解析指令
let [, attrName] = name.split(':')
compileUtil['bind'](node,val,this.vm, attrName)
// 删除有指令的标签上的属性
node.removeAttribute(':' + attrName)
}
})
}
// 编译文本节点
compileText(node) {
const content = node.textContent
if(/\{\{(.+?)\}\}/.test(content)) {
compileUtil['text'](node, content, this.vm)
}
}
// 判断属性是不是指令
isDirective(attrName) {
return attrName.startsWith('v-')
}
// 判断属性是不是以@开头的事件指令
isEventName(attrName) {
return attrName.startsWith('@')
}
// 判断属性是不是以:开头的事件指令
isBindName(attrName) {
return attrName.startsWith(':')
}
}
?
?
// 定义一个对象，针对不同指令执行不同操作
const compileUtil = {
// 解析参数(包含嵌套参数解析)，获取其对应的值
getVal(expre, vm) {
return expre.split('.').reduce((data, currentVal) => {
return data[currentVal]
}, vm.$data)
},
// 获取当前节点内参数对应的值
getgetContentVal(expre,vm) {
return expre.replace(/\{\{(.+?)\}\}/g, (...arges) => {
return this.getVal(arges[1], vm)
})
},
// 设置新值
setVal(expre, vm, inputVal) {
return expre.split('.').reduce((data, currentVal) => {
return data[currentVal] = inputVal
}, vm.$data)
},
// 指令解析：v-test
test(node, expre, vm) {
let value;
if(expre.indexOf('{{') !== -1) {
// 正则匹配{{}}里的内容
value = expre.replace(/\{\{(.+?)\}\}/g, (...arges) => {
// new watcher这里相关的先可以不看，等后面讲解写到观察者再回头看。这里是绑定观察者实现 的效果是通过改变数据会触发视图，即数据=》视图。
// 没有new watcher 不影响视图初始化(页面参数的替换渲染)。
// 订阅数据变化，绑定更新函数。
new watcher(vm, arges[1], () => {
// 确保 {{person.name}}----{{person.fav}} 不会因为一个参数变化都被成新值
this.updater.textUpdater(node, this.getgetContentVal(expre,vm))
})
return this.getVal(arges[1],vm)
})
} else {
// 同上，先不看
// 数据=》视图
new watcher(vm, expre, (newVal) => {
// 找不到{}说明是test指令，所以当前节点只有一个参数变化，直接用回调函数传入的新值
this.updater.textUpdater(node, newVal)
})
value = this.getVal(expre,vm)
}
// 将数据替换，更新到视图上
this.updater.textUpdater(node,value)
},
//指令解析： v-html
html(node, expre, vm) {
const value = this.getVal(expre, vm)
// 同上，先不看
// 绑定观察者 数据=》视图
new watcher(vm, expre (newVal) => {
this.updater.htmlUpdater(node, newVal)
})
// 将数据替换，更新到视图上
this.updater.htmlUpdater(node, newVal)
},
// 指令解析：v-mode
model(node,expre, vm) {
const value = this.getVal(expre, vm)
// 同上，先不看
// 绑定观察者 数据=》视图
new watcher(vm, expre, (newVal) => {
this.updater.modelUpdater(node, newVal)
})
// input框 视图=》数据=》视图
node.addEventListener('input', (e) => {
//设置新值 - 将input值赋值到v-model绑定的参数上
this.setVal(expre, vm, e.traget.value)
})
// 将数据替换，更新到视图上
this.updater.modelUpdater(node, value)
},
// 指令解析： v-on
on(node, expre, vm, eventName) {
// 或者指令绑定的事件函数
let fn = vm.$option.methods && vm.$options.methods[expre]
// 监听函数并调用
node.addEventListener(eventName,fn.bind(vm),false)
},
// 指令解析： v-bind
bind(node, expre, vm, attrName) {
const value = this.getVal(expre,vm)
this.updater.bindUpdate(node, attrName, value)
}
// updater对象，管理不同指令对应的更新方法
updater: {
// v-text指令对应更新方法
textUpdater(node, value) {
node.textContent = value
},
// v-html指令对应更新方法
htmlUpdater(node, value) {
node.innerHTML = value
},
// v-model指令对应更新方法
modelUpdater(node,value) {
node.value = value
},
// v-bind指令对应更新方法
bindUpdate(node, attrName, value) {
node[attrName] = value
}
},
}
3. データ ハイジャックと監視を実装する
#データ監視機能があり、更新ビューをトリガーするオブザーバーも必要です。更新をトリガーするにはデータ変更が必要であるため、すべてのオブザーバーを収集し (オブザーバー コレクション)、オブザーバーとウォッチャーを接続するにはブリッジ Dep が必要です。データの変更は Dep に通知され、Dep は対応するオブザーバーにビューを更新するように通知します。
Observer.js
// 定义一个观察者
class watcher {
constructor(vm, expre, cb) {
this.vm = vm
this.expre = expre
this.cb =cb
// 把旧值保存起来
this.oldVal = this.getOldVal()
}
// 获取旧值
getOldVal() {
// 将watcher放到targe值中
Dep.target = this
// 获取旧值
const oldVal = compileUtil.getVal(this.expre, this.vm)
// 将target值清空
Dep.target = null
return oldVal
}
// 更新函数
update() {
const newVal = compileUtil.getVal(this.expre, this.vm)
if(newVal !== this.oldVal) {
this.cb(newVal)
}
}
}
// 定义一个观察者集合
class Dep {
constructor() {
this.subs = []
}
// 收集观察者
addSub(watcher) {
this.subs.push(watcher)
}
//通知观察者去更新
notify() {
this.subs.forEach(w => w.update())
}
}
// 定义一个Observer类通过gettr，setter实现数据的监听绑定
class Observer {
constructor(data) {
this.observer(data)
}
// 定义函数解析data,实现数据劫持
observer (data) {
if(data && typeof data === 'object') {
// 是对象遍历对象写入getter，setter方法
Reflect.ownKeys(data).forEach(key => {
this.defineReactive(data, key, data[key]);
})
}
}
// 数据劫持方法
defineReactive(obj,key, value) {
// 递归遍历
this.observer(data)
// 实例化一个dep对象
const dep = new Dep()
// 通过ES5的API实现数据劫持
Object.defineProperty(obj, key, {
enumerable: true,
configurable: false,
get() {
// 当读当前值的时候，会触发。
// 订阅数据变化时，往Dep中添加观察者
Dep.target && dep.addSub(Dep.target)
return value
},
set: (newValue) => {
// 对新数据进行劫持监听
this.observer(newValue)
if(newValue !== value) {
value = newValue
}
// 告诉dep通知变化
dep.notify()
}
})
}
} 推奨チュートリアル: 「JavaScript ビデオ チュートリアル 」
以上がMVVMの原理とVueでの実装方法を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事はcsdn.netで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。
前の記事：jsで数値を比較する方法をご存知ですか？次の記事：jsで数値を比較する方法をご存知ですか？