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

界面交互子层采用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,使用事件可以实现广播机制,省去了很多复杂的逻辑

你可能感兴趣的:(javascript,ViewUI)