Use a module bundling strategy using tools like browserify or modul8
// common.js
function log(message) {
console.log((new Date()) + ': ' + message);
}
window.onerror = function(message) {
log('Unhandled error: ' + message);
}
module.exports = { log: log };
You just got rid of those ugly company names as your namespacing strategy. And you also removed that ugly boilerplate code. Here your common.js file exports an object with the log method
// Url.js
var log = require("common.js").log;
function Url(url) {
this.url = url;
}
Url.prototype.addParameter = function(name, value) {
this.url += '?' + name + '=' + value;
};
Url.prototype.ajax = function() {
log('Send ajax to: ' + this.url);
};
module.exports = { Url: Url };
You Url module explicitly requires your common file. It now has the log method.
//billing.js
var Url = require("Url.js").Url,
$ = require("jQuery");
$('#submitButton').click(function() {
var url = new Url('http://bla.com/process/billing');
var creditCardName = $('#ccName').val();
url.addParameter('name', creditCardName);
url.ajax();
}
And billing explicitly requires Url and jQuery.
// billing.html
<!DOCTYPE html>
<html>
<head>
<title>Billing</title>
</head>
<body>
Enter name on credit card: <input type="text" id="ccName" /><br><br>
<button id="submitButton">Submit Payment</button>
<script type="text/javascript" src="js/billing-bundle.js"></script>
</body>
</html>
And your billing html file loads a single precompiled billing bundle.