js Dialog 实践分享


Posted in Javascript onOctober 22, 2012

分析:

1.       Dialog的生命周期:

js Dialog 实践分享

2.       Dialog的结构:标题、内容(DOM)、数据、提交栏、关闭按钮

js Dialog 实践分享


显示以及加载数据

1.       Content 作为页面代码隐藏到页面中,Dialog显示后,将数据(Json对象)赋值到Dialog

1) 优点:实现最为简单

2) 缺点:加载页面时,页面代码多,如果未发生Dialog操作,这部分Dom不会被用到,如果弹出的Dialog种类过多,那么页面的隐藏代码会大大增加页面大小;

2.       Contetn作为单独的页面(代码块,类似于MVC中的partialView, Dialog第一次弹出时,请求页面显示在Dialog中,并将数(Json对象)据赋值到Dialog

1) 优点:可以减少页面大小,仅在需要弹出Dialog时加载对应的内容。

2) 缺点:首次打开一个Dialog时,需要加载页面,有延迟效果,降低用户体验。

3.       Contetn作为单独的页面(代码块,类似于MVC中的partialView),每一次弹出Dialog时请求页面,数据连同页面一起渲染,然后显示在Dialog

1) 优点:几乎所有的后台框架都有数据渲染机制,可以方便的渲染编辑的内容,降低前端代码的耦合。

2) 缺点:每次弹出Dialog需要重新加载对应的内容和数据。

提交

1.       异步提交,将数据序列化,使用Ajax(或者iframe)方式提交到后台,然后返回json表示成功或者失败。根据结果改变List记录

1) 优点:使用Ajax进行数据传输,不刷新页面,可以保留页面状态。

2) 缺点: 需要跟后台进行耦合,根据后台结果显示成功或错误信息。需要协调前后台的验证和错误显示。

2.       Form表单提交,直接将表单提交到后台,刷新整个页面

1)       优点:直接刷新页面,逻辑简单。

2)       缺点: 页面状态丢失,如果在搜索页面,需要回写各项输入;错误回显复杂,因为Dialog是前台js弹出,如果在Dialog上显示数据,那么需要弹出Dialog

隐藏

1.       Dialog 关闭后,Dialog仅仅是隐藏

1)       优点:实现简单,显示Dialog的逻辑也会变简单。

2)       缺点:多个Dialog状态下,页面以及内存中有多个Dialog对象,依赖于加载数据和内容方式,如果每次打开Dialog都加载新的内容(DOM),那么也会增加复杂度。

2.       Dialog 关闭后,释放Dialog对象

1) 优点:每次打开新的Dialog,都是独立的操作,逻辑上简单

2) 缺点:增加了复杂度,每次关闭Dialog时,需要将内容(DOM)缓存起来,清除状态,在下一次显示Dialog时重新加载,如果每次打开Dialog都加载新的内容(DOM),可直接释放Dialog中的内容(DOM)

实践

1.       加载的第一种,将Dialog内容(DOM)事先隐藏在页面中,编辑完数据后异步提交数据,这种方式我们在项目中使用的最多,只要处理好显示数据,错误回传显示,基本能满足日常应用。

2.       加载的第三种方式,在一些框架的支持下会非常的自然,在.netMVC框架中,ViewModel的集成,验证规则的统一性处理,可以是开发成本降到最低。

3.       数据的异步提交还是Form提交,需要看具体情况,如果是搜索页面,需要回传大量页面状态则最好使用异步提交方式,否则只是刷新页面,表单提交方式更为自然。

总结

1.       如果你是控件的编写者,最好Dialog全部实现上述功能,能满足更多的场景

2.       如果你是控件的使用者,根据具体情况,配置Dialog,得到自己的效果。

3.       错误处理和显示将是你在这个过程中遇到最麻烦的事情。

