带你撸出一手好代码
第四节,JavaScript控件简介

实际上,利用fast dev框架开发的页面的大部分HTML内容都是来自于JavaScript控件。

 

以这一张表达提交页面为例


1.png


对应的xml配置文件内容如下


<PageGroup id="bbq_gift" title="礼包码">
    <Page mode="form" title="生成礼包码">
        <Controls>
            <Control type="input" validation="required" name="name" title="礼包名称"></Control>
            <Control type="select" validation="required|int" name="platform" title="平台">
                <ListItem value="-1" title="不区分平台"></ListItem>
                <ListItem value="0" title="PC"></ListItem>
                <ListItem value="1" title="iOS"></ListItem>
                <ListItem value="2" title="Android"></ListItem>
            </Control>
            <Control type="input" validation="required|int" name="channel" title="渠道"></Control>
            <Control type="input" validation="required|int" name="obtainTimes" title="可领取次数"></Control>
            <Control type="datetime" validation="required" name="valid_time" title="有效期"></Control>
            <Control type="bbq_attach" name="attachments" title="奖励"  validation="bbq_validate_reward" ></Control>
            <Control type="bbq_bat" name="bat" validation="bbq_validate_bat" title="批次"></Control>
        </Controls>
        <listen></listen>
    </Page>
</PageGroup>


xml文档中, control结点的type属性表示控件的文件名称

 

比如说这一行


<Control type="input" validation="required" name="name" title="礼包名称"></Control>

 

type属性为input, 那么这个控件的的文件名为input.js,放置在项目中一个专门放置JavaScript控件的目录下面。


2.png


相应的表单项如下


3.png


控件的代码如下


4.png


控件的 renderHtml方法用来生成控件的html

 

为什么一个简简单单的input输入框也要做成一个控件呢?  其实主要是为了保持框架加载控件时的一致性, 这个input表单项是最简单的一种形式,使用JavaScript控件的形式实现似乎有些小题大做。 然而, 某些表达项极端复杂,封装成控件能极大的简化开发过程和充分的复用代码, 如下面这个表单项


5.png


点击“增加”按钮还需要能动态添加项目, 这是一个较为复杂的JavaScript特效,于上面的input一样,它也被视为一个控件,使用的时候只需要一个简单的配置项即可


<Control type="bbq_bat" name="bat" validation="bbq_validate_bat" title="批次"></Control>

 

对于框架而言, 所有的JavaScript控件, 不管是简单的还是复杂的, 都一视同仁。

 

控件只公开三个方法

 

  1. renderHtml,用户生成控件的html

  2. getValue, 获得控件的值,简单如获得input元素的value属性,一个字符串;复杂如bbq_bat控件,它的值是一组Json数据。

  3. setValue,设置控件的值,填充控件的内容。


6.png


上图的表达页面,标注的每一行代表一个JavaScript控件,其中蓝色为简单的控件, 红色的为复杂的控件, 对应的配置文件如下


7.png


总而言之, 利用fast dev生成页面, 所用能填写内容的区域(表单元素)都使用JavaScript控件机制进行封装管理


作者:陈大侠
日期:2017-10-10

留言(0条)

我要发表留言

您的大名 选填
电子邮箱 选填

欢迎关注微信公众号 「带你撸出一手好代码」

首页    GitHub 知乎 豆瓣 博客园