将几个脚本和css标记分解为一个文件

时间:2014-06-10 07:56:37

标签: javascript css html5

我有几个页面需要相同的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,我可能会对特定页面有所了解。等等。但是,由于我不会进入的原因,我不能使用任何服务器方面的东西来帮助我们。

3 个答案:

答案 0 :(得分:0)

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

Loading Scripts with jQuery

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

答案 1 :(得分:0)

使用预处理器(例如树)并在构建时运行它(即在将其输出到服务器的静态文件上载之前)而不是运行时(这需要服务器端解决方案)。

答案 2 :(得分:0)

我想我可以创建自己的大型JS文件,其中包含所有需要的JS文件。然后用所有需要的CSS做同样的事情。至少这种方式只有2个文件。

如果加载1个大型JS文件而不是10个较小的JS文件,那么只有潜在的缺点是因为它并不平行。