Javascript 相关文章推荐
JS实现程序暂停与继续功能代码解读
Oct 10 Javascript
js实现input框文字动态变换显示效果
Aug 19 Javascript
JavaScript使用DeviceOne开发实战(三)仿微信应用
Dec 02 Javascript
Angular4实现动态添加删除表单输入框功能
Aug 11 Javascript
微信小程使用swiper组件实现图片轮播切换显示功能【附源码下载】
Dec 12 Javascript
vue侧边栏动态生成下级菜单的方法
Sep 07 Javascript
Vue 2.0 侦听器 watch属性代码详解
Jun 19 Javascript
Vue-cli3.x + axios 跨域方案踩坑指北
Jul 04 Javascript
vue中@change兼容问题详解
Oct 25 Javascript
vue - vue.config.js中devServer配置方式
Oct 30 Javascript
详解vue中$nextTick和$forceUpdate的用法
Dec 11 Javascript
NestJs使用Mongoose对MongoDB操作的方法
Feb 22 Javascript
JS控件的生命周期介绍
Oct 22 #Javascript
重写javascript中window.confirm的行为
Oct 21 #Javascript
js indexOf()定义和用法
Oct 21 #Javascript
javascript window.confirm确认 取消对话框实现代码小结
Oct 21 #Javascript
基于jquery DOM写的类似微博发布的效果
Oct 20 #Javascript
JS的replace方法介绍
Oct 20 #Javascript
Lazy Load 延迟加载图片的jQuery插件中文使用文档
Oct 18 #Javascript
You might like
用PHP的ob_start();控制您的浏览器cache!
2006/11/25 PHP
PHP文件读写操作相关函数总结
2014/11/18 PHP
PHP中常用的魔术方法
2017/04/28 PHP
将字符串转换成gb2312或者utf-8编码的参数(js版)
2013/04/10 Javascript
Extjs3.0 checkboxGroup 动态添加item实现思路
2013/08/14 Javascript
escape函数解决js中ajax传递中文出现乱码问题
2014/10/30 Javascript
JS判断是否360安全浏览器极速内核的方法
2015/01/29 Javascript
JQuery实现样式设置、追加、移除与切换的方法
2015/06/11 Javascript
JavaScript实现的背景自动变色代码
2015/10/17 Javascript
跟我学习javascript的执行上下文
2015/11/18 Javascript
搞定immutable.js详细说明
2016/05/02 Javascript
JavaScript事件详细讲解
2016/06/27 Javascript
使用Curl命令查看请求响应时间方法
2016/11/04 Javascript
js实现简单的手风琴效果
2017/02/27 Javascript
vuejs实现本地数据的筛选分页功能思路详解
2017/11/15 Javascript
react中使用swiper的具体方法
2018/05/15 Javascript
通过GASP让vue实现动态效果实例代码详解
2019/11/24 Javascript
JavaScript单线程和任务队列原理解析
2020/02/04 Javascript
[15:41]教你分分钟做大人——灰烬之灵
2015/03/11 DOTA
[01:18:21]EG vs TNC Supermajor小组赛B组败者组第一轮 BO3 第一场 6.2
2018/06/03 DOTA
Pandas 数据处理,数据清洗详解
2018/07/10 Python
使用python生成杨辉三角形的示例代码
2018/08/29 Python
python try except 捕获所有异常的实例
2018/10/18 Python
PyTorch实现ResNet50、ResNet101和ResNet152示例
2020/01/14 Python
Python 简单计算要求形状面积的实例
2020/01/18 Python
Python+PyQt5+MySQL实现天气管理系统
2020/06/16 Python
django前端页面下拉选择框默认值设置方式
2020/08/09 Python
Django Auth用户认证组件实现代码
2020/10/13 Python
前端隐藏出边界内容的实现方法
2016/04/14 HTML / CSS
"序列点" 是什么
2016/07/29 面试题
求职自荐信格式
2013/12/04 职场文书
2014年群众路线教育实践活动整改措施
2014/09/24 职场文书
销售内勤岗位职责
2015/02/10 职场文书
爱心捐助活动总结
2015/05/09 职场文书
《围炉夜话》110句人生箴言,精辟有内涵,引人深思
2019/10/23 职场文书
Mysql Show Profile
2021/04/05 MySQL