在已经包含其他页面的页面中包含 .js 和 .css 的最有效方法是什么？答案

【问题标题】：What's the most efficient way to include .js and .css within pages already including other pages?在已经包含其他页面的页面中包含 .js 和 .css 的最有效方法是什么？
【发布时间】：2013-04-01 02:51:21
【问题描述】：

我一直在尝试多种不同的方法来为我正在构建的网站添加 header.php 和 footer.php 文件。

我不确定最有效的地方是引用网站上不同页面所需的多个 .css 和 .js 文件。我已将包含的页面设置如下（这些页面已被简化到最低限度以说明结构的重点）：

header.php：

<html>
    <head>
        <title>Example Page 1</title>
    <link rel="stylesheet" type="text/css" href="menu_styles.css"/>
    <script type="text/javascript" src="main_menu.js"></script>
    </head>
<body>
<!------MENU CODE HERE------>

后跟任何页面 .php:

<?php
include 'header.php'
?>

<div>Page Content 1</div>
<div>Page Content 2</div>

<?php include 'footer.php' ?>

其中footer.php的最简单形式如下：

</body>
</html>

我可以看到在标头中引用 menu_styles.css 和 main_menu.js 的逻辑，因为菜单代码将始终写入其中。但是，如果我有一个单独的页面，例如，一个带有自己所需的 js/css 文件的图像滚动器，那么定义这些文件的最有效方法在哪里？我可以在主页本身内完成，还是必须在 header.php 中定义每个 .css 和 .js？这会产生一个很长的列表，对我来说似乎效率低下，因为许多页面不需要定义到这些文件的链接。

【问题讨论】：

标签： php javascript html css include

【解决方案1】：

我会做以下事情：

创建一个包含所有 CSS 文件的全局变量，以及另一个用于所有 Javascript 文件的全局变量
在您的“任何 php 文件”中，首先更改全局变量以包含正确的 CSS 文件和 JS 文件。
调用require 或include 插入您的标题，这会添加基于全局变量的CSS 文件
在你的“whatever php”文件中做任何你需要的事情
include 或 require 你的页脚文件，它根据全局变量插入所有的 JS 文件（它是 recommended 在文档末尾包含 JS 文件以防止页面加载延迟）

【讨论】：

【解决方案2】：

您可以将每个需要的 css 或 JS 的 src 添加到数组（PHP 变量）中。然后在页面末尾（关闭正文之前）添加您的和标签。

<?php
include 'header.php';
$css = array();
$js = array();
?>

<div>Page Content 1</div>
<div>Page Content 2</div>
// content and content imports may add sources to css and js arrays

// where footer.php prints <script> and <link> tags, importing needed css and js
<?php include 'footer.php' ?>
</body>
</html>

【讨论】：

这可能是解决他问题的最佳方案。当我的所有参考都在 head 标签中时，我喜欢它，但它最适合你。
在body 中包含<link> 标签并不是一个好主意，因为浏览器必须重新呈现页面。
这不是一个完美的解决方案，只是将 css 链接放在任何地方更好。
另外，它只在 HTML5 中有效，在旧版规范中无效。

【解决方案3】：

您可以为带有图像滚动条的页面使用不同的标题模板，并在该标题中包含图像滚动条 css。

您可以在页面的任何位置包含 Javascript 文件，事实上，有些人认为将它们包含在页面底部是更好的做法，因此它们会在您的 HTML 内容之后加载，因此不会延迟内容的加载。但是我相信 CSS 文件必须始终包含在 head 标签中。

【讨论】：

【解决方案4】：

标题：

<html>
    <head>
        <title>Example Page 1</title>
        <?php
        if ($css_inc != NULL) {
            foreach ($css_inc as $value) {
                echo '<link type="text/css" href="' . $value . '"></link>';
            }
        }
        if ($js_inc != NULL) {
            foreach ($js_inc as $value) {
                echo '<script type="text/javascript" src="' . $value . '"></script>';
            }
        }
        ?>
    </head>
    <body>
    <!------MENU CODE HERE------>

page.php

<?php
   $css_inc = array('style.css', '\public\css\gallery.css');
   $js_inc = array('public.js', '\public\js\jquery.js', '\public\js\jqueryui.js');
   include 'header.php'
?>

<div>Page Content 1</div>
<div>Page Content 2</div>

<?php include 'footer.php' ?>

【讨论】：