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

Question

I want to tidy up the js-code used on my php-website to increase the loading speed. For the moment i include in every website the required js-file. My plan is to merge all js-files into one big one. Not every page uses every js-code, so i started something but don't know if this makes any sense.

I have already read the article One JS File for Multiple Pages but the method of Paul Irish is way to complicated for me (for the moment) as a beginner.

This is my approach: I create the file core.js and call it on every website like..

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

In core.js i first get the name of the corresponding page.

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

Then i check which site requires which js-script (pseudo-code).

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
}
...
...

This means a lot of work for me, because i have a lot of js, so i wanted to ask first if this is a good solution to tidy up.

By the way: The js code i place on my website doesn't change often.

Thank you

Misch

Answer 1

Split your javascript into sensible groups. You may have an admin section to your site, so have admin.js .

It's also worth noting that most browsers will only download the javascript file once and then cache it. You said that your code does not change very often so you may find that putting it all in one file doesn't actually have that much of an affect.

Answer 2

Lets say you have pages like page1, page2, page3 etc.

Then your core.js will include all the codes of all the pages and then just initialize the code which you want to use

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

A solution for your problem could be something like:

if(selector) {
 //run code
}

This runs the code inside the block only if a particular selector exists. This way you don't have to go through all the trouble of getting the name of the page, splitting and slicing the string etc (this is also prone to errors).

So let's say you want to add some innerHTML on some node it will look something like this:

function bar (text) {
  alert(text)
}

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

This way bar is only called when a node with id #foo exists.

Answer 4

To be honest, this is just going to slow down your performance. If your users stay a long time on the website, then one single file reduces a bit of clutter in your code. But, if the user is visiting only a few pages, single file is just extra burden on bandwidth. There is a possibility, most of your users might not even need more than half of your js.

Plus, those extra conditions aren't really helping anyone. So, I would say, don't use single file option.