Question

我有一个带预订/预订功能的网络应用程序。我的核心功能之一是检查预订是否与其他预订冲突，并且此功能用于多个页面。它的返回数据通常不会加载页面，因为它的请求参数取决于用户输入。换句话说：

我有一个获取预订数据的ajax功能
它被抽象到它自己的.js文件中，以获得可重用性
ajax函数包含在javascript函数中。

但是，ajax功能不适合我的预期用途。由于它的异步特性，在ajax调用完成之前，包装函数将不返回任何内容。如果我需要使用返回的数据执行某些操作，它应该在ajax调用的成功函数内部，但是因为我需要根据哪个页面以及需要数据的情况来发生不同的事情。

我看到了问题的三个解决方案。我无法确定哪种方法最好，或者是否有第四种更好的选择：

1。跳过ajax函数的抽象。换句话说，只需将它复制/粘贴到我需要数据的每个函数中，然后就可以了。我会随时提供成功条件功能。

2。将成功函数作为参数传递。如果我需要动态发生，我可以通过将函数传递给ajax-wrapper函数并确保传递的函数接受ajax返回的数据来实现。因为它是自己的参数。

第3。使ajax调用同步。可能，但有点破坏 a jax的概念（实际上我也在使用JSON，因此这将使ajax成为sjoj）。

老实说，我真的看不出任何一种解决方案在这里都是胜利者。我非常感谢任何帮助。

Answer 1

我建议使用基于事件的方法。在ajax成功中，您可以触发（触发）一个事件，例如booking-check-complete，并且特定页面按照需要的方式处理事件。

通过这种方式，您可以很好地保持ajax的优势 - 异步并保持页面解耦。

对于这样的用法，我使用jQuery事件机制，但也有其他库可用。请在此处查看 - trigger

例如，在第一页中您有：

$( document ).on( "booking-check-complete", function( event, param1, param2 ) {
  alert( "Hello from page 1" );
});

在第二页上：

$( document ).on( "booking-check-complete", function( event, param1, param2 ) {
  alert( "Hello from page 2" );
});

在ajax成功：

$( document ).trigger( "booking-check-complete", [ "Custom", "Event" ] );

注意您不需要jQuery来使用所述事件here 这使用普通的javascript，但它与IE不兼容。

var event = new Event('build'); // Listen for the event. elem.addEventListener('build', function (e) { ... }, false); // Dispatch the event. elem.dispatchEvent(event);

Answer 2

否。这违反了DRY。
是。这是惯用的JavaScript。
否。这会锁定UI（并且不推荐使用同步XHR）。

选项2是杰出的赢家。

我该如何处理ajax get函数，它在多个页面中重用？

2 个答案: