【问题标题】:Code separation in AJAX applicationsAJAX 应用程序中的代码分离
【发布时间】:2010-09-21 02:16:09
【问题描述】:

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

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

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

【问题讨论】:

    标签: php jquery ajax


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

    检查一些 jQuery 模板插件:jsRepeaterjTemplatesnoTemplateTemplate

    【讨论】:

    • 我在最新的项目中一直在使用 jTemplates 来格式化 JSON,这绝对是我迄今为止见过的最优雅的解决方案。
    【解决方案2】:

    我最近一直在问类似的问题(herehere),我发现了一些可以提供帮助的东西。我了解您在将 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 文件拖到 File References 对话框中,所以您可以为所有这些 Javascript 文档获得智能感知,从而解决难以拆分 Javascript 的主要原因之一!

    【讨论】:

      【解决方案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 类将这个方法用于页面逻辑,它返回一个带有 init 方法的对象,该方法在页面加载时被调用。然后 init 方法将各种事件和内容附加到我的页面及其元素。这种方法在Pro JavaScript Design Patterns 中讨论过,如果您有时间和金钱,非常值得一读。

      同样值得牢记的是,Javascript 与其他语言相比有很大不同,通常人们的最佳实践方法通常只是从 Java 改编而来的。虽然这没关系,但它并没有充分发挥 Javascript 的潜力。记住 Javascript 是相当事件驱动的,因为它与 UI 交互很接近,你会发现一些事件代码与其他代码混合在一起。 Crockfords 网站 (http://javascript.crockford.com/) 有一些最佳实践文章以及许多其他有用的提示。

      【讨论】:

        【解决方案4】:

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

        我会使用几个技巧来进行干净的分离:

        • 一个 JS 文件包含每个操作组的脚本/函数。
        • 一个包含所有常用功能(XML 解析器、实用程序...)的 JS 文件
        • 一个 JS 文件,它(惰性)加载特定脚本(此处为项目 #1)并在文档加载时将任何事件附加到 currents 元素。

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

        希望对你有帮助。

        【讨论】:

          【解决方案5】:

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

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

          AJAX 调用的 Web 服务只做:返回 Execute(some-dynamic-page)。 Web 服务的参数通过 HttpContext 包或查询字符串传递给动态页面。

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

          使用该方法,您可以使用与通常相同的分离方式(MVP/MVC,或简单的代码隐藏)。

          【讨论】:

            猜你喜欢
            • 1970-01-01
            • 2018-06-25
            • 1970-01-01
            • 2012-09-14
            • 2013-08-17
            • 1970-01-01
            • 2011-02-05
            • 2014-02-24
            • 1970-01-01
            相关资源
            最近更新 更多