DWZjs分析报告
设计思路
第一次打开页面时载入界面到客户端, 之后和服务器的交互只是数据交互, 不会占用界面相关的网络流量. 支持HTML扩展方式来调用DWZ组件. 标准化Ajax开发, 降低Ajax开发成本.
优点
- 完全开源，源码没有做任何混淆处理，方便扩展
- CSS和js代码彻底分离，修改样式方便
- 简单实用，扩展方便，轻量级框架，快速开发
- 仍然保留了html的页面布局方式
- 支持HTML扩展方式调用UI组件，开发人员不需写js
- 只要懂html语法不需精通js，就可以使用ajax开发后台
- 基于jQuery，UI组件以jQuery插件的形式发布，扩展方便
- 可以快速生成一些简单的项目原型
缺点
- 缺乏企业项目中一些常用的组件,比如可编辑列表,树形列表,弹出选择组件等复杂控件.
- javaeye有讨论说dwz不太稳定,存在一些兼容性的问题.这个我还不确定.
- 开发环境和它的技术环境都非常冷,没有找到成功的商业案例,它的论坛在这里http://bbs.dwzjs.com/.
技术分析
DWZ简单扩展了html标准, 给HTML定义了一些特别的class 和attribute. DWZ框架会找到当前请求结果中的那些特别的class 和attribute, 并自动关联上相应的js处理事件和效果. 下面举一个简单的用户列表页面进行简要的说明:
<a class="delete" href="__URL__/foreverdelete/id/{sid_user}/navTabId/__MODULE__" target="navTabTodo" title="你确定要删除吗？" warn="请选择用户"><span>删除</span></a>
<a class="edit" href="__URL__/edit/id/{sid_user}" target="dialog" mask="true" warn="请选择用户"><span>编辑</span></a>
<a class="icon" href="__URL__/password/id/{sid_user}" target="dialog" mask="true" warn="请选择用户"><span>修改密码</span></a>
<table class="list" width="100%" layoutH="116">
<thead>
<tr>
<th width="60">编号</th>
<th width="100">用户名</th>
<th>昵称</th>
<th>Email</th>
<th width="100">添加时间</th>
<th width="120">上次登录</th>
<th width="80">登录次数</th>
<th width="80">状态</th>
</tr>
</thead>
<tbody>
<volist id="vo" name="list">
<tr target="sid_user" rel="{$vo['id']}">
<td>{$vo['id']}</td>
<td>{$vo['account']}</td>
<td>{$vo['nickname']}</td>
<td>{$vo['email']}</td>
<td>{$vo['create_time']|date="Y-m-d",###}</td>
<td>{$vo['last_login_time']|date="Y-m-d H:i:s",###}</td>
<td>{$vo['login_count']}</td>
<td>{$vo['status']|showStatus=$vo['id']}</td>
</tr>
</volist>
</tbody>
</table>
上面的html示例代码支持一个简单用户的查询,编辑,修改和删除功能.
- 整个过程是这样子的,html渲染后,dwz会遍历整个document文档,查找一个具体特殊属性比如target,class的dom,并为之关联上相应的样式和js事件.
- 比如上例中的 <table class="list" width="100%" layoutH="116"> ,dwz会将识别为列表,调用相应的列表生成程序.并将表格的高度调整为116.
- 注意到上例中,有个 volist 标签,DWZ将其识别为一个模板.这个有点类似于jsp中的javabean模板,不过后台要传递的是一个list JSON对象,dwz会遍历这个模板对象,循环生成用户的相关信息.
- 删除、编辑、修改密码使用了变量 {sid_user}
- <tbody>中<tr target="sid_user" rel="{$vo['id']}">
- 当选中一行时,tr上的rel值会自动替换到url变量中.
- 注意url变量名{sid_user}和tr的target="sid_user"保持一致.
初步结论
仅仅只是个人的观点,相比extjs组件式开发来说,dwzjz更接近html.这是一种非常好的设计方式,学习起来也没有什么门槛. 但它或许不适合做工业企业MES,它没有成功的商业案例,前景不可测.