关于php：AJAX应用程序中的代码分离


Code separation in AJAX applications

在Ajax应用程序中，实现代码分离的一些策略是什么？

我正在构建一个PHP应用程序，我希望在它上面有一个好的Ajax前端。我早就学会在PHP代码中使用某种模板来确保我的逻辑和显示代码之间保持良好的分离，但是我很难找到在前端使用JavaScript代码实现这一点的好方法。我使用jquery使获取XML数据和DOM操作变得容易，但我发现逻辑和布局代码开始混合。

真正的问题是，我从后端获取XML数据，然后必须重新格式化这些数据，并且必须将有用的文本(方向等)包装起来。我曾经考虑过发送已经格式化的HTML，但是这需要对后端进行大量的修改，而且肯定有比我自己想出的更好的方法。

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

检查一些jquery模板插件：jsreater、jtemplates、notemplate、template

相关讨论

我最近一直在问类似的问题(这里和这里)，我发现了一些有帮助的事情。我理解您在将UI交互强制转换为代码时发现的相同问题。

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

2：为可能因页面或控件而异的部分编写"事件"。我所说的事件，只是指可以用实际函数覆盖的占位符方法。所以举个例子…

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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的主要原因之一！

我不能百分之百地肯定我知道你的问题，但是你能做什么，特别是如果我们谈论的是单页风格的Ajax应用程序，它使用面向特定任务的单页类。

1
2
3
4
5
6
7
8
9
10
var XMLFormatter = function(){
    /* PRIVATE AREA */

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

剩下的是一个静态的xmlFormatter类，可以像这样在页面的任何地方调用它…

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

这个函数可以用作Ajax请求的回调函数。我通过创建一个page类来使用这个方法进行页面逻辑，taht返回一个带有init方法的对象，该方法在加载页面时被调用。然后init方法将各种事件和内容附加到我的页面及其元素。这是在pro-javascript设计模式中讨论的方法，如果你有时间和金钱的话，值得一读。

同样值得注意的是，JavaScript与其他语言相比有很大的不同，通常人们最好的实践方法通常只是Java的一种。虽然这还可以，但它并没有充分利用JavaScript的潜力。记住，由于Javascript与UI交互非常接近，所以它是事件驱动的，您会发现一些事件代码与其他代码混合在一起。Crockfords网站(http://javascript.crockford.com/)有一些最佳实践文章和一些其他有用的提示。

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

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

Ajax调用的Web服务只做：返回Execute(一些动态页面)。Web服务的参数被传递到动态页面，要么在httpcontext包中，要么在查询字符串上。

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

使用该方法，您可以使用与平时相同的分离(MVP/MVC，或者简单的代码隐藏)。

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

我会用几个技巧来实现完全分离：

  • 每个操作组一个包含脚本/函数的JS文件。
  • 一个包含所有公共函数的JS文件(XML解析器、实用程序…)
  • 一个JS文件(lazy-)加载特定的脚本(这里是item 1)，并在文档加载时将任何事件附加到当前元素。

主要问题是将动态函数/事件附加到生成的代码上。iirc，jquery可以处理这个，但不确定。

希望它有帮助。