以 HTML 格式导入的 CSS 和 JS 文件组？

Question

我有一组 CSS 导入，如下所示：

<link rel="stylesheet" href="/css/reset.css"/>
<link rel="stylesheet" href="/css/visualize.css"/>
<link rel="stylesheet" href="/css/datatables.css"/>

还有一些 JavaScript 代码导入如下：

<script src="/js/excanvas.js"></script>
<script src="/js/jquery.js"></script>
<script src="/js/jquery.livesearch.js"></script>
<script src="/js/jquery.visualize.js"></script>

是否可以将所有 CSS 导入行放入一个文件，即cssImports.css，并将所有 JS 导入行放入一个文件，即jsImports.js。因此，当我想导入 CSS 和 JS 组文件时，我会写如下内容：

<link rel="stylesheet" href="/css/cssImports.css"/>
<script src="/js/jsImports.js"></script>

所以上面列出的所有文件都将被导入？

PS：我不想写任何属于网络服务器特定的代码。

Answer 1

是的，只需复制所有代码并按照您希望它运行的顺序放入一个新文件中。

我知道有一些 javascript 库可以为您做到这一点，但我没有使用它们的经验。我认为 Yahoo 编译器/YUI 有一个。

Answer 2

对于 CSS：

<style>
    @import url('/css/styles.css');
</style>

对于 js，你可以尝试类似的东西

document.write("<script type='text/javascript' src='otherScript.js'></script>");

但我看不出有这样做的理由...

Answer 3

Javascript 导入：没有。 CSS 导入：是的，但是 you shouldn't 因为它破坏了样式表的并行下载。

最好的办法是使用本地构建脚本（例如 HTML5 Boilerplate 中包含的 Ant 脚本）在将样式表和脚本上传到服务器之前连接它们，然后链接到 HTML 中的“主”资源：

<link rel="stylesheet" href="/css/master.css">
<script src="/js/master.js"></script>

有一个tutorial on using the Ant script。

Answer 4

您可以像这样导入 CSS：

创建一个新的 CSS cssImports.css 并添加行

@import url('/css/reset.css');
@import url('/css/visualize.css');
@import url('/css/datatables.css');

并在您的主页中将其关联为：

<link rel="stylesheet" href="/css/cssImports.css"/>

对于 Javascript 导入不起作用。但是您可以创建一个单独的 JS 文件，并一个接一个地包含每个文件的 javascript 代码。但这不推荐。每个js文件最好有单独的<script>标签。

Answer 5

我不建议这样做，因为性能问题，但如果你想要这种方式，你可以这样做：

对于 CSS 是的，它是可能的，在 cssImports.css 你可以放：

@import url(/css/reset.css);
@import url(/css/visualize.css);
@import url(/css/datatables.css);

但是对于 JS，我认为没有 CSS 那么多，但是您可以从一个 JS 文件（例如 jsImports.js）执行此操作（添加 JS 文件），方法是编写代码创建脚本元素并将此元素添加到页面，像这样：

var jsE = document.createElement('script');
var url = 'JS LINK HERE';
jsE.setAttribute('type', 'text/javascript');
jsE.setAttribute('src', url);
document.getElementsByTagName('head').item(0).appendChild(jsE);

对你想要放置的每个 JS 链接执行此操作，我有想法，使用 Arracy 包含这样的 JS 链接：

var jsLinks = new Array(
"/js/excanvas.js",
"/js/jquery.js",
"/js/jquery.livesearch.js",
"/js/jquery.visualize.js"
);

然后循环每次读取一个链接并将其放入，例如：

for (i = 0; i < jsLinks.length; i++)
{
    var jsE = document.createElement('script');
    var url = jsLinks[i];
    jsE.setAttribute('type', 'text/javascript');
    jsE.setAttribute('src', url);
    document.getElementsByTagName('head').item(0).appendChild(jsE);
}

我没有测试我的代码，但我希望我的想法能得到很好的解释。

最好的

编辑 1：是的，您可以为 JS 使用 Gatekeeper 解决方案（非常简单），但它使用“写”但“对我来说”我不喜欢这样 :)

Answer 6

使用 LazyLoad！ https://github.com/rgrove/lazyload/ 这是一个非常小的 js（小于 1kb），可以为您处理资源加载。

下载包并保存在您的 js 文件夹中。那么你可能想要这样做：

<script src="js/lazyload-min.js"></script>

那么对于 javascript 文件：

 <script>
LazyLoad.js(["/js/excanvas.js", "/js/jquery.js", "/js/jquery.livesearch.js", "/js/jquery.visualize.js"], function () {

      alert('all js files have been loaded');


    });
</script>

CSS：

<script>
LazyLoad.css(["/css/reset.css", "/css/visualize.css", "/css/datatables.css"], function () {

      alert('all css files have been loaded');

    });
</script>

这也将提高页面的性能，启用并行 css 和 js 加载（后者仅适用于 firefox Opera）。

Answer 7

现在可以使用HTML Imports 中的W3C draft 如下所示

<link rel="import" href="import.html">

import.html

<link rel="stylesheet" href="/css/reset.css"/>
<link rel="stylesheet" href="/css/visualize.css"/>
<link rel="stylesheet" href="/css/datatables.css"/>
<script src="/js/excanvas.js"></script>
<script src="/js/jquery.js"></script>
<script src="/js/jquery.livesearch.js"></script>
<script src="/js/jquery.visualize.js"></script>

目前只有 Chrome、Android 和 Opera support HTML 原生导入，但 WebComponents 提供了一个非常成熟的 polyfill 脚本，称为 webcomponents-lite.js 以支持所有现代浏览器