代码之家  ›  专栏  ›  技术社区  ›  Derick Schoonbee

在单页web应用程序(我使用Dojo)中,URL设计的良好实践是什么?

  •  0
  • Derick Schoonbee  · 技术社区  · 17 年前

    我想知道在使用Ajax(特别是Dojo)时如何重用HTML。因此,让我来设置上下文:

    上下文

    假设我有index.html和一些包含*.js的文件 http://host/site/ 比如说,这会消耗一些REST服务 http://host/rest/xxxx/yy

    这个 使用者 相互作用 http://host/site/

    我在思考当用户转到 http://host/site/contacts http://host/site/contacts/active 使用不同的技术。(客户端状态/书签)

    例如,在PHP中可以使用 Smarty (替换模板html文件中的标记)并可能使用 mod_rewrite 要清除来自say的url,请执行以下操作: http://host/site.php/contacts http://host/rest.php/xxxx/yy . 因此,将URL用于状态/书签。这“相对容易”,因为我们将重用template.html,并根据需要在PHP代码中生成/包含js代码。

    具有 RoR

    所以,我们来谈谈真正的问题。

    问题

    允许 使用者

    因此,对于客户端(应用程序状态),可以设计/site.html(纯客户端)或/site.php(服务器端+代码生成/包含等)

    1 回复  |  直到 17 年前
        1
  •  2
  •   Eugene Lazutkin    17 年前

    看起来你在谈论两件不同的事情:

    前者相对简单,不在客户端范围内。后者是您链接的文章的主题。

    其思想是在URL中使用哈希标记来传达此网页的内部状态。

    什么被认为是国家的一部分?从字面上来说,任何东西,但通常它必须有一些有形的意义。例如,如果您的网页向最终用户呈现不同的“页面”或部分,则当前部分可以是状态的一部分。

    让我给你举个具体的例子。下面的链接指向同一网站和同一网页( search.html ),但它们表示散列标记中编码的不同信息:

    您可以看到,状态是以人类友好的方式进行编码的。每次你搜索新内容,或者切换类别时,哈希值都会更新,你可以保存它,发送给你的朋友,或者像我刚才那样将它放在文章中。

    采用此技术的JavaScript应用程序的工作原理如下:

    • 当应用程序初始化时,例如使用 dojo.addOnLoad() ,它检查哈希标记。
      • 如果存在哈希标记,则将其解码为状态,并进行适当的操作。
    • 在正常操作过程中,应用程序更新哈希标记以反映其当前状态。最终用户可以保持此状态。

    一旦你开始使用“单页web应用”,当前状态就变得至关重要。它为用户提供了一个停止点,因此他们可以保存并在以后返回工作,而不是从一开始就开始——想象一下,在一个网页中编码了15个屏幕,您必须在所有屏幕中输入信息。

    另一个困扰“一页web应用程序”的问题是断开的后退按钮。用户可以尝试使用每个浏览器支持的熟悉的后退和前进按钮来导航应用程序。这将是最不幸的背叛他们的期望-想象用户是在7 th 屏幕并单击后退按钮。这是谁的错?这是网页设计师的失败。

    这两个问题本质上是一回事,可以同时解决。

    Dojo提供了一个简单的工具,可以使用 dojo.back() . 你可以:

    • 在需要时通过一次调用设置自定义状态。
    • 将“后退”和“前进”操作与特定状态关联。
    • 当用户使用后退/前进按钮时,自动进行状态转换。

    当然,它试图隐藏浏览器在处理所有这些事情方面的差异。

    PS:为什么要使用哈希标记?因为它可以从JavaScript更改,而无需从web服务器重新请求页面。传达状态的另一个常用选项是URL的搜索部分(例如。, ?state=5 ),但如果它应该动态更改,则无法使用,因为它将再次请求相同的页面。

    更新: 现在讨论URI的设计。随着时间的推移,关于这个话题有很多文章和言论。该领域最具影响力的作者可能是:

    当今大多数现代应用程序都是围绕 REST 思想。就URI而言,它们的典型实现是将URI作为名词提供,同时使用HTTP动词作为动词。示例:

    • /articles -所有文章。
    • /articles/2005 -2005年的所有文章。
    • /articles/2005/12
    • /articles/2005/12/about-rest -2005年12月写的《关于休息》一文。

    动词应为(具有可能的含义):

    • GET -获取资源(无副作用!)。
    • PUT -在给定URI处创建或替换资源。
    • POST -提交要处理的资源,或将资源添加到列表,或创建子资源。
    • DELETE -删除资源。

    REST假设,如果一个资源有到其他资源的链接,URI将以超文本方式使用。常见的例子是其他资源的列表。

    在上面的URI示例中,我有意使用可用于向最终用户呈现资源的可读URI。现代web应用程序通常使用两层URI模式:

    1. REST用于程序使用的底层资源。

    后者可以围绕前者组织,也可以围绕一些以用户为中心的概念组织,如活动区域。我更喜欢使用简单易懂的URI向我的用户演示,不是吗 /&p=29463&q=RcLGTt

    别忘了网页URI是围绕着它组织的 收到 . 带有表单的网页可以生成 然而,公开这样的URI是一种糟糕的形式,因为它们不能被书签和共享。常用的技术是重定向(使用 HTTP 302 邮递

    散列已经是URL的一部分,它表示网页的状态(其中的一个位置)。重用它意味着编程状态完全符合其原始目的。虽然动词对散列标记没有任何意义,但其余部分完全适用(普遍性、全局唯一性、相同性、同一性)。它应该是一个“名词”,而不是一个“动词”(动作)。在简单的情况下,可以使用正确转义的键值对包(如本文开头的示例)。在更复杂的情况下,它可能是一个复合名称,如上所述。

    显然,web应用程序的URI设计是体系结构的一部分,应该考虑到具体情况。这与其说是科学,不如说是艺术——这就是为什么我们要给软件架构师一大笔钱的原因但我希望以上信息能让你走上正确的道路。