Last active
August 29, 2015 14:17
-
-
Save leifoolsen/069f588b668c735f7405 to your computer and use it in GitHub Desktop.
Various Namespacing strategies in JavaScript
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Classic Module Pattern | |
// See e.g: https://javascriptweblog.wordpress.com/2010/12/07/namespacing-in-javascript/ | |
// http://www.adequatelygood.com/JavaScript-Module-Pattern-In-Depth.html | |
var V0 = (function() { | |
'use strict'; | |
var self = this, | |
i = 0, | |
privateFunction = function () { | |
console.log("V0.privateFunction() count, this, self: " + V0.count()); | |
console.log(this); // undefined | |
console.log(self); // undefined | |
}; | |
function priviligedFunction() { | |
console.log("V0.priviligedFunction() count, this, self: " + V0.count()); | |
console.log(this); // undefined | |
console.log(self); // undefined | |
}; | |
return { | |
publicFunction: function() { | |
console.log("V0.publicFunction() count, this, self: " + this.count()); | |
console.log(this); // public scope | |
console.log(self); // undefined | |
privateFunction(); | |
priviligedFunction(); | |
}, | |
count: function() { | |
return ++i; | |
} | |
}; | |
})(); | |
// Dynamic Namespacing / Augmentation | |
// See e.g: https://javascriptweblog.wordpress.com/2010/12/07/namespacing-in-javascript/ | |
// http://www.adequatelygood.com/JavaScript-Module-Pattern-In-Depth.html | |
var V1 = {}; | |
(function(self) { | |
'use strict'; | |
var i = 0, | |
privateFunction = function () { | |
console.log("V1.privateFunction() count, this, self: " + self.count()); | |
console.log(this); // undefined | |
console.log(self); // public scope | |
}; | |
function priviligedFunction() { | |
console.log("V1.priviligedFunction() count, this, self: " + self.count()); | |
console.log(this); // undefined | |
console.log(self); // public scope | |
}; | |
self.publicFunction = function() { | |
console.log("V1.publicFunction() count, this, self: " + this.count()); | |
console.log(this); // public scope | |
console.log(self); // public scope | |
privateFunction(); | |
priviligedFunction(); | |
}; | |
self.count = function() { | |
return ++i; | |
} | |
return self; | |
})(V1); | |
// Use 'this' as a Namespace Proxy | |
// See e.g: http://www.sitepoint.com/my-favorite-javascript-design-pattern/ | |
// http://www.sitepoint.com/the-anatomy-of-a-javascript-design-pattern/ | |
// http://www.adequatelygood.com/JavaScript-Module-Pattern-In-Depth.html | |
function V2(){}; | |
(function() { | |
'use strict'; | |
var self = this, | |
i = 0, | |
privateFunction = function () { | |
console.log("V2.privateFunction() count, this, self: " + self.count()); | |
console.log(this); // undefined | |
console.log(self); // public scope | |
}; | |
function priviligedFunction() { | |
console.log("V2.priviligedFunction() count, this, self: " + self.count()); | |
console.log(this); // undefined | |
console.log(self); // public scope | |
}; | |
this.publicFunction = function() { | |
console.log("V2.publicFunction() count, this, self: " + this.count()); | |
console.log(this); // public scope | |
console.log(self); // public scope | |
privateFunction(); | |
priviligedFunction(); | |
}; | |
this.count = function() { | |
return ++i; | |
} | |
return this; | |
}).apply(V2); | |
(function(){ | |
console.log("\nV0:"); | |
V0.publicFunction(); | |
console.log("\nV1:"); | |
V1.publicFunction(); | |
console.log("\nV2:"); | |
V2.publicFunction(); | |
}()); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment