javascript - 合并标题链接 css 和脚本列表

Question

我正在构建一个网站，我正在尝试确定是否有一种方法可以将特定文件组合/整合在一起，而无需将它们组合成一个巨大的文件。我正在尝试清理我的页面，例如我讨厌滚动浏览我的列表

     <!-- My plugins -->
    <script src="./assets/js/plugins/moment.min.js"></script>
    <script src="./assets/js/plugins/bootstrap-switch.js"></script>
    <script src="./assets/js/plugins/bootstrap-tagsinput.js"></script>
    <script src="./assets/js/plugins/bootstrap-selectpicker.js"></script>
    <script src="./assets/js/plugins/jasny-bootstrap.min.js"></script>
    <script src="./assets/js/plugins/nouislider.min.js"></script>
    <script src="./assets/js/plugins/bootstrap-datetimepicker.js"></script>
    <script src="./assets/js/photorevealer.js"></script>
    <script src="./assets/js/type.js"></script>

我想创建一个指针或类似的东西来做类似的事情

<link href="js_scripts.lst">

那个文件是这样的

    <script src="./assets/js/plugins/moment.min.js"></script>
    <script src="./assets/js/plugins/bootstrap-switch.js"></script>
    export js_script

这样我就可以为所有 css 创建 1 个文件，为 js 文件创建 1 个文件，为 google 字体创建 1 个文件等等。

Answer 1

制作一个文件，links.js:

function loadjscssfile(filename){
    var fileref=document.createElement('script') 
    fileref.setAttribute("type","text/javascript") 
    fileref.setAttribute("src", filename) 
    if (typeof fileref!="undefined"){
      document.getElementsByTagName("head")[0].appendChild(fileref)
    }
}

然后再次在 links.js 文件中为所有文件调用该函数:

loadjscssfile("./assets/js/plugins/moment.min.js");
loadjscssfile("./assets/js/plugins/bootstrap-switch.js");
loadjscssfile("./assets/js/plugins/bootstrap-tagsinput.js");
loadjscssfile("./assets/js/plugins/bootstrap-selectorpicker.js");
loadjscssfile("./assets/js/plugins/jasny-bootstrap.min.js");
loadjscssfile("./assets/js/plugins/nouislider.min.js");
loadjscssfile("./assets/js/plugins/bootstrap-datetimepicker.js");
loadjscssfile("./assets/js/photorevealer.js");
loadjscssfile("./assets/js/type.js");

然后从您的 index.html 页面加载 links.js 文件:

<script src="links.js"></script>

然后您的文件将加载!

注意:您在编码时不会看到这些链接，但如果您点击“检查”，它们就会出现在网站上。它只是在您编码时更整洁。