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

Posted 2023-03-06

【中文标题】为大型项目表示 CSS 和 JS 文件的最佳方式

【英文标题】：Best way to represent CSS & JS files for a big project

【发布时间】：2012-02-07 04:56:03

【问题描述】：

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

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

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

例如

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>pfont-weight:bold;</style>"; 
          break; 
      endswitch; 

?>

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

【参考方案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());

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

【讨论】：

这很好，但是如何制作一个脚本来只编写所需的代码（CSS 和 JS）然后将其包含在内？

只需检查文档中是否存在该元素->> if(document.getElementById(element_id))run code，否则创建一个functions.js并将所有调用内联。即：onclick/onChange 等 即：

嗯，这是个好主意，我会检查一下，非常感谢

【参考方案2】：

数据库 = 否

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

CSS/JS = 演示文稿

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

模块化

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

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

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

过早的优化 = 万恶之源

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

【参考方案3】：

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

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

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

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

【讨论】：

当我达到这个目标时，我还没有建立任何东西，我有多种选择，所以我希望专家意见和主要文件已经包含在我的计划中

@UserB 有自动构建系统可以在构建时为您的文件版本化，并通过取出任何空白并将它们全部放入一个文件来优化它们。

你能给我详细的吗？在生产环境中实现这一点

@UserB brandonsavage.net/…

请记住，浏览器缓存这些文件是有原因的。不要在此处与 HTTP 作斗争——您可能想在此处使用 filemtime()（尽管它会创建额外的统计调用）。并问自己一个问题：与编辑文件所需的时间相比，用新版本号重命名文件需要多长时间？