We currently use the following pattern on many pages, specially for reusable code:
Module Patterns
Use a module pattern to allow reusable code: https://github.com/umdjs/umd
jQuery Module pattern
| Code Block | ||
|---|---|---|
| ||
(function(moduleName,$,window,undefined){
…
}( window.moduleName = window.moduleName || {}, jQuery, window, undefined )); |
...
Frequently used reusable code goes into 'static function' in the kala namespace here: https://github.com/kalamuna/kalastatic/blob/master/src/js/kala_utils.js
ES6
New version of JavaScript is available in Node.js: http://es6-features.org
To use ES6 in the client-side, use http://browserify.org/ or https://webpack.js.org/ .
OOP
The following example is ES5, ES6 has Classes. http://es6-features.org/#ClassDefinition
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:
...