...
Within the module, its sometimes desirable to work with object oriented code. This helps readability and maintainability, but isn't required.
It also allows you to call methods from within the Class' scope using the 'this' keyword (eg. this.doSomething()) And the following pattern seems to work well:
(function(moduleName,$,window,undefined) {
kalaStatic.About = function() {
this.doSomething();
}
/*
* Assigning p to the Modules prototype just makes for less
* typing. It results in smaller files and, so long as we
* keep to one module per file, there should be no problem.
*/
var p = kalaStatic.About.prototype;
p.contructor = kalaStatic.About; // explicitly assing the kalaStatic.About function, as the kalaStatic.About.prototype's constructor
p.doSomething = function(){
console.log('doing that thing');
}
p.doAnotherThing = function(){
console.log('doing something else');
}
/*
* We're putting our JS at the bottom of the HTML these days
* so $(document).ready isn't strictly necessary, but maybe
* best practice.
*/
$(document).ready(function() {
/*
* For js that we only want to instantiate on certain pages,
* we make sure the body tag has the corresponding class name
* This is a kalastatic html.html convention:
* <body class="{% if page_slug %}{{page_slug}}{% else %}{{title|slug}}{% endif %}">
* In this case we're assuming the src/about.md has page_slug
* defined in the frontmatter as 'page-about'.
*/
if( $("body").hasClass('page-about') ){
kalaStatic.about = new kalaStatic.About();
kalastatic.about.doAnotherThing();
}
});
}( window.kalaStatic = window.kalaStatic || {}, jQuery, window, undefined ));...