用于在非 SPA 站点上构建可重用组件的 Javascript MVC 框架

Posted 2023-02-22

【中文标题】用于在非 SPA 站点上构建可重用组件的 Javascript MVC 框架

【英文标题】：Javascript MVC Framework for building reusable components on a non-SPA site

【发布时间】：2014-02-07 11:20:35

【问题描述】：

我们有一个现有的 Genealogy 站点，它不是一个单页应用程序，多年来我们已经创建了许多 jQuery 插件来执行诸如预输入、各种基于模式的实用程序和可重用的组件之类的事情网站。我们不做单页应用程序，因为我们是内容发布者，我们还不确定搜索引擎是否会在我们的用例中可靠地索引这些内容。

我们现在正在考虑添加一些具有多视图模式流的更复杂的小部件。 Genealogy 站点的一个示例是，在很多情况下，用户必须从他们关注的记录池中选择一个 Person 记录，或者创建一个新记录。

例如，假设您正在查看一个人记录，想要更改一个人的家谱关系。您单击一个链接，会出现一个模式，允许您编辑它们的关系。我们设想的模态流如下所示：

查看 1（索引）：列出当前关系的管理页面，以及允许您选择关系类型（父母、配偶、孩子、兄弟姐妹）

视图 2（添加人员）：我们显示了一个支持预先输入的文本输入字段。当用户键入时，我们会查看他们图表上的人群并尝试进行匹配。如果它们与预先输入的内容匹配，我们可以捕获该内容并将其发送回父应用。

查看 3（搜索匹配项）：用户可能刚刚错过了预先输入的结果 - 因此允许 API 查看他们的图表中是否有任何潜在的匹配项。允许用户选择一个匹配项，然后将其发回。如果没有匹配，他们可以点击“这些不是我的人”

查看 4（创建人员）：如果我们在他们的图表中找不到匹配的人员，则这是一个全新的人员。给他们一张表格，提供有关此人的详细信息。

我不知道什么可能是最好的解决方案。我研究了 EmberJS 和 AngularJS，这两个社区的人都建议，如果你不构建单页应用程序，那么使用这些框架是不值得的。

谁能指出我正确的方向？在这个用例中我不能是独一无二的！

【问题讨论】：

在你的情况下，听起来你正在使用迷你水疗中心的概念。我没有深入研究 EmberJS，但是我发现 Angular 对于创建 spa 和 mini-spa 网络应用程序非常有用。在你尝试之前你不会感觉到它;）

@CoffeeCode：我从未听说过“迷你水疗中心”这个词，而且似乎无法搜索它。有什么办法可以绕过这一切的 URL 映射方面？

一个迷你spa web应用程序，只有一些页面有很多客户端逻辑。您可以将其视为混合体。

【参考方案1】：

我已经使用Knockout.js 和Ember.js 构建了几个迷你SPA 应用程序。提供迷你单页应用程序而不是转换整个应用程序有很多很好的理由，主要是客户端代码并不能做所有事情更好。

根据我的经验，Angular 和 Ember.js 都非常有用，无需让您的整个应用程序成为客户端。 Ember 为您提供了一些非常有用的工具来制作“小部件”。

例如，如果我希望 Ember 应用程序在我的服务器端页面的一部分上呈现，我可以这样做：

var App = Ember.Application.create(
  // Set the rootElement property to the div that I want my ember app to render inside
  rootElement: "#your-root-element",
  Resolver: Ember.DefaultResolver.extend(
    resolveTemplate: function(parsedName) 
      // Override this method to make this app look for its templates in a subdirectory
    
  ),
);

// Don't render the app on any page by default
App.deferReadiness();

// Instead, check to see if the #rootElement is present on the page before rendering.
$(document).ready(function() 
  if ( $(App.get('rootElement')).length > 0 ) 
    App.advanceReadiness();
  
);

我相信你可以用 Angular.js 做类似的事情。我更喜欢 Ember，原因如下：

真正的类/mixin 系统。这在您想要共享代码时非常有用：任何习惯于在服务器端工作的人都应该非常熟悉它。 非常灵活templating. 清晰的关注点分离，允许优雅地处理许多不同的视图等。