大家好,欢迎来到IT知识分享网。
一 前言:
wex5官方教程里,开篇即以一个input输入,output即时输出的例子,为我们展现了一个概念:可观察对象。在以后我的项目开发中,将大量运用可观察对象。
那么,问题来了:
1. 可观察对象是什么?
2. 可观察对象能干什么?
3.可观察对象能代替哪些工作?具有哪些优势?
4 可观察对象的绑定机制与实际运用技巧如何实现?
为了大家了解绑定技术在web开发中的重要性,看明白我此后更深层次的运用,今天,我先以我用wex5设计的的视频字幕机来说明,没有可观察对像,字幕机的制作,几乎无从谈起,用了可观察对象的绑定机制,居然代码都不用写。
废话少说,看实例。
二 设计需求:
设计需求如下:
1 后台字幕设计器界面,通过右侧操作,左侧视频屏幕上的文字实时响应操作
2 响应内容包括:内容,字体,颜色,背影,透明度,字间距,行间距,字号等。
3 设计好后,将文字相关属性保存到数据库,客户端进行视频播放时,实时接收后台设计的广告字幕内容
三 实现思路:
先抛开今天的技巧,我们先思考,如何实现上述设计需求呢?
1 js方法
想都不去想,这么多参数,让js去取值再赋值,还得找到元素,还得控制触发事件,增减监听事件来监听对像。我的天哪,几个参数还可以,这么多参数??还得控制css样式,高手也许能实现,估计一个月能写完,也能测试成功,估计出错了也别想改回来,代码量太大了
2 baasdata绑定
这种方法很好。可惜,这里用到了非wex5组件,color,其它还有很多,比如video,audio,总之,html5还有一半的元素没有集成在wex5的组件库中,你就是绑定到baasdata,也不能满足复杂的页面需求啊。
那怎么办呢?
难道我这个web版的字幕设计器不能完成了吗?
答案当然是肯定的,就是开篇提到的可观察对象集群应用与绑定技术。
四 组件创健与代码实现
1 非wex5组件与属性的创建
在源码合适位置手动添加: <input type=”color” id=”textID” bind-value=”textColor”/>,创建输入类型,color
点击“添加自定义属性”,创建bind-value属性。神奇,就这样加一个bind-value属性,color的值,就可以绑定到其它对象上。今天,把color的颜色值绑定到可观察对象上。
这里只用到了color,其它非wex5元素或组件创建方法相同。
2 文字属性数据库字段
3 前端baasdata
4 创建所有属性相对应的可观察对象
5.将页面组件的值绑定到可观察对象
同理,将所有组件的bind-value的属性值里写上相对应的可观察对象名称,组件的值,无论如何发生变化,可观察对象的值都会与之绑定。举例就是,color拾色器,我点击后选择了黑色,那么color的值将同步到textColor的值里去。
运用此种方法,所有组件的值,都绑定到了可观察对象中,接下来,就是取出可观察对象的值,再绑定到text中的样式中去。
6 将可观察对象的值取出,用text的bind-style方法绑定到text的样式中
就一句话
至此,操作字幕机右侧,视频上的字幕就实现了同步。
这么简单??就这么简单???
是的,就这么简单。
那我为什么讲了这么多废话?就是为了让大家明白,可观察对象与绑定技术在web开发中的重要性与优势。
正是因为这个字幕机的设计实现不了,太复杂,才回归到原点重新思考。
大家学技术,更要学会思考问题的方法。
给大家提示一下:
之前用js做过元素托拽,如果用坐标绑定来实现呢????真是简而又简。
五 总结:
1 绑定技术是实现优秀web设计的核心思想
2 思路越简单,代码越复杂;思路越高深,代码越简单。本例中居然一行代码没写,只是创建了可观察对像。
3 不能局限于wex5,放开思维,想想wex5没有的东西,如何导进来,巧妙的运用wex5的框架基础与绑定技术。
相关视频制作完成,上传优酷。教学app制作中。我是邯郸戏曲开发,tel:15175073123,qq:1017945251
扫描二维码,看高清教学视频。
免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://yundeesoft.com/33744.html