js Dialog 实践分享

分析:

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.       错误处理和显示将是你在这个过程中遇到最麻烦的事情。

(0)

相关推荐

  • js Dialog 实践分享

    分析: 1.       Dialog的生命周期: 2.       Dialog的结构:标题.内容(DOM).数据.提交栏.关闭按钮 显示以及加载数据 1.       Content 作为页面代码隐藏到页面中,Dialog显示后,将数据(Json对象)赋值到Dialog 1) 优点:实现最为简单 2) 缺点:加载页面时,页面代码多,如果未发生Dialog操作,这部分Dom不会被用到,如果弹出的Dialog种类过多,那么页面的隐藏代码会大大增加页面大小: 2.       Contetn作为单

  • 为输入框加入数字js校验代码分享

    js限制只能数字输入,并且在把输入的"非法字符"清除掉之后将焦点停留在输入非法字符的位置,参考如下: html部分: <input value="" type="text" onkeyup="javascript:RepNumber(this)"> JavaScript部分: function RepNumber(obj) { var reg = /^[\d]+$/g; if (!reg.test(obj.valu

  • 利用JS延迟加载百度分享代码,提高网页速度

    发现很多网站在放置百度分享代码的时候,简单的将分享代码放置到固定的网页位置就完事了,这是非常致命的方式.因为,我经常打开一个网页的时候,发现在网页加载到分享代码的时候,有时候花上几秒的时候来请求百度的服务器,最后展示分享按钮. 其实,像这样对网页来说不是非常重要的功能,我们大可以用JS来延迟加载,从而提高网页主要内容的快速加载显示.这里分享下我的放置方式.一.copy百度分享代码,如下: 复制代码 代码如下: <!-- Baidu Button BEGIN --><div id=&quo

  • JavaScript中Require调用js的实例分享

    在我最初开始写 JavaScript 函数时,通常是这样的: function fun1() { // some code here } function fun2() { // some other code here } ... 函数全写在全局环境中,项目很小时,通常不会有什么冲突问题. 但代码多了后,渐渐就发现,函数名称(英文词汇)有点不够用了.于是引入命名空间的概念,开始模块化代码. 命名空间下的函数 在命名空间下,我的代码这样写: var com = com || {}; com.zf

  • Vue.js最佳实践(五招助你成为vuejs大师)

    本文面向对象是有一定Vue.js编程经验的开发者.如果有人需要Vue.js入门系列的文章可以在评论区告诉我,有空就给你们写. 对大部分人来说,掌握Vue.js基本的几个API后就已经能够正常地开发前端网站.但如果你想更加高效地使用Vue来开发,成为Vue.js大师,那下面我要传授的这五招你一定得认真学习一下了. 第一招:化繁为简的Watchers 场景还原: created(){ this.fetchPostList() }, watch: { searchInputValue(){ this.

  • MySQL 配置主从复制实践分享

    目录 一.检测通信 二.master配置 1. 开启二进制日志 2. 创建一个用于主从库通信用的账号 3. 获取binlog的日志文件名和position 三.slave配置 1. 配置全局唯一的server-id 2. 使用master创建的账户读取binlog同步数据 3. 开启slave服务 四.配置中可能出现的问题 1. 网络连接问题 2. binlog的position问题 3. SQL线程出错 一.检测通信 查看主库(master)和从库(slave)的ip地址,并检测是否可以通信

  • Python协程实践分享

    目录 协程 yield在协程中的用法 经典示例 生产者-消费者模式(协程) gevent第三方库协程支持 经典代码 asyncio内置库协程支持 关于aiohttp 协程 协程简单来说就是一个更加轻量级的线程,并且不由操作系统内核管理,完全由程序所控制(在用户态执行).协程在子程序内部是可中断的,然后转而执行其他子程序,在适当的时候返回过来继续执行. 协程的优势?(协程拥有自己的寄存器上下文和栈,调度切换时,寄存器上下文和栈保存到其他地方,在切换回来的时候,恢复先前保存的寄存器上下文和栈,直接操

  • React 组件性能最佳优化实践分享

    目录 React 组件性能优化最佳实践 组件卸载前进行清理操作 类组件使用纯组件PureComponent 什么是纯组件 什么是浅层比较 shouldComponentUpdate 纯函数组件使用React.memo优化性能 memo 基本使用 memo 传递比较逻辑 使用组件懒加载 路由组件懒加载 根据条件进行组件懒加载(适用于组件不会随条件频繁切换) 使用Fragment 避免额外标记 不要使用内联函数定义 在构造函数中进行函数this绑定 类组件中的箭头函数 优化条件渲染 避免使用内联样式

  • webpack配置的最佳实践分享

    本文主要介绍了关于webpack配置的最佳实践,本文分享的实践具有以下的优势: 使用happypack提升打包速度. 使用MD5 hash可以生成文件版本,进行版本控制 在非单页面的系统中支持多个入口的配置 模板中可以利用htmlplugin输出一些配置性的信息 支持devserver,支持本地json数据的mock 一.webpack最佳实践中的需求 1.热加载 2.语法校验 3.js打包 4.模板打包 二.解决方案 1.webpack.config.json var path = requi

  • js实现快速分享功能(你的文章分享工具)

    这是一款简单易用的文章分享工具,您只需将下面的html代码拷贝到模板中就可以实现文章快速分享功能.如果您想分享你的博客.个人网站或者企业网站等等,下面是两款不错的分享工具,值得拥有! 1. 复制代码 代码如下: <div id="ckepop" class='feixiangjias'> <a href="javascript:" class="jiathis jiathis_txt jtico jtico_jiathis" t

随机推荐