Php AJAX应用程序中的代码分离

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

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

---

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

我不是100%肯定我了解你的问题，但你能做什么，特别是如果我们谈论的是单页风格的AJAX应用程序，那么它将使用面向特定任务的单例类

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

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

剩下的是一个静态XMLFormatter类，它可以在页面上的任何位置调用，就像这样

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

此函数可用作AJAX请求的回调函数。我将此方法用于页面逻辑，方法是创建一个页面类taht，该类返回一个带有init方法的对象，该方法在加载页面时被调用。然后init方法将各种事件和内容附加到我的页面及其元素。如果你有时间和金钱，这是一个值得一读的方法

还值得注意的是，Javascript与其他语言相比有很大的不同，通常人们的最佳实践方法通常只是从Java改编而来。虽然这还可以，但它并没有充分利用Javascript的潜力。请记住，Javascript非常受事件驱动，因为它与UI交互非常接近，您会发现一些事件代码与其他代码混合在一起。Crockfords网站（）提供了一些最佳实践文章和一些其他有用的提示。

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

---

检查一些jQuery模板插件：，

我最近一直在问类似的问题（和），我发现了一些有帮助的东西。我理解您在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。我喜欢我的visualstudio，但是我制作了一个优秀的IDE，它有一个非常强大的Javascript IDE（它允许您将.JS文件拖动到“文件引用”对话框中，以便获得所有Javascript文档的intellisense，解决了Javascript难以拆分的主要原因之一！

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

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

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

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

---

希望能有所帮助。

我不喜欢在客户端设置格式，所以我总是尝试从AJAX回调返回HTML，除非我真的需要用于选项列表的数据，例如

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

AJAX调用的web服务只是返回Execute（一些动态页面）。web服务的参数通过HttpContext包或查询字符串传递给动态页面

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

---

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

我在最新项目中使用jTemplates格式化JSON，这绝对是迄今为止我见过的最优雅的解决方案。