模块化Web应用程序

Question

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

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

有一个团队正在处理新闻源,它有自己的CSS,javascript,html等......

... 而这样的例子不胜枚举

他们不可能都知道每个人都在命名他们的div标签和诸如此类的东西,那么控制器(？)在最后一页上挂钩所有这些组件是做什么的？

注意:这不仅适用于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(我希望完全自动且透明地为我绑定带有标签的复选框).另一种情况可能是有状态事件驱动框架(例如ASP.NET WebForms)具有生成服务器端的唯一ID作为支持其操作的要求.每个控件都必须具有一些唯一的ID,以便可以在服务器端知道哪个元素在页面上引发了事件.此外,一些WYSIWYG编辑器会在您拖动元素并将其拖放到表单时向其添加自动ID.

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