以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：我不想編寫任何特定於Web服務器的代碼。

Answer 1

Javascript導入：否。 CSS導入：是的，但是您不應該這樣做，因為它會中斷樣式表的並行下載。

最好的選擇是使用本地構建腳本（例如HTML5 Boilerplate附帶的Ant腳本）來連接樣式表和腳本，然后再將其上載到服務器，然后鏈接到HTML中的“主”資源：

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

有一個有關使用Ant腳本的教程 。

Answer 2

與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 3

對於CSS：

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

對於js，您可以嘗試類似

document.write("<script type='text/javascript' src='otherScript.js'></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

現在可以通過W3C草案中的 HTML導入進行以下操作

<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本身支持 HTML導入，但是WebComponents提供了非常成熟的polyfill腳本，稱為webcomponents-lite.js，以支持所有現代瀏覽器

Answer 6

是的，只需將所有代碼復制並按您希望運行的順序放入新文件中即可。

我知道有一些javascript庫可以為您完成此操作，但是我沒有使用它們的經驗。 我認為Yahoo編譯器/ YUI有一個。

Answer 7

由於性能問題，我不建議您這樣做，但是如果您願意，可以這樣做：

對於CSS，可以在cssImports.css中輸入：

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

但是對於JS，我認為沒有CSS那么多，但是您可以通過編寫代碼create script元素並將此元素添加到頁面中，從一個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解決方案（非常簡單），但是它使用“寫”但“對我來說”，我不喜歡這種方式:)