问模块化web应用程序

EN

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作为它们的值(主页，没有登录)，但这可能是框架出于某种原因自动生成这些值的结果。我曾经为helpers编写了一些代码(用于ASP.NET MVC)，以便在应用程序范围内生成唯一的I(我想完全自动且透明地为我绑定带有I标签的复选框)。另一种情况是，有状态事件驱动框架(如ASP.NET WebForms)将生成的惟一ID作为支持其操作的要求。每个控件都必须有一些唯一的ID，这样才能在服务器端知道哪个元素在页面上引发了事件。此外，当您将元素拖放到表单中时，一些WYSIWYG编辑器会向元素添加自动ID。

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

根据我的经验，无论你如何努力标准化所有的东西，对于大团队来说，每个人都以同样的方式做同样的事情几乎是不可能的。

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

我们使用几种技术来维护管理层的一致性：

• 维护开发人员通知其他人的工具。这包括维基、内部论坛等等，
• 有足够的中层管理人员可用。没有人能意识到一切，但对一个人来说，意识到他所处的水平的一切是有意义的。这样，用户管理组可以与安全组同步，安全组可以与内容管理组同步。这个中层管理人员的任务是对每件事都有足够的了解，他们不需要知道每一个细节，只要足够把它应该在哪里的知识传递给它就行了。
• 按你认为合适的方式添加级别，但在每个级别中都应该有一个人查看每个人或多或少都在做同样的事情。他将负责在两个团队以完全不同的方式做事情时发出警报。
• 保持良好的信息流。有标准很重要，但让人们真正知道他们退出了更好，并确保他们使用它们，通过代码修订和每周会议是完全必要的，如果你想继续做正确的事情。

我知道很多人不喜欢“管理”。他们认为这是额外的一层，什么也不做。好吧，那不是真的。管理有助于解决这样的问题。帮助与大型团队沟通，并对正在发生的事情有一个大致的看法……有很多“技术”来定义如何做事情的标准……当没有人员确保人们遵循、了解和遵循这些标准时，所有这些技术都会失败。

命名空间冲突问题可以通过使用命名约定来避免。其他阅读：

• CSS Practice: Pseudo-Namespaces in Complex Projects
• CSS Namespaces Support - Functional and Design Specification

简而言之:这取决于你的系统是如何构建的，但假设所有东西都是由模块组成的，然后给你的CSS标识符(或JS等)命名。如下: 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输出它。