将小的 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

将您的javascript 分成合理的组。您的网站可能有一个管理部分，admin.js 也是如此。

还值得注意的是，大多数浏览器只会下载一次javascript 文件，然后将其缓存。您说您的代码不会经常更改，因此您可能会发现将它们全部放在一个文件中实际上并没有太大影响。

Answer 2

说实话，这只会降低你的表现。如果您的用户在网站上停留很长时间，那么一个文件可以减少代码中的一些混乱。但是，如果用户只访问几个页面，单个文件只是额外的带宽负担。有一种可能，您的大多数用户甚至可能不需要超过一半的 js。

另外，这些额外条件并不能真正帮助任何人。所以，我想说，不要使用单个文件选项。

Answer 3

假设您有 page1、page2、page3 等页面。

然后您的core.js 将包含所有页面的所有代码，然后只需初始化您要使用的代码

var page1= (function () {
              var Init = function (){
              //write the codes used by page 1
              };
              return {
                Initialize: function () {
                  Init();
                 }
              };
            })();

var page2= (function () {
              var Init = function (){
              //write the codes used by page 2
              };
              return {
                Initialize: function () {
                  Init();
                 }
              };
            })();
var page3= (function () {......});

var page = path.split("/").pop(); 
var path = window.location.pathname;

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

if (page_name == 'pg1'){
     page1.Initialize();
}

if (page_name == 'pg2' || 'pg3'){
     page2.Initialize();
     page3.Initialize();
}

if (page_name == 'pg4' ){
     page4.Initialize();
}

Answer 4

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

if(selector) {
 //run code
}

仅当存在特定选择器时才会运行块内的代码。这样您就不必费心获取页面名称、拆分和切片字符串等所有麻烦（这也容易出错）。

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

function bar (text) {
  alert(text)
}

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

这种方式bar只有在存在id为#foo的节点时才会被调用。