浅析某视频剪辑软件中的视图模型实现原理

现成视图模型

菜单教程

！DOCTYPE html html head meta charset=' utf-8 ' title vue测试实例-菜鸟教程(runoob。com)/title脚本src=' http :https://UNP kg。com/Vue/dist/Vue。js '/脚本/头体div id=' app '输入类型=' text ' v-model=' message ' p { { message } }/p/div脚本让vm=new Vue({ el: '#app '，数据： { message : ' Hello Vue。“js！”} })/脚本/正文/html视图影响数据

数据影响视图

项目构架

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' meta name=' viewport ' content=' width=device-width，initial-scale=1.0 ' meta http-equiv=' X-UA-Compatible ' content=' ie=edge ' title document/title/head dy/body/html！DOCTYPE html html head meta charset=' utf-8 ' title vue测试实例-菜鸟教程(runoob。com)/title脚本src=' http :/js/mvvm。js '/script script src=' http :/js/编译。js '/脚本/头体div id=' app '输入类型=' text ' v-model=' message ' div { { message } }/div ul Li/Li/ul { { message } }/div脚本让vm=新MVVM({ el: '#app '，数据： {消息3360 ' Hello vue。js！} })/脚本/正文/htmlmvvm.html

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' meta name=' viewport ' content=' width=device-width，initial-scale=1.0 ' meta http-equiv=' X-UA-Compatible ' content=' ie=edge ' title document/title/head dy/body/html！DOCTYPE html html head meta charset=' utf-8 ' title vue测试实例-菜鸟教程(runoob。com)/title脚本src=' http :/js/mvvm。js '/script script src=' http :/js/编译。js '/脚本/头体div id=' app '输入类型=' text ' v-model=' message ' div { { message } }/div ul Li/Li/ul { { message } }/div脚本让vm=新MVVM({ el: '#app '，数据： {消息3360 ' Hello vue。js！} })/脚本/正文/htmlmvvm.js

视图模型类{构造函数（选项){这个$ el=options.el这个$ data=options.data如果（这个$el) { new Compile(this .$ El)；} } }编译把数字正射影像图节点，放在内存中操作（到35分钟)

类编译{构造函数(el，VM){这个。El=这个。iselementnode(El)？El :文件。query selector(El)；this.vm=vmif(this。El){让片段=这个。节点2框架(这。El)；this.compile(片段);} } //辅助方法isElementNode(节点){返回节点。nodetype===1；} //核心方法编译(片段){让子节点=片段。子节点；控制台。log(child nodes)} node 2 frament(El){ let fragment=document。createdocumentfragment()；让firstChildwhile(第一个孩子=El。第一个孩子){ fragment。appendchild(第一个孩子)；}返回片段}}分类元素节点和文本节点(52分钟)

类编译{构造函数(el，VM){这个。El=这个。iselementnode(El)？El :文件。query selector(El)；this.vm=vmif(this。El){让片段=这个。节点2框架(这。El)；this.compile(片段);} } //辅助方法isElementNode(节点){返回节点。nodetype===1；} isdireactive(name){ return name。包括(' v-')}//核心方法compileElement(node){ let attrs=node。属性；数组。发件人(收件人).forEach(arrt={ let Attname=attr。姓名；如果(这个。is dir active(AttRName)){ let expr=attr。价值；} })} compileText(node){ let text=node。textcontent让reg=/\{\{([^}])\ } \ }/g；if(reg。test(text)){ } } compile(fragment){ let子节点=fragment。子节点；Array.from(childNodes).forEach(node={ if(this。iselementnode(节点)){ this。编译(节点)} else {控制台。log(' text '，node)})} node 2 frament(El){ let fragment=document。createdocumentfragment()；让firstChildwhile(第一个孩子=El。第一个孩子){ fragment。appendchild(第一个孩子)；}返回片段}}元素节点

文本节点

把数据中的数据，显示在视图上（到1:16分)

类编译{构造函数(el，VM){这个。El=这个。iselementnode(El)？El :文件。query selector(El)；this.vm=vmif(this。El){让片段=这个。节点2框架(这。El)；this.compile(片段);this.el.appendChild(片段)} } //辅助方法isElementNode(节点){返回节点。nodetype===1；} isdireactive(name){ return name。包括(' v-')}//核心方法compileElement(node){ let attrs=node。属性；数组。发件人(收件人).forEach(attr={ let attrName=attr。姓名；如果(这个。is dir active(AttRName)){ let expr=attr。价值；let [，type]=attrname。拆分('-')；CompileUtil[type](node，this.vm，expr)})} compileText(node){ console。日志(节点)让expr=node.textContent让reg=/\{\{([^}])\ } \ }/g；if(reg。test(expr)){ CompileUtil[' text '](node，this.vm，expr)} } compile(fragment){让子节点=fragment。子节点；Array.from(childNodes).forEach(node={ if(this。iselementnode(节点)){ this。compileelement(节点)此。编译(节点)} else { this。compile text(node)})} node 2 frament(El){ let fragment=document。createdocumentfragment()；让firstChildwhile(第一个孩子=El。第一个孩子){ fragment。appendchild(第一个孩子)；}返回片段}}CompileUtil={ getVal(vm，expr) { //获取实例上对应的数据expr=expr.split(' . ');//[消息，a]返回expr.reduce((prev，next)={ //vm .数据a返回prev[next]；}，vm .$ data)；}，getTextVal(vm，expr) { //获取编译文本后的结果返回expr.replace(/\{\{([^}] )\}\}/g，(.参数)={返回this.getVal(vm，参数[1]);}) },文本（节点，vm，expr) { //文本处理让updateFn=这个。更新程序[' textUpdater ']；let value=this.getTextVal(vm，expr)；updateFn updateFn(节点，值)},模型（节点，vm，expr){ 0让updateFn=这个。更新程序['模型更新程序']；updateFn updateFn(节点，this.getVal(vm，expr))；}，updater: { textUpdater(节点，值){ node.textContent=value}，modelUpdater(节点，值){ node.value=value} }}v型类型

modelUpdater(节点，值){ node.value=value控制台。日志（节点)控制台。日志（值)控制台。日志（节点。值)}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。