wex5 教程 之 图文讲解 可观察对象的集群应用与绑定技术

一 前言:

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的框架基础与绑定技术。