您好,欢迎来到三六零分类信息网!老站,搜索引擎当天收录,欢迎发信息

js Dialog 实践分享_javascript技巧

2025/5/3 5:13:29发布35次查看
分析:
1.       dialog的生命周期:
2.       dialog的结构:标题、内容(dom)、数据、提交栏、关闭按钮
显示以及加载数据
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.       加载的第三种方式,在一些框架的支持下会非常的自然,在.net的mvc框架中,view和model的集成,验证规则的统一性处理,可以是开发成本降到最低。
3.       数据的异步提交还是form提交,需要看具体情况,如果是搜索页面,需要回传大量页面状态则最好使用异步提交方式,否则只是刷新页面,表单提交方式更为自然。
总结
1.       如果你是控件的编写者,最好dialog全部实现上述功能,能满足更多的场景
2.       如果你是控件的使用者,根据具体情况,配置dialog,得到自己的效果。
3.       错误处理和显示将是你在这个过程中遇到最麻烦的事情。
该用户其它信息

VIP推荐

免费发布信息,免费发布B2B信息网站平台 - 三六零分类信息网 沪ICP备09012988号-2
企业名录 Product