javascript 一组 CSS 和 JS 文件在 HTML 中导入？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7120801/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Group of CSS and JS files import at HTML?
提问by kamaci
I have a group of CSS imports as like:
我有一组 CSS 导入，如下所示：
<link rel="stylesheet" href="/css/reset.css"/>
<link rel="stylesheet" href="/css/visualize.css"/>
<link rel="stylesheet" href="/css/datatables.css"/>
and some JavaScript code imports as like:
和一些 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>
Is it possible to put all CSS import lines into a file i.e. cssImports.cssand put all JS import lines into a file i.e. jsImports.js. So when I want to import that CSS and JS group files I will write something like:
是否可以将所有 CSS 导入行放入一个文件 iecssImports.css并将所有 JS 导入行放入一个文件 ie 中jsImports.js。因此，当我想导入该 CSS 和 JS 组文件时，我将编写如下内容：
<link rel="stylesheet" href="/css/cssImports.css"/>
<script src="/js/jsImports.js"></script>
so all the files listed above will be imported?
所以上面列出的所有文件都将被导入？
PS:I don't want to write any code belongs to web server specific.
PS：我不想写任何属于网络服务器特定的代码。
采纳答案by Ahsan Rathod
You can Import CSS like this:
你可以像这样导入 CSS：
Create a new CSS cssImports.cssand add there lines
创建一个新的 CSScssImports.css并添加行
@import url('/css/reset.css');
@import url('/css/visualize.css');
@import url('/css/datatables.css');
and relate it in your homepage as:
并将其在您的主页中关联为：
<link rel="stylesheet" href="/css/cssImports.css"/>
For Javascript import doesn't work. But you can create a single JS file and include the javascript code of each file after one another. But this is not recommended. It is better to have separate <script>tag for each js file.
对于 Javascript 导入不起作用。但是你可以创建一个单独的 JS 文件，并一个接一个地包含每个文件的 javascript 代码。但不推荐这样做。<script>每个js文件最好有单独的标签。
回答by Alex
Javascript imports: no. CSS import: yes, but you shouldn'tbecause it breaks parallel downloading of stylesheets.
Javascript 导入：没有。CSS 导入：是的，但您不应该这样做，因为它会破坏样式表的并行下载。
Your best bet is to use a local build script (such as the Ant script included with the HTML5 Boilerplate) to concatenate your stylesheets and scripts before uploading them to the server, then linking to the 'master' resources in your HTML:
最好的办法是使用本地构建脚本（例如HTML5 Boilerplate 中包含的 Ant 脚本）在将样式表和脚本上传到服务器之前连接它们，然后链接到 HTML 中的“主”资源：
<link rel="stylesheet" href="/css/master.css">
<script src="/js/master.js"></script>
There is a tutorial on using the Ant script.
有一个关于使用 Ant 脚本的教程。
回答by Francesco Frapporti
Go with LazyLoad! https://github.com/rgrove/lazyload/It's a very small js (less than 1kb) that takes care of resource loading for you.
使用 LazyLoad！https://github.com/rgrove/lazyload/这是一个非常小的 js（小于 1kb），负责为您加载资源。
Download the package and save on your js folder. Then you would probably want to do this:
下载包并保存在您的 js 文件夹中。那么你可能想要这样做：
<script src="js/lazyload-min.js"></script>
Then for javascript files:
然后对于 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:
css：
<script>
LazyLoad.css(["/css/reset.css", "/css/visualize.css", "/css/datatables.css"], function () {
alert('all css files have been loaded');
});
</script>
This will also boost the performance of your page, enabling parallel css and js loading (the latter on firefox opera only).
这也将提高页面的性能，启用并行 css 和 js 加载（后者仅在 Firefox Opera 上）。
回答by Gatekeeper
for css:
对于 CSS：
<style>
@import url('/css/styles.css');
</style>
for js you could try something like
对于 js 你可以尝试类似的东西
document.write("<script type='text/javascript' src='otherScript.js'></script>");
but i dont see a reason to do either of theese...
但我看不出有理由做这两个...
回答by Al-Mothafar
I'm not recommend do that because performance issue, but if you want the way, you can do that:
我不建议这样做，因为性能问题，但如果你想要这样，你可以这样做：
For CSS yes its possible, in cssImports.css you can put:
对于 CSS 是的，它可能，在 cssImports.css 中，您可以放置：
@import url(/css/reset.css);
@import url(/css/visualize.css);
@import url(/css/datatables.css);
But for JS, I think no way as much as CSS, but you can do this (adding JS files) from one JS file (ex jsImports.js), by write code create script element and add this element to page, like that :
但是对于 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);
Do this for each link of JS that you want to put, I have and idea, using Arracy contains JS links like this:
为您想要放置的每个 JS 链接执行此操作，我有和想法，使用 Arracy 包含这样的 JS 链接：
var jsLinks = new Array(
"/js/excanvas.js",
"/js/jquery.js",
"/js/jquery.livesearch.js",
"/js/jquery.visualize.js"
);
then a loop read a link each time and put this, like :
然后循环每次读取一个链接并将其放入，例如：
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);
}
I didn't test my code, But I hope my idea is explained well.
我没有测试我的代码，但我希望我的想法得到很好的解释。
Best
最好的
Edit 1: yes you can use Gatekeeper solution for JS (Very Simple), but it use "write" but "for me" I don't like that way :)
编辑 1：是的，您可以为 JS 使用 Gatekeeper 解决方案（非常简单），但它使用“写”但“对我而言”我不喜欢那样:)
回答by Alistair Laing
Yes just copy all the code and place in into a new file in the order than you would like it to run.
是的，只需将所有代码复制并按照您希望它运行的顺序放入一个新文件中。
I know there are some javascript libraries that can do this for you but I dont have an experience of using them. I think Yahoo compiler/ YUI has one.
我知道有一些 javascript 库可以为您做到这一点，但我没有使用它们的经验。我认为雅虎编译器/ YUI 有一个。
回答by Lightbeard
This is now possible as follows with HTML Importswhich are in W3C draft
<link rel="import" href="import.html">
import.html
导入.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>
At this time only Chrome, Android and Opera supportHTML Imports natively, but WebComponents provides a very mature polyfill script called webcomponents-lite.jsto support all modern browsers
目前只有 Chrome、Android 和 Opera 原生支持HTML Imports，但 WebComponents 提供了一个非常成熟的 polyfill脚本webcomponents-lite.js来支持所有现代浏览器
