AJAX同步
用JQ发起AJAX异步请求的时候遇到一个坑。
使用场景是这样的:
在输入框中输入评论信息,单击发送按钮,触发post()方法
post()函数里面发起AJAX请求,用post方法请求'/comment',将请求携带的数据插入数据库
接着,用getJSON()方法获取数据库数据
逻辑看起来没有问题,但是存在一个异步的情况,插入数据库的操作会调用IO,比较费时,因此导致getJSON()总是先于AJAX获得响应。
导致的问题是,页面无法实时更新插入的消息。
解决方案是在发送AJAX请求之前,设置AJAX请求为同步请求,执行语句如下:
$.ajaxSettings.async = false;
页面元素替换
还是上面AJAX局部更新的案例。
在做之前,我思考了一下如何替换页面元素。
得到三种解决方案,分别是:
先把id为comment-container的元素中的,每一个id为comment-item的元素逐条删掉,再把从数据库遍历出来的元素逐条插入
先把所有id为comment-item元素用一个id为comment-list-wrapper包起来,每次更新的时候直接把comment-list-wrapper整个替换掉
仅仅是把刚刚插入的记录搜索出来,追加到第一个id为comment-item元素的前面
结果证明,第二种解决方案是最优的,原因如下:
第一种是最直接的想法,不过在删除和插入的时间间隙会闪一下
第二种比第一种多包装了一层,看起来是多此一举,实际上可以减少元素更新的操作次数,从而提升体验
第三种是性能最优的选择,不过查询数据库时并不能准确地拿到刚才插入的那一条数据。搜索字段是什么呢?在高并发情况下,元素搜索不准确,是不可行的做法
耦合
高质量的代码是高内聚、低耦合的。
为了写出高质量的代码,减少程序中的错误,提高可维护性,得到以下心得:
在编程时尽可能使用软编码代替硬编码
-
在写代码之前应充分考虑到编码需要用到的变量。
比如,在写代码的过程中,我需要为数据库或者类添加一个新字段,那么我就可能需要重新回过头去赋值,这很容易漏掉一些属性的设置
合理使用框架、组件和插件。这些工具对一些地方进行了封装,可有效减少耦合,提高开发效率