为大型项目表示 CSS 和 JS 文件的最佳方式

Question

为大型项目表示 CSS 文件的最佳方式是什么

我正在使用 CodeIgniter，会有 100 个视图，并且几乎其中的视图具有不同的结构，所以我在这里有很多选择，但我不知道什么是最好的，所以请帮忙

1. 为CSS制作单个文件，为JS制作单个文件
2. 为每个视图创建一个 CSS 文件，为每个视图创建一个 JS
3. 制作一个简单的数据库表来保存相关文件 每种方法

例如

id ----- method_name ---- files (I will normalize it )
1        /test/first      first.css,first.js
and so on 

或使 PHP 函数从 PHP 获取关联文件作为文本

例如

<?php
function get_assoc($view)
{
      switch($view):
          case '/test/first':
             echo "<script>alert(); </script><style>p{font-weight:bold;}</style>"; 
          break; 
      endswitch; 
}
?>

还有缓存呢？性能是一个很大的因素。 谢谢。

Answer 1

我喜欢将每个部分的重置/排版/表格/表格分开，这样我就不会迷路。不要害怕根据需要使用尽可能多的不同文件（用于开发目的）。

一旦您准备好进入生产/实时模式，从“html5boilerplate”中获取“构建工具”并将所有 css 压缩到一个文件中，对于 js 也是如此。这也将缩小您的代码并缓存您的文件。只需将未压缩的文件放在手边，以防您需要进行重大编辑

<!-- CSS -->
<link rel=stylesheet href="assets/css/reset.css" >
<link rel=stylesheet href="assets/css/typography.css" >
<link rel=stylesheet href="assets/css/tools.css" >
<link rel=stylesheet href="assets/css/tables.css" >
<link rel=stylesheet href="assets/css/forms.css" >
<link rel=stylesheet href="assets/css/plugins.css" >


<!-- Script -->
<script src="assets/js/modernizr2.0.js"></script>
<script src=https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js></script>
<script src="assets/js/plugins.js"></script>
<script src="assets/js/tools.js"></script>
<script src="assets/js/tables.js"></script>
<script src="assets/js/forms.js"></script>
<script src="assets/js/functions.js"></script>

然后我喜欢将每个 (js) 文件包装为一个对象，这同样有助于提高可读性。

示例：

(function($){

var ToolsObj = {

    init : function(){

        this.tooltip();
        this.tabs();
        this.pagination();
        this.alerts();
        this.dropdowns();
        this.lightbox();

    },
    tooltip : function(){

        //tooltip code
    },
    tabs : function(){

        //tabs code
    },
    pagination : function(){

    },
    alerts : function(){

        //alert messages code
    },
    dropdowns : function(){

        //dropdown-menu code
    },
    lightbox : function(){

        //lightbox code

    }


}


$(function(){

    ToolsObj.init();
});

 })(jQuery.noConflict());

希望这能让您对我的工作流程有所了解。 您可能还想在运行对象之前检查文档中是否存在每个元素。

Answer 2

数据库 = 否

不要为此使用数据库。显示视图所需的 CSS/JS 文件直接与源代码相关联，因此请将该信息保留在源代码中（特别是如果您使用的是 Git 或 SVN 等 SCM）。

CSS/JS = 演示文稿

由于这些文件与演示文稿/UI 相关，我建议将加载它们的“责任”委托给视图本身。控制器和模型不必“了解”任何有关显示视图所需的 CSS/JS 的信息。

模块化

将文件组织成离散的模块化单元。不要为每个视图都有一个单独的 CSS/JS 文件，除非你真的在每个视图上都有完全独立的功能。您在视图之间共享这些文件的次数越多，您的情况就会越好。

利用缓存，而不是与之抗衡

我知道每次修改文件时都重命名文件很麻烦，但这确实是一个好方法。使用缓存失效方法（如 URL?time=...）只会毫无理由地给服务器和客户端带来额外的压力。只需花两秒钟将“styles.css”文件重命名为“styles_v2.css”。以后你会感谢自己的。 （请记住，您不必为每次开发更改都重命名它——只有当它足够稳定以用于 QA/生产时）。

过早的优化 = 万恶之源

最后——也是最重要的——永远不要过早地优化！我见过太多的人一直在缩小和压缩他们的资产文件，只是在几天后对它们进行了大修。要么创建一个真正的构建过程，要么等到事情稳定后再过分担心微调。

Answer 3

您是否已经调用了页面数据库来确定应该使用哪些视图等？可能希望有一个可用于所有页面的主要 js 和 css，然后通过 DB 链接的个别页面仅由某些视图专门使用。

至于缓存...这些文件将被浏览器缓存，只要它们具有相同的请求名称。我通常使用看起来像这样的视图方法对它们进行自动版本化：

function autoversion($filename) {
    $time = filemtime($filename);
    return $filename . '?v=' . $time;
}

如果您的构建系统可以为您对这些文件进行版本控制，您将获得少量性能提升。