Question

在AJAX应用程序中实现代码分离有哪些策略？

我正在构建一个PHP应用程序，我希望有一个很好的AJAX前端。我早就学会了在我的PHP代码中使用某种模板来确保我在逻辑和显示代码之间保持良好的分离，但是我很难找到使用前端JavaScript代码执行此操作的好方法。我正在使用jQuery来轻松获取XML数据和DOM操作，但我发现逻辑和布局代码开始混合。

真正的问题是我从后端获取XML数据，然后必须重新格式化，并且有用的文本必须围绕它（方向等）。我已经考虑过发送已经格式化的HTML，但这需要对后端进行大量的重新设计，并且必须有比我自己想出的更好的方法。

Answer 1

在HTML页面中编写模板，可能在隐藏元素中。
通过AJAX调用获取数据，我发现更容易使用JSON，因此您不必“重新格式化”XML，它只是数据。
将模板应用于数据以生成HTML并插入显示的页面。

检查一些jQuery模板插件：jsRepeater，jTemplates，noTemplate，Template

Answer 2

我最近一直在问类似的问题（here和here），我发现了一些可以提供帮助的事情。我理解您在UI交互被强制进入代码时遇到的相同问题。

1：为功能编写“类”并传入要在构造函数中修改的元素，无论是元素的ID还是元素本身，由您决定。

2：为可能因页面或控件而异的部分编写“事件”。通过事件，我的意思是只能使用实际函数覆盖的占位符方法。所以举例......

var FilterControl = function() {

    //the "event"
    var self = this;
    this.onLoadComplete = function() { };

    //This is the command that calls the event
    this.load = function() {
        //do some work
        ...

        //Call the event
        self.onLoadComplete();
    };
};

//somewhere else in the code
var filter = new FilterControl();
filter.onLoadComplete = function() {
    //unique calls just for this control
};

3：获取更友好的Javascript IDE。我喜欢我的Visual Studio，但Apanta是一个出色的IDE，它有一个非常强大的Javascript IDE（它允许你将.JS文件拖到文件参考对话框让你获得所有那些Javascript文件的智能感知，解决了为什么难以拆分Javascript的一个主要原因！

Answer 3

我不是100％确定我得到了你的问题，但你可以做些什么，特别是如果我们谈论的是单一页面风格的AJAX应用程序是使用面向特定任务的Singletons类。

var XMLFormatter = function(){
    /* PRIVATE AREA */

    /* PUBLIC API */
    return {
        formatXML : function(xml){
            /* DO SOMETHING RETURN SOMETHING */
        }
    }
}();

您剩下的是一个静态XMLFormatter类，可以在页面的任何位置调用，如此...

function useClass(){
    $('#test').update(XMLFormatter.formatXML(someXML))
}

此函数可用作AJAX请求的回调。我通过创建Page类来使用此方法进行页面逻辑.taht返回一个对象，该对象具有在加载页面时调用的init方法。然后，init方法将各种事件和内容附加到我的页面及其元素。如果您有时间和金钱，这种方法在Pro JavaScript Design Patterns中被讨论，值得一读。

同样值得注意的是，Javascript与其他语言相比有很大不同，通常人们的最佳实践方法通常只是改编自Java的方法。虽然这没关系但它没有使用Javascript来充分发挥其潜力。记住Javascript是非常受事件驱动的，因为它与UI交互很接近，你会发现一些事件代码与其他代码交织在一起。 Crockfords网站（http://javascript.crockford.com/）有一些最佳实践文章以及其他一些有用的提示。

Answer 4

如果我正确理解了这个问题，那么你在相同的代码块中有很多HTML / javascript，并且你想将它们分开。

我会使用几个技巧来实现清洁分离：

一个包含每个操作组的脚本/函数的JS文件。
一个包含所有常用功能的JS文件（XML解析器，实用程序......）
一个JS文件（lazy-）加载特定脚本（此处为＃1项）并在文档加载时将任何事件附加到当前元素。

主要问题是将即时功能/事件附加到生成的代码。 IIRC，JQuery可以处理这个但不确定。

希望它有所帮助。

Answer 5

我不喜欢在客户端上进行格式化，所以我总是尝试从AJAX回调中返回HTML，除非我真的需要数据作为选择列表。

原因是我在服务器（ASP）上有一个丰富的工具集用于在客户端上创建HTML而没有任何内容。我在服务器上使用一个自定义的“动态页面”，其中包含一个“动态控件”，用于保存我想要格式化的数据的模板。只从该页面发出该控件的内容。

AJAX调用的Web服务仅执行：return Execute（some-dynamic-page）。 Web服务的参数将传递到HttpContext包或查询字符串中的动态页面。

我发现使用拖放控件在服务器上创建新的动态页面模板比使用客户端模板或xml转换器更容易。我没有使用任何或Jxxxx模板工具 - 也许他们减轻了痛苦。

使用该方法，您可以使用与通常相同的分离（MVP / MVC，或简单的代码隐藏）。

AJAX应用程序中的代码分离

5 个答案: