javascript - 将多个脚本和 css 标签分解为一个文件

标签 javascript css html

我有几个页面需要同一组 JS 库(jQuery、d3 和其他一些东西)和 CSS。我真的很想把这个重复的代码分解到一个地方。

如何在服务器端语言的情况下分解出 JS 和 CSS 的所有“库”?我假设有一个 JS 解决方案,比如创建一个包含所有内容的“boilerplate.js”文件,然后只获取该脚本。

<head>
  <!-- not page specific, factor this out. -->
      <!-- CSS library stylesheets -->
      <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
      <link rel="stylesheet" href="../helpers/bootstrap-multiselect.css" type="text/css">

      <!-- JS libraries -->
      <!-- jQuery -->
      <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
      <!-- D3 -->
      <script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.2/d3.min.js" charset="utf-8"></script>
      <!-- Queue JS for async stuff -->
      <script src="//cdnjs.cloudflare.com/ajax/libs/queue-async/1.0.7/queue.min.js"></script>
      <!-- crossfilter -->
      <script src="//cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.1/crossfilter.min.js" charset="utf-8"></script>
      <!-- underscore -->
      <script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js" charset="utf-8"></script>
      <!-- bootstrap -->
      <script src='//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js'>  </script>

   <!-- Page specific, do not factor this out -->
   <link rel="stylesheet" href="/myStyleSheet.css" type="text/css">
   <script>
     // Do some code that depends on all the above libraries
   </script>
</head>

如果我使用的是 PHP,我可以简单地执行一个 require()。如果我使用 Ruby on Rails,我可以为特定页面提供一部分。等等。但是,由于我不会深入探讨的原因,我不能使用任何服务器端的东西来帮助我们解决这个问题。

最佳答案

您可以使用 jQuery 添加脚本并等待它们加载:

Loading Scripts with jQuery

您可以为所有需要的脚本加载一个包含 $.getScript() 的 .js 文件。

关于javascript - 将多个脚本和 css 标签分解为一个文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24135737/

相关文章:

html - 在 Accordion 中添加一个表单

javascript - 单击最后一张幻灯片关闭漂亮的照片幻灯片

javascript - 年龄计算功能

javascript - 事件冒泡实验(你知道div和p标签不能嵌套吗?)

javascript - 如何使用表单创建弹出窗口?

html - 文本对齐图像不工作的CSS

javascript - 在此函数中设置一个新行

html - Bootstrap4 导航链接事件顶部边框样式

javascript - 具有条件插值的管道

Javascript for ... in 循环与 Object.prototype 和 Array.prototype 属性