交互控制层之界面交互子层分析

来源:互联网 发布:阿里云域名备案电话 编辑:程序博客网 时间:2024/06/05 15:43

      界面交互子层采用Jquery框架,前台主要是用 组件进行数据填写合法性校验,提交数据准备、过滤以及其它逻辑功能。如新购买一件商品,配置了商品的名称、属主、价格等组件。再点击订购该件淘宝商品时,就会进行填单页面,根据配置,会展现A,B,C三个组件进行信息填写。

      

      界面的组件都是基于配置动态生成的 .采用jseval方法,构造一个js实例化的脚本语句字符串做为eval的入参,以此根据配置动态生成组件.组件工厂PlugFactory.的 buildPlug方法,做的就是这个事情:component = eval("new $.fn." + plugName + '('+ JSON.stringify(settings)+ ') ');组件工厂有code对应的具体组件的函数名称,获取子组件,创建。

    面向对象组件 为实现代码复用,扩展以及生命周期的控制,组件实现了基本的继承机制,使用了一个jquery第三方脚本$.inherit,来实现.每个组件的生成都会按都会依次调__constructor, render, afterRender方法:

__constructor 方法解析组件构造参数,解析组件数据.render 方法根据解析的数据 渲染到特定的位置(也即添加到dom).afterRender 方法做一些组件事件绑定初始化,业务逻辑初始化之类的事情.三个方法调用由所有组件的基类$.fn.C_Base的__constructor方法来控制.要添加或改变生命周期执行的方法,修改C_Base里面__constructor的实现即可.注意这会影响所有组件的行为.

      组件之前的数据交互 常用addJEventListener()来事件监听, 进行数据状态回写、dispatchJEvent()进行调用事件。1, 使用事件监听,使得组件更加独立专注,只需要按约定注册事件或者监听事件并处理数据就可以不需要关心外界发生的变化.2, 框架不需要识别获取组件实例,就能够将数据传给数据.3, 使用事件可以实现广播机制,省去了很多复杂的逻辑

原创粉丝点击