手机版

基于Java脚本语言实现一个简单的某视频剪辑软件

时间:2021-08-29 来源:互联网 编辑:宝哥软件园 浏览:

Object.defineProperty()

实现之前我们得先看一下Object.defineProperty的实现,因为某视频剪辑软件主要是通过数据劫持来实现的,通过获取、设置来完成数据的读取和更新。

var obj={ name : 'wc肢' } var age=24对象。define property(obj,' age ',{enumerable: true,//可枚举可配置:假,//不能再defineget () {return age},set (newVal) {console.log('我改变了,年龄-(NewVal);age=NewVal } })obj。24岁。年龄=25岁;我改变了24 - 25 25从上面可以看到通过得到获取数据,通过设置监听到数据变化执行相应操作,还是不明白的话可以去看看Object.defineProperty文档。

流程图

超文本标记语言代码结构

div id='wrap' p v-html='test'/p输入类型='text' v型='form '输入类型='text' v型='form '按钮@click='changeValue '改变值/button {{form}}/divVue结构

类vue { constructor(){ } ProxyData(){ } observer(){ } compile(){ } CompileText(){ } }类watcher { constructor(){ } update(){ } } Vue构造函数构造函数主要是数据的初始化

代用资料数据代理

观察者劫持监听所有数据

编制解析数字正射影像图

compileText解析数字正射影像图里处理纯双花括号的操作

看守人更新视图操作

某视频剪辑软件构造器初始化

class Vue {构造函数(options={ }){ this .$ El=文档。queryselector(选项。El);让数据=这个。数据=选项。数据;//代理数据,使其能直接this.xxx的方式访问数据,正常的话需要this.data.xxxObject.keys(数据)。forEach((key)={ this。代理数据(密钥);});this.methods=obj.methods //事件方法这个。watcher task={ };//需要监听的任务列表this.observer(数据);//初始化劫持监听所有数据编译这个$ El);//解析dom}}上面主要是初始化操作,针对传过来的数据进行处理

代用资料代理数据

类别Vue {构造函数(选项={ }){ 0.}代理数据(密钥){ 0让那个=这个;object . defineperproperty(即key,{ configurable: false,enumerable: true,get(){ return。数据[密钥];},设置(NewVal){即。data[key]=NewVal;}});}}上面主要是代理数据到最上层,这个。xxx的方式直接访问数据

观察者劫持监听

类别Vue {构造函数(选项={ }){ 0.}proxyData(密钥){ 0.}观察者(数据){let那=thisObject.keys(数据)。forEach(key={ let value=data[key]this。watcher task[key]=[]对象。definepreproperty(data,key,{ configurable: false,enumerable: true,get(){return value}),set(newValue){if(newValue!==值){ value=新值。观察器任务[键].forEach(任务={ task。update()})} } })} }同样是使用Object.defineProperty来监听数据,初始化需要订阅的数据。

把需要订阅的数据到推到观察任务里,等到时候需要更新的时候就可以批量更新数据了。下面就是;

遍历订阅池,批量更新视图。

set(newValue){if(newValue!==value){value=newValue//批量更新视图观察任务[键]。forEach(任务={ task。update()})} }编译解析数字正射影像图

class Vue {构造函数(选项={ }){ 0.}proxyData(密钥){ 0.}观察者(数据){ 0.} compile(El){ var nodes=El . child nodes;for(设I=0;I节点.长度;I){ const node=nodes[I];if(node . nodetype===3){ var text=node . textcontent . trim();if(!文本)继续;this.compileText(node,' textContent ')} else if(node . nodetype===1){ if(node . childnodes . length 0){ this.compile(node)} if(node . hasattribute(' v-model ')(node . tagname==' INPUT ' | | node . tagname==' TEXTAREA '){ node . addeventlistener(' INPUT ',()={ let attrVal=node . getattribute(' v-model ')this . watchertask[attrVal]。push(new Watcher(node,this,Attraval,' value ')node . remove attribute(' v-model ')return()={ this . data[Attraval]=node . value } })())} if(node . hasattribute(' v-html '){ let Attraval=node . getattribute(' v-html ');this . watchertask[Atrval]。push(new Watcher(node,this,Attroval,' innerHTML ')node . remove attribute(' v-html ')} this.compiletext(node,' innerHTML ')if(node . hasattribute(@ click ')){ let Attroval=node . getattribute(@ click ')node . remove attribute(@ click ')node . addeventlistener(' click ',e={ this . methods[Attroval]this . methods[Attroval]。bind(this)()})}}}},compileText(节点,类型){let reg=/{{(。*)}}/g,txt=node.textContentif(reg . test(txt)){ node . textcontent=txt . replace(reg,(matched,value)={ let TPL=this . watchertask[value]| | |[]TPL . push(new Watcher(node,this,value,type))返回值. split(' . ').reduce((val,key)={ return this . data[key];},这个。$ El);})}}}这里有很多代码,拆分后会发现非常简单。

首先,我们遍历el元素下的所有子节点。node.nodeType===3表示当前元素是文本节点,node.nodeType===1表示当前元素是元素节点。因为其中有些可能是纯文本的形式,比如纯双花括号就是纯文本的文本节点,然后通过判断元素节点中是否有子节点,如果有,递归调用编译方法。亮点来了,让我们把它拆开:

if(node . hasattribute(' v-html '){ let Attroval=node . GetAttribute(' v-html ');这个。观察器任务[attrval]。push(新的观察器(node,this,attrval,' innerhtml ')节点)。removeattribute ('v-html')}上面这个首先确定节点上是否有v-html之类的命令,如果有,我们就发布订阅。我们如何发布订阅?只需要将需要订阅的数据推送到watcherTask中,然后在设置值的时候就可以批量更新,实现双向数据绑定,如下操作

那个。观察器任务[键]。foreach (task={task。update ()})然后push的值是watcher的一个实例,当他是新的时候会执行一次,执行的操作是更新纯双花括号-1,也就是更新我们写入模板视图的模板数据。

最后,移除当前元素属性。当我们使用Vue时,我们看不到这个指令,它不会影响或拒绝它

至于什么是守望者,请看下面了解

看守人

那个。watchertask [key]。foreach (task={task。update ()}),发布订阅后,在其中进行了操作,这意味着当前元素如:node.innerHTML='这是数据中的值',node.value='这是表单的数据'

那我们为什么不直接更新呢?我们还需要更新什么?不是没必要吗?

其实更新,记得吗?我们需要通过调用Watcher原型上的更新方法来批量更新订阅池。

摘要

以上是边肖介绍的一个基于JavaScript的简单Vue。希望对大家有帮助。如果你有任何问题,请给我留言,边肖会及时回复你。非常感谢您对我们网站的支持!

版权声明:基于Java脚本语言实现一个简单的某视频剪辑软件是由宝哥软件园云端程序自动收集整理而来。如果本文侵犯了你的权益,请联系本站底部QQ或者邮箱删除。