我有几个页面需要相同的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,我可能会对特定页面有所了解。等等。但是,由于我不会进入的原因,我不能使用任何服务器方面的东西来帮助我们。
答案 0 :(得分:0)
答案 1 :(得分:0)
使用预处理器(例如树)并在构建时运行它(即在将其输出到服务器的静态文件上载之前)而不是运行时(这需要服务器端解决方案)。
答案 2 :(得分:0)
我想我可以创建自己的大型JS文件,其中包含所有需要的JS文件。然后用所有需要的CSS做同样的事情。至少这种方式只有2个文件。
如果加载1个大型JS文件而不是10个较小的JS文件,那么只有潜在的缺点是因为它并不平行。