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

一 前言:     

          wex5官方教程里,开篇即以一个input输入,output即时输出的例子,为我们展现了一个概念:可观察对象。在以后我的项目开发中,将大量运用可观察对象。

          那么,问题来了:

         1. 可观察对象是什么?

         2. 可观察对象能干什么?

         3.可观察对象能代替哪些工作?具有哪些优势?

         4 可观察对象的绑定机制与实际运用技巧如何实现?

         为了大家了解绑定技术在web开发中的重要性,看明白我此后更深层次的运用,今天,我先以我用wex5设计的的视频字幕机来说明,没有可观察对像,字幕机的制作,几乎无从谈起,用了可观察对象的绑定机制,居然代码都不用写。

        废话少说,看实例。

二 设计需求:

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