Question

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

我已经阅读了文章One JS File for Multiple Pages，但保罗爱尔兰语的方法让我（暂时）作为初学者变得复杂。

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

#include "msi.h"

#pragma comment (lib, "msi")

...
TCHAR Path[MAX_PATH];
Path[0] = '\0';            
TCHAR pszComponentCode[MAX_FEATURE_CHARS+1];
TCHAR pszProductCode[MAX_FEATURE_CHARS+1];
pszComponentCode[0] = _T('\0');
pszProductCode[0] = _T('\0');

if ( MsiGetShortcutTarget(pszLinkPathName, pszProductCode, NULL, pszComponentCode) == ERROR_SUCCESS)
{
    DWORD dw = MAX_PATH;
    UINT ret = MsiGetComponentPath(pszProductCode, pszComponentCode, Path, &dw);
    //Path now contains path to EXE
}
else
{
   //process regular LNK
}

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

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

然后我检查哪个站点需要哪个js-script（伪代码）。

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

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

顺便说一下：我在网站上放置的js代码并不经常更改。

谢谢

米施

Answer 1

将您的javascript拆分为合理的群组。您的网站可能有管理部分，因此请admin.js。

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

Answer 2

假设您有第1页，第2页，第3页等页面。

然后您的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 3

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

if(selector) {
 //run code
}

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

因此，假设您想在某个节点上添加一些innerHTML，它将如下所示：

function bar (text) {
  alert(text)
}

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

这种方式bar仅在存在标识为#foo的节点时调用。

Answer 4

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

另外，这些额外条件对任何人都没有帮助。所以，我想说，不要使用单个文件选项。

将小js文件合并为一个更大的文件

4 个答案: