非SPA的JavaScript架构

JavaScript Architecture for non-SPA

本文关键字：架构 JavaScript SPA      更新时间：2023-09-26

我想知道在不将整个应用程序重写为单页应用程序的情况下，使用Backbone.js（或其他MV*js框架）的最佳方法是什么。我只想用JS和API处理我的CRUD操作，但保留我以前的导航链接。

如果用户导航到/场馆，他可以在不离开页面的情况下进行与场馆相关的CRUD。

我想这就像有很多SPA。

如何模块化Backbone（或任何其他JS框架），以便在每个页面上只触发我需要的模块。

非常感谢你的帮助。

我在很多不同的情况下都使用这样的主干。我最终：

  • 忽略路由器
  • 视图和模块只是JS字典，其中包含一些内置的有用方法
  • 集合是增强的数组

之后，只需编写一些javascript！

我使用了一种类似@dormisher的方法。

选项1

为您的模型、视图等创建一个带有占位符对象的MyApplication对象：

var MyApplication = {
  Models: {},
  Views: {},
  Collections: {},
  Routers: {},
  initFirstApp: function() {
    new MyApplication.Routers.FirstRouter();
    Backbone.history.start();
  },
  initSecondApp: function() {
    // similar to above...
  }
};

通过扩展MyApplication对象来定义模型、视图等：

var MyApplication.Routers.FirstRouter = Backbone.Router.extend({ ... });

然后，假设您有一个js文件，它只在您希望FirstApp运行时加载，只需调用MyApplication.initFirstApp()即可。

（当然，您也可以按应用程序组织主干结构，如@dormisher的代码示例所示，并为每个主干结构提供一个init或start方法。）

选项2

另一种选择是有一个通用路由器，你可以在每个主干网驱动的页面上实例化，如果当前url与定义的路由匹配，主干网将自动接管。我建议您只在每个页面只有一条路线的情况下使用这种方法（即，每个应用程序都是SPA，没有子路线）。

我在一些应用程序中使用过这种方法，目前我正在重写网站的一个部分，并为网站的每个主要导航部分创建许多小型骨干应用程序。

这似乎很明显，但我所做的只是为每个部分都有一个单独的脚本文件。因此，对于网站的用户部分，我有一个名为users.js的js文件，其中包含用于该部分的所有视图/模型/路由器等。与users.js文件一起包含的共享js文件中包含了任何共享的内容，如基本视图或其他内容。这样，所有的东西都可以放在一起，很容易找到，而且你只需要在页面加载时向服务器发出几个请求。

为了改进组织，我还将所有内容存储在一个类似JSON对象的命名空间中，因此我创建了一个全局JSON对象，如下所示：

var MyApplication = {
  Users: {
    Views: {}, // all backbone views go in here
    Models: {} // all models go here
    // routers etc
  }
}

真的很简单，但你知道古老的格言：保持简单愚蠢！

相关文章：