JavaScript 框架，用于构建动态但服务器端驱动的前端

JavaScript framework for building out a dynamic but server-side driven frontend

本文关键字：服务器端 前端 动态 框架 用于 构建 JavaScript      更新时间：2023-09-26

我正在考虑构建一个或多或少包含多个嵌套列表的小应用程序，并且选择每个列表中的各种项目将过滤其他嵌套列表的内容。

列表一

  • 苹果
    • 电话
      • 苹果手机
    • 计算机
      • Macbook Air
      • 三星
    • 电话
      • 银河 S

清单二

  • 百思买
    • 密歇根州安娜堡
      • 伊
    • 利诺伊州芝加哥
  • 沃尔玛
    • 密歇根州兰辛

如果用户点击"Apple> Phone"，服务器将在列表二中找到关联的条目，并将列表二更新为仅显示"百思买"（假设百思买是唯一销售苹果制造的手机的商店）

我的问题是，有没有人建议我应该使用什么前端JS库来构建它？这将基于来自服务器的 AJAX JSON 响应更新 DOM（列表）。

我看了一下KnockoutJS，但试图为每个列表创建一个viewModel，并通过KnockoutJS映射库更新它，事情似乎变得混乱。

我正在考虑简单地使用 jQuery，但我不太喜欢用它构建 DOM 的大部分（它似乎很快就会变得丑陋）。

我想避免的一件事（以及我为什么要看 KnockoutJS）是我不喜欢在代码中编写标记。我喜欢在"HTML"中维护我的标记，并通过框架将JS数据"绑定"到这些元素的想法。

另外，我希望将jQuery用于所有视觉"绒毛"，事件绑定等。

谢谢

我最终选择了Backbone.js [1]

就绑定而言.js它似乎比 Knockout 更灵活一些。我正在使用骨干支持的JS模板来构建每个列表级别。这需要一些代码，但 Backbone 非常灵活（因此是代码位）。我确信这在许多其他 JS 框架中是可能的，但我认为我已经能够取得更多进展 w 骨干是我不需要深入了解框架/API/复杂性来使其工作 - （我的）代码可能更冗长，但正因为如此，它更容易拼凑出一切是如何工作的。

[1] http://backbonejs.org/

这更像是一个部分答案，试图解决"维护...'HTML'中的标记"。我会在 HTML 中创建一个通用菜单项，它可以作为每个菜单项的模板，如下所示：

<li id="menuItemTemplate" class="menuItem">
  <span class="menuItemText"></span>
  <ul class="submenu"></ul>
</li>

这不会在你的页面上的可见位置;它只是为每个菜单项插入的 HTML。然后，当您添加菜单项时，您的 JavaScript 将负责在列表中添加任意数量的menuItem元素。就HTML操作而言，JavaScript只需要做一些事情，比如添加id或class属性来组织或设置数据样式，以及添加每个项目的文本内容。示例实现可能如下所示（我喜欢jQuery）：

function loadMenuItem(text, parentId) {
  // Grab the template
  var newItemHtml = $("#menuItemTemplate")[0];
  // Set its id to something unique
  $(newItemHtml).attr("id", getNextId());
  // Set the text
  $(newItemHtml).find("span.menuItemText").html(text);
  // Put it in the clicked menu
  $(parentId + "ul.submenu").append( newItemHtml );
}

最后，我不会编程你的项目，不过。我只能给你我的偏好。如果这需要花费大量时间，我想说最好的办法是尝试所有听起来很有趣的框架（显然是小规模的），以了解您喜欢在每个框架中开发 DOM 转换应用程序的方式。这会让你更好地了解你会更喜欢哪个，并向你介绍不同的框架。

不是这个问题的直接答案 - 仍然值得看看Kendo UI MVVM

  1. 使用剑道 UI 的 MVVM 只需三个简单的步骤
  2. 剑道 UI Web MVVM
  3. 了解 MVVM – JavaScript 开发人员指南
  4. 剑道 UI 演练中的 MVVM
  5. 构建单页应用程序 – 第 7 部分 – MVVM 和 KnockoutJS
相关文章：