踩坑:AJAX同步、页面元素替换、耦合

AJAX同步

用JQ发起AJAX异步请求的时候遇到一个坑。

使用场景是这样的：

1. 在输入框中输入评论信息，单击发送按钮，触发post()方法

2. post()函数里面发起AJAX请求，用post方法请求'/comment'，将请求携带的数据插入数据库

3. 接着，用getJSON()方法获取数据库数据

逻辑看起来没有问题，但是存在一个异步的情况，插入数据库的操作会调用IO，比较费时，因此导致getJSON()总是先于AJAX获得响应。

导致的问题是，页面无法实时更新插入的消息。

解决方案是在发送AJAX请求之前，设置AJAX请求为同步请求,执行语句如下：

$.ajaxSettings.async = false;

页面元素替换

还是上面AJAX局部更新的案例。

在做之前，我思考了一下如何替换页面元素。

得到三种解决方案，分别是：

1. 先把id为comment-container的元素中的，每一个id为comment-item的元素逐条删掉，再把从数据库遍历出来的元素逐条插入

2. 先把所有id为comment-item元素用一个id为comment-list-wrapper包起来，每次更新的时候直接把comment-list-wrapper整个替换掉

3. 仅仅是把刚刚插入的记录搜索出来，追加到第一个id为comment-item元素的前面

结果证明，第二种解决方案是最优的，原因如下：

1. 第一种是最直接的想法，不过在删除和插入的时间间隙会闪一下

2. 第二种比第一种多包装了一层，看起来是多此一举，实际上可以减少元素更新的操作次数，从而提升体验

3. 第三种是性能最优的选择，不过查询数据库时并不能准确地拿到刚才插入的那一条数据。搜索字段是什么呢？在高并发情况下，元素搜索不准确，是不可行的做法

耦合

高质量的代码是高内聚、低耦合的。

为了写出高质量的代码，减少程序中的错误，提高可维护性，得到以下心得：

1. 在编程时尽可能使用软编码代替硬编码

2. 在写代码之前应充分考虑到编码需要用到的变量。

   比如，在写代码的过程中，我需要为数据库或者类添加一个新字段，那么我就可能需要重新回过头去赋值，这很容易漏掉一些属性的设置

3. 合理使用框架、组件和插件。这些工具对一些地方进行了封装，可有效减少耦合，提高开发效率