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代码部分。但是你真的需要确切地知道你在做什么以及为什么这样做。我个人认为这种“统一化”通常可以通过在团队中执行一些简单的规则来手动实现，而一些工作当然可以自动化，就像我上面所描述的那样。

Answer 2

根据我的经验，无论你如何努力使一切标准化，大型团队完全连贯，每个人以同样的方式做同样的事情几乎是不可能的。

不要试图在“标准级别”或“如何”级别解决问题......在人力层面，在管理层面解决问题。

我们使用一些技术来维持管理层的一致性：

维护开发人员的工具以通知其他人。这包括维基，内部讨论论坛等。
有足够的中间管理可用。没有人能够意识到一切，但是一个人意识到他所处的一切都是有意义的。这样，用户管理组可以与安全组同步，安全组可以与内容管理组同步。这个中层管理人员的任务是充分了解所有事情，不需要知道每一个细节，只需要将知识传递到应有的位置。
根据您的需要添加级别，但在每个级别都应该有一个人在查找每个人正在或多或少地做同样的事情。如果两个小组以完全不同的方式做事，他将负责发出警报。
保持良好的信息流。拥有标准很重要，但允许人们真正知道他们退出更好并确保他们使用它们，通过代码修订和每周会议是完全需要的，如果你想继续做好事情。

我知道很多人不喜欢“管理”。他们认为这是一个无能为力的额外层。嗯，那不是真的。管理有助于解决类似这样的问题。帮助沟通大型团队并对发生的事情有一个大致的看法...有很多“技术”来定义如何做事的标准......当没有人类时，所有技术都会失败确保人们了解并遵守这些标准。

Answer 3

使用命名约定可以避免命名空间冲突问题。补充阅读：

简而言之：这取决于你的系统是如何构建的，但假设一切都是由模块组成的，那么按如下方式命名你的CSS标识符（或JS ID等）： SiteName-ModuleName-Function

如果您愿意使用您的应用程序语言（例如PHP）来干预CSS / JS代码，那么可以使用“任意”命名，通过为每个模块分配动态生成的数字ID并附加该ID到客户端语言对象的标识符。例如：

# PHP script
class module_articles {
    public function __construct() {
        $this->GUI = new view;
    }
    public function display_articles() {
        // The CSS file is rendered first by the PHP engine and
        // the identifiers name is constructed with the $this->GUI->id property.
        $this->GUI->load_css('path/to/file.css');
    }
}

class view {
    private static $instance_number = 0;
    public $id;

    public function __construct() {
        $this->id = ++ self :: $instance_number;
    }
    public function load_css($path) {
        // $id can also be the CSS file path (slashes replaced with underscore)
        // or the module name itself (e.g. module_articles)
        $id = $this->id;
        include $path;
    }
}

最终，CSS文件应该是这样的：

/* CSS of module_articles */

<?php echo $id ?>author_name { /*...*/ }
<?php echo $id ?>article_date { /*...*/ }

注意：该文件应包含在PHP的 include 关键字中！请稍后使用Output Buffering输出。

Answer 4

对于像Shaun Inman的CSScaffold这样的CSS框架，还有很多话要说。它允许您细分样式表，定义常量，轻松处理本地上下文等。它不能解决您的问题，但它可以是一个很大的帮助。

在Javascript方面，可以与本地上下文一起使用，尽管我很少遇到问题。

HTML元素的命名绝对是棘手的，但HTML 5应该有所帮助（需要更少的id和类），并且如前所述，预编译可能是另一种选择。

Answer 5

根据我的经验，我使用了几个单页网络应用程序项目

你的差异化团队应该坐下来设置一些简单的css约定

例如

MOD-search.css

.mod-search .title { }
.mod-search .text { }

MOD-news.css

.mod-news .title { }
.mod-news .text { }

在生产中使用你的收藏前端将所有资源整合到一个

中

也对js做同样的事情，实际上js比css更容易管理

确保每个模块都包含在自己的闭包中

我使用YUI作为例子

MOD-search.js

(function(){
   var node = Y.Node.create('<div/>').addClass('mod-search'); 
   // hook your event to this module node only
   node.delegate('click', handleSearch, 'button.search');
}());

mod-news.js

(function(){
   var node = Y.Node.create('<div/>').addClass('mod-news'); 
   // hook your event to this module node only
   node.delegate('click', handleViewNews, 'a.view-news'); 
}());

all-in-one.js.php

//
// php set content type text/javascript
//
YUI().use('node', 'event', function(Y){
   // php include mod-new.js
   // php include mod-search.js
});

HTML

<html>
    <head>
        <link href='all-in-one.css.php' rel='stylesheet' />
    </head>
    <body>
        <script src='all-in-one.js.php' ></script>
    </body>
</html>

Answer 6

如果你真的想知道，只需打开萤火虫，然后在facebook网站上浏览。

30秒后你会发现他们很少通过ID将css应用于div;而是使用很多点类符号。

一旦沿着这条路走下去，将开发组分成功能就容易多了。您可以使用一个核心组来负责使用ID的主“shell”。你强迫其他人使用点类。

您可以通过为每个组提供一个前缀来进一步限制这一点。

Answer 7

某些应用程序使用用作代理的门户网站服务器。它位于所有这些Web /应用程序服务器的前面。门户网站服务器获取HTML这些服务器的数据/源，然后为标签添加前缀/后缀，使其唯一。

在某种程度上，你是对的，有一个组件可以处理这些事情。

Answer 8

我公司经营商业网络应用程序。

我们大多数时候都使用带有ADF或PHP前端的SOA Architectre，所以命名的方式并不重要，因为大多数HTML都是从组件中呈现的（它降低了你在免费HTML中的自由度，但是它发展得更快。）

此外，我们的团队不是按主题组织的，它们被放在不同的技术领域，如数据库，GUI或性能。

最大的优点是，您可以在不同的应用程序中重用某些Web服务，而无需联系原始开发人员。

Answer 9

当多个团队开发UI时，应记录UI约定。

最好你们应该让同一个团队为所有组件编写/设计UI，然后根据需要拆分其他层。

Answer 10

这不是应该在飞行中发生的事情，它在公司结构中被烘焙。不知道Facebook或任何其他特定网站/公司如何做到这一点，但它可以像维护单个数据库表一样简单。像：

project_namespace

ID
命名空间
目录

所以，你已经拥有了你的核心应用程序（1，'核心'，'/ htdocs / core'）。可能有一个PM或高级负责人，以及一些猴子来创建＆amp;维护它 - 如果人力资源部门尚未管理这种关系，那么这是一个额外的数据库表，但这与此无关。每个命名空间都需要一个通用结构，./css用于CSS文件，./模板用于HTML模板，./ js，。/ images等。同样，可以有一个db表，但与此示例无关。添加任意数量的其他团队 - 搜索（2，'搜索'，'/ htdocs /搜索'），帐户（3，'用户'，'/ htdocs /用户'），网络服务人员（4，'服务'， '/ htdocs / services /'）等等。每个值都是独一无二的，我只是这样做，所以请忽略缺乏细节。

现在你已经拥有了构建过程 - 一个脚本或一系列脚本，可以从源代码控制中获取所有内容，运行CSS和JS缩小器，并且通常将所有不同的部分编译到一个网站中。它从db表中加载名称空间，并将它们（或只是唯一的ID）预先添加到每个相关的CSS规则，HTML元素ID，Javascript类或任何需要的内容中。 “核心”命名空间可能有一些特殊的规则，允许其他命名空间调用它，类似于一个元API（再次与示例无关，但是很现实）。

至少这是它的要点，但它并不一定涉及我刚才提到的任何事情。对于一些团队来说，这可能只是一个电子邮件提醒“FTP你的变化在这里，但最好不要覆盖我的东西”，而对于其他人来说，这是一个3环的规则绑定器，用严格的装配线实现，连接到任意数量的错误跟踪器和代码审查工具，自动执行单元测试和处理makefile以及检查权限等等。我猜Facebook更倾向于后者。

长话短说：信息组织和构建流程来维护它。

所以是的，每个人都可以（并且应该）知道其他人正在命名他们的div标签＆amp;由于这个不祥的MCP外观实体维护规则并分发名称，JS功能和其他一切都很重要。使用正确的流程和工具，您永远不会不知道。

模块化Web应用程序

10 个答案: