由搜狐白社会

1. 视图模式
张胜利
http://blog.csdn.net/slalx
sohu

2. 感谢

3. 页面视图
局部视图

4. 场景

6. 刷新整个页面

7. 通过ajax局部刷新

8. 对比下

9. 工作方式
1.用户点击一个链接
2.视图引擎发送一个ajax请求给服务器
3.服务器端响应到达前端
4.bootload javascript和css
5.显示新内容
6.进行onload的处理（执行javascript）

10. 实现细节
链接控制
历史管理
加载器实现
状态标识
卸载资源

11. {
status: 1, // 状态码。1表示成功，1-1000表示服务器错误
注意问题 （比如404），> 1000 表示应用错误
statusText: '', // 状态内容。在错误时可以为错误文字描述
信息
data:{
view: '', // 所请求的视图片段的html
toView: '', // 要跳转到url地址，比如
/app/blog/entries.do，其与view不可共存，类似于服务器端的
302跳转
url格式要统一 page_title: '', // 页面标题
bootload:[ // 视图显示前需要加载和执行的脚本和样
式
{
服务器端返回的数据格式统一 type: 'javascript',
src: 'javascript文件的url地址',
text: 'javascript 片段'
},
刷新的页面区域是固定 {
type: 'css',
src: 'css文件的url地址',
text: 'css 片段'
}],
onload:[ // 视图显示后需要加载和执行的脚本和样式
{
type: 'javascript',
src: 'javascript文件的url地址',
text: 'javascript 片段'
},
{
type: 'css',
src: 'css文件的url地址',
text: 'css 片段'
}]
}

12. 局部视图

13. 场景一

14. <a view-method="post" view-container="#qizhucao" view-url="
/~manage/member/role.do" href="javascript:void(0);">提为管理员</a>

15. 场景二

16. <a view-method="get" view-container-options="{width:'655'}"
view-container="_dialog" view-url="/appamp;schooltype=6"
href="javascript:void(0);">忘记账号？</a>
<a view-container="_default" view-url="
/app/alumni/public/find/first_step_2.do" href="javascript:void
(0);" value="362958" title="中国人民大学">中国人民大学</a>

17. 场景三

18. <form
view-disabletext="正在保存"
view-container="#containerE1"
view-method="post"
view-vmode="3"
view-url="/~manage/save.do?
cid=2917034545012098587" action="javascript:sohu.
view.Local.form('#editFormEl')" id="editFormEl">
</form>

19. 实现细节
链接控制
加载器实现
状态标识 view_data: {
// 工作流的一些信息
workflow: {
status: 'complete' // 工作流的状态，complete
卸载资源 表 示 当前的工作流已经结束
},
// 本视图的事件
工作流控制 event: '**.**.**', // 比如 school.intro.save.succ
// 这为该视图操作对应的纯数据
data: {}
其他（前置任务，动画，验证等）
}

20. 优点
前端性能的提高 工作效率的提高

21. 不足
ajax请求过多

22. 将要做的事情
视图支持本地缓存

23. thx
http://ued.sohu.com/