模块化 Web 应用程序 [英] Modularizing web applications

问题描述

我想知道大公司是如何将其页面上的组件模块化的.Facebook 就是一个很好的例子:

I was wondering how big companies tend to modularize components on their page. Facebook is a good example:

有一个团队致力于搜索有自己的 CSS, javascript, html,等等.

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

有一个团队在处理新闻拥有自己的 CSS、javascript、html 等...

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

...而且名单还在继续

... And the list goes on

他们不可能都知道每个人都在为他们的 div 标签命名什么等等，那么控制器(?)做了什么来将所有这些组件挂在最终页面上??

They cannot all be aware of what everyone is naming their div tags and whatnot, so what's the controller(?) doing to hook all these components in on the final page??

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

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

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

谢谢大家！马特·穆勒

推荐答案

Web 开发无疑会带来一些组织上的挑战.HTML/CSS 并不是拆分工作的理想环境.定义一定的规则并严格遵守是非常重要的.

Web development definitely brings some organizational challenge. HTML/CSS is not exactly the dream environment for splitting work. It is very important to define certain rules and strictly follow them.

我的个人策略是在共享源(如 CSS 或标记组件)中使用一些模块后缀作为前缀.如果你坚持这个策略，它会在全球范围内统一名称.

My personal tactic I have come to is to prefix the names in shared sources (like CSS or markup components) with some module suffix. If you keep to the strategy, it will uniquify the names globally.

例如:

代替

div.question_title
div.question_body

你可以使用

div.so_question_title
div.so_question_body

div.su_question_title
div.su_question_body

还就一些共享数据(例如配色方案的颜色)与团队达成一致.在全局某个地方定义它们并在任何地方重复使用它们.

Also agree with teams on some shared data like colors of the color scheme. Define them somewhere globally and reuse them everywhere.

当团队在同一页面的不同部分工作时，会出现另一个问题.在这里，如果您正在开发一个页面组件，您可能会发现某天某处损坏了，因为在页面上工作的人员本身更改了一些内容，并且更改沿元素层次结构向下传播.

Another issue arrives when teams are working on different parts of the same page. Here if you're developing a page component, you may find one day something is broken because the guys working on the page itself changed something and changes propagated down the element hierarchy.

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

For example, if you define a CSS style in this manner:

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

这会自找麻烦.我建议您通常使用最小可能范围来定义 CSS 样式，这足以让某些技术发挥作用.

it would be asking for trouble. I suggest that you have at as a rule to define CSS styles with the minimum possible scope which is sufficient for some technique to work.

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

One possible workaround: each submodule firstly resets all the styles for its top-level hierarchy element, like:

div.news_container
{
    /* Reset styles */
}

这样您现在就可以放心地处理模块了，某些父元素的更改将在您的周边停止.

so that you can now work on the module resting assured the changes in some parent elements would be stopped at your perimeter.

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

UPDATE: Regarding divs with UIDs. If you mean Facebook, I'm not sure what UIDs you are referring to. Only hidden inputs have some long cryptic IDs as their values (main page, not logged in), but this is likely the result of the framework automatically generating these values for some reason. I once wrote some code (for ASP.NET MVC) for Html helpers to generate unique IDs application-wide (I wanted to bind checkboxes with labels by IDs completely automatically and transparently for me). Another case could be that a stateful event-driven framework (such as ASP.NET WebForms) has unique IDs generated server side as a requirement to support its operation. Each control has to have some unique ID so that it is possible to know on the server side which element raised an event on a page. Also some WYSIWYG editors would add auto IDs to elements when you drag them and drop to a form.

除此之外，当然可以使用一些预构建脚本来检查代码并将唯一 ID 注入标记和 CSS 代码部分.但你真的需要确切地知道你这样做的目的和原因.我个人认为这种单一化"一般可以通过在团队中强制执行一些简单的规则来手动实现，而某些工作当然可以自动化，就像我上面描述的那样.

This all aside, it is of course possible to have some pre-build script to go over the code and inject unique IDs into markup and CSS code portions. But you really need to know exactly what and why you are doing this. I'm personally of the opinion this "uniquization" in general can be achieved manually by enforcing some simple rules in a team, while some work can of course be automatized, like what I described above.

这篇关于模块化 Web 应用程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！