javascript - 将小 js 文件合并为一个大文件

Question

我想整理我的 php 网站上使用的 js 代码以提高加载速度。目前，我在每个网站中都包含了所需的 js 文件。 我的计划是将所有 js 文件合并为一个大文件。并非每个页面都使用所有 js 代码，因此我开始了一些操作，但不知道这是否有意义。

我已经读过这篇文章One JS File for Multiple Pages但是 Paul Irish 的方法对于我(目前)作为初学者来说太复杂了。

这是我的方法: 我创建文件 core.js 并在每个网站上调用它，例如..

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

在 core.js 中，我首先获取相应页面的名称。

var path = window.location.pathname;
var page = path.split("/").pop(); 
var page_name = page.slice(0, -4); 

然后我检查哪个网站需要哪个js脚本(伪代码)。

if (page_name == 'xyz'){
execute this code which is only used on this site
}

if (page_name == 'abc' || 'xyz' || 'def'){
execute another code which is used on multiple sites
}

if (page_name == 'ghi' || 'jkl' || 'mno' || 'xyz'){
include jquery for multiple sites
}
...
...

这对我来说意味着很多工作，因为我有很多js，所以我想先问一下这是否是一个很好的整理解决方案。

顺便说一句:我在网站上放置的 js 代码不会经常更改。

谢谢

米施

Answer 1

您的问题的解决方案可能类似于:

if(selector) {
 //run code
}

仅当特定选择器存在时，才会运行 block 内的代码。这样你就不必经历获取页面名称、分割和切片字符串等所有麻烦(这也容易出错)。

假设您想在某个节点上添加一些innerHTML，它看起来像这样:

function bar (text) {
  alert(text)
}

if(document.getElementById('#foo')) {
   bar('#foo exists!')
}

这样，只有当 id 为 #foo 的节点存在时，才会调用 bar。