如何组织模块化的web应用程序


How to organize modular web app

我有一个网站,在一个典型的"仪表板"页面上有多个模块。它们都与相同的数据库和相同的表集通信,其中一些完成写入工作,一些完成显示等。

我应该使用iframe来实现这一点或组合所有的代码或有其他的选择?

这些模块可以在客户端javascript级别上相互交互。例如,我点击模块a中的按钮,模块B中的文本框将被隐藏。

此外,你是如何实现这样的,当我使用模块A写东西到数据库,模块B将知道是时候再次获取新的数据。

如果你的网页的不同部分需要相互沟通,那么我不认为iframe是一个好主意。(我可能遗漏了一些东西。)

你可能想看看Backbone.js。它为你提供了一个JavaScript模型/视图框架,当视图的模型发生变化时,它会自动重新渲染视图,这可能会让你更容易保持所有模块彼此同步。

你基本上复制你的数据库对象在一个Backbone.js模型的页面加载,然后让你的页面上的模块保持同步与他们的Backbone.js模型,而不是反复轮询服务器发生的变化,无论如何在页面上。

我应该使用iframe来实现这一点或组合所有的代码或有其他的选择?

更好:模板驱动的网站

此外,当我使用模块A向数据库写入内容时,模块B将知道是时候再次获取新数据了。

有很多方法,例如:

  1. 添加bool列'标志',以标记一行是否已更改(假设1如果)修改,否则为0)
  2. 模块B在给定的时间间隔内查询服务器(您正在使用AJAX,对吧?这些"标志",检索它们并设置为0,然后根据需要重新显示它们

对于您所描述的内容,不应该有任何理由使用iframe。像jQuery这样的Javascript UI库可以在操作网页不同元素的同时保持标记更干净,所以你应该先检查一下。

如果这仍然不能解决你在不同模块之间通信的问题,看看Backbone.js:它是一个Javascript模型/视图/控制器库,可以帮助你解耦你的模型(在你的情况下,你的数据库代码)和视图发送数据给它和/或响应它的更新事件(你的仪表板小部件)。