ExtJS 4.1 - Store.add()(后跟同步)vs Model.save()

时间:2012-10-31 16:30:22

标签: javascript performance extjs

FIRST:我在这里已经意识到这个问题:in ExtJS, is it better to call Model.save() or Store.Sync()? - 但我希望进一步研究这个问题,特别是在最小化客户端和服务器上的XHR和不必要的开销方面。我不认为在相关问题中解决了这些问题中的任何一个。

我有一个稍大的应用程序,专为企业资源管理而设计,包括许多模型,视图和控制器。我通过建立Ext.Ajax requestCompleterequestException事件的监听器来处理来自我的服务器的所有响应。我采用这种方法而不是在每个模型的代理afterRequest事件上编写重复的事件处理程序。这使我能够使用我的所有后端(使用Zend Framework)控制器响应三个参数:successmessagedata

成功请求(即HTTP 200)之后,requestComplete运行的方法将检查上述参数的JSON响应。如果successfalse,则预计message中会包含一条错误消息,然后会向用户显示(例如'保存该产品时出现问题。无效产品名称')。如果成功,则根据请求的类型采取操作,即创建,读取,更新或销毁。成功create后,新记录将被添加到相应的数据存储中,删除后将删除记录,等等。

我选择采用这种方法,而不是将记录添加到商店并调用商店的sync方法,以便最大限度地减少XHR和其他往返行程。我目前保存/更新数据的方法是将请求发送到后端并对Ext前端的结果做出反应。我通过使用数据填充模型并为创建/更新请求调用model.save()或使用model.destroy()来删除数据来执行此操作。

我发现当从商店添加/更新/删除记录,然后调用store.sync()时,我必须以一种让人觉得尴尬的方式对服务器的响应作出反应。例如,删除记录:

  1. 首先,通过store.remove()
  2. 从商店中删除记录
  3. 调用store.sync(),因为我将商店的autoSync设置为false
  4. 这会从商店的模型代理中激活AJAX销毁请求。
  5. 这里变得奇怪......如果在从数据库中删除行时服务器上出现错误,响应将返回success: false,但是记录已经从ExtJS数据中删除了存储。
  6. 此时,我可以调用store.sync()store.load()(两者都需要往返)或者从请求中获取记录并将其添加回商店,然后再添加{{1}避免调用额外的同步/加载,从而避免不必要的往返。
  7. 添加记录也是如此,如果服务器在向数据库添加数据时失败,则记录仍在ExtJS存储中,必须手动删除以避免使用commitChanges()或{{1 }}

    为了避免这个问题,正如我之前所解释的,我实例化了我的一个模型对象(例如产品模型),用数据填充它,然后调用store.sync()。反过来,这会根据模型的ID调用代理的store.load()myModel.save(),并触发相应的AJAX请求。如果后端发生故障,前端存储仍未更改。在成功请求(读取:create,而不是HTTP 200)上,我手动将记录添加到存储并调用update,有效地将存储与数据库同步,而无需额外的往返并避免不必要的开销。对于所有请求,服务器将使用新的/修改的数据以及成功参数进行响应,并有条件地在客户端上显示消息。

    我在这里遗漏了什么,或者这种方法是否可以最大限度地减少XHR和服务器/客户端开销?我很乐意提供应该请求的示例代码,但我觉得这是一个基本代码的相当普遍的概念。

1 个答案:

答案 0 :(得分:2)

我认为你雄辩地论证了你的立场。我认为你所采取的立场没有任何问题。我唯一的责备是指出支持可编辑网格的商店的autoSync设置是一种远没有那么简单的完成任务的方式,尽管控制力较弱。

要添加,您指出的开销通常是由于意外或我会调用可能需要特殊处理或额外刷新数据的边缘情况。您可以为这些特定情况添加侦听器,并使用简洁的默认值保留其余部分。