architecture - 模块化 Web 应用程序

Question

我想知道大公司如何倾向于在他们的页面上模块化组件。 Facebook 就是一个很好的例子:

There's a team working on Search that has its own CSS, javascript, html, etc..

There's a team working on the news feed that has its own CSS, javascript, html, etc...

... And the list goes on

他们不可能都知道每个人都在命名他们的 div 标签什么的，那么 Controller (？)做了什么来将所有这些组件卡在最后一页上？

注意:这不仅适用于 facebook - 任何拥有独立团队处理不同组件的公司都有一些帮助他们的逻辑。

编辑:感谢大家的回复，不幸的是我还没有真正找到我要找的东西——当你查看源代码时(授予它的缩小版)，div 有 UID，我的猜测是有一个编译过程它贯穿并使每个组件都独一无二，重命名 div 和 css 规则.. 有什么想法吗？

编辑 2:感谢大家贡献你的想法 - 赏金去了最高投票的答案。这个问题被设计得含糊不清——我认为它引发了一场非常有趣的讨论。随着我改进构建过程，我将贡献自己的想法和经验。

谢谢大家!
马特·穆勒

Answer 1

Web 开发肯定会带来一些组织挑战。 HTML/CSS 并不是分割工作的理想环境。定义某些规则并严格遵守它们是非常重要的。

我个人的策略是在共享源(如 CSS 或标记组件)中的名称前加上一些模块后缀。如果您坚持该策略，它将在全局范围内统一名称。

例如:

代替

div.question_title
div.question_body

你可以使用

div.so_question_title
div.so_question_body

div.su_question_title
div.su_question_body

还要与团队就配色方案的颜色等一些共享数据达成一致。在全局某个地方定义它们并在任何地方重用它们。

当团队在同一页面的不同部分工作时，另一个问题就出现了。在这里，如果您正在开发一个页面组件，您可能会发现某天有些东西被破坏了，因为在页面上工作的人改变了一些东西，并且这些改变传播到了元素层次结构中。

例如，如果您以这种方式定义 CSS 样式:

div.main_news *
{
    /* ... */
}

这将是自找麻烦。我建议您通常以尽可能小的范围定义 CSS 样式，这足以让某些技术发挥作用。

一种可能的解决方法:每个子模块首先重置其顶级层次结构元素的所有样式，例如:

div.news_container
{
    /* Reset styles */
}

这样您现在就可以在模块上工作，放心，某些父元素的更改将在您的周边停止。

更新:关于带有 UID 的 div。如果您指的是 Facebook，我不确定您指的是什么 UID。只有隐藏的输入有一些长的神秘 ID 作为它们的值(主页，未登录)，但这很可能是框架出于某种原因自动生成这些值的结果。我曾经为 Html 帮助程序编写了一些代码(用于 ASP.NET MVC)以在应用程序范围内生成唯一的 ID(我想对我来说完全自动且透明地将带有标签的复选框绑定(bind)到 ID)。另一种情况可能是有状态的事件驱动框架(例如 ASP.NET WebForms)具有生成服务器端的唯一 ID 作为支持其操作的要求。每个控件都必须有一些唯一的 ID，以便可以在服务器端知道哪个元素在页面上引发了事件。此外，一些 WYSIWYG 编辑器会在您将元素拖放到表单时为其添加自动 ID。

除此之外，当然可以有一些预构建脚本来检查代码并将唯一 ID 注入(inject)标记和 CSS 代码部分。但是你真的需要确切地知道你在做什么以及为什么要这样做。我个人认为，这种“唯一化”通常可以通过在团队中强制执行一些简单的规则来手动实现，而一些工作当然可以自动化，就像我上面描述的那样。