模块化的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的 - 有独立的团队在不同的组件工作的公司有一定的逻辑，帮助他们走出的

编辑：感谢所有的答复，可惜我还没有真正找到了我要找的 - 当你签出源$ C ​​$ C（授予其​​缩小的）的div的UID有，我的猜测是，有通过运行，使每一个独特的组件，重命名的div和css规则的编译过程..任何想法？

编辑2：感谢所有提出你的想法 - 赏金已经是最高upvoted答案。这个问题的目的是要vague-我认为这导致了一个非常有趣的讨论。正如我提高我的生成过程中，我将贡献我自己的想法和经验。

谢谢大家！
马特·穆勒

Thanks all! Matt Mueller

推荐答案

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.

我个人的战术我来是preFIX一些模块后缀的共享资源（如CSS或标记组件）的名称。如果你到战略，将在全球范围uniquify的名字。

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的申报单。如果你的意思是Facebook的，我不知道你指的是什么样的UID。只隐藏的输入有一些长隐蔽ID作为它们的值（主页，没有登录），但是这很可能是自动生成由于某些原因这些值的框架的结果。我曾经写过一些code（对于ASP.NET MVC）的HTML辅助生成唯一ID的应用范围（我想通过完全的ID自动，透明地绑定标签复选框对我来说）。另一种情况可能是有状态事件驱动架构（如ASP.NET的WebForms）产生了服务器端，以支持其工作的要求唯一的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.

这一切不谈，这当然可能有一些pre-构建脚本走了过来code和注入唯一ID为标记和CSS code部分。但是，你真的需要知道到底是什么，为什么你在做这个。我个人这个uniquization一般可以手动执行在一个团队的一些简单的规则来实现的意见，而一些工作当然可以automatized，像什么如上所述我

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屋！