tms / backbone class module pattern
seems to combine prototypes with revealing module pattern See https://github.com/jimmydo/js-toolbox/blob/master/toolbox.js Main page is https://github.com/jimmydo/js-toolbox I commented on his blog post http://blog.usefunnel.com/2011/03/js-inheritance-with-backbone/
by Andy Bulka
HTML
<script src="https://rawgithub.com/jimmydo/js-toolbox/master/toolbox.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
<hr>
<div class="log">
<a href="#" id="clearlog">Clear</a>
<div id="log"></div>
</div>
<hr>
JavaScript
/**
* Created by andy on 26/02/2014.
*/
$(function() {
var Toolbox = window.Toolbox; // Can't seem to get to Toolbox normally?
console.log('Toolbox in main.js after .ready', Toolbox, window.Toolbox);
// ------------LOG-----------------
function logger(view) {
var $view = view;
if ($view == undefined)
$view = $('#log');
function msg(s) {
if (s == '')
$('<hr/>').append(s).appendTo($view);
else
$('<div/>').append(s).appendTo($view);
}
function multi_param_msg() {
var s = '';
for (var arg = 0; arg < arguments.length; ++ arg)
s += ' ' + arguments[arg];
msg(s);
}
$('#clearlog').click(function() { $view.empty(); });
return {
msg:msg,
mmsg:multi_param_msg
}
}
var l = logger();
// --------------------------------
// Switch to n6 mode if necessary
if (Toolbox == undefined) {
console.log('Toolbox library not detected, switching to n6 mode');
// we don't have Toolbox library, we are using n6 library
// so fake Toolbox in terms of n6
var Toolbox = {};
Toolbox.Base = n6.Base; // note Toolbox.Base.extend IS SAME AS n6.extend
}
var Class1 = (function () {
'use strict';
var instance; // this is private, even to subclasses. subclasses may define their own.
var a; // this is private, even to subclasses
function somePrivate() { // this is private, even to subclasses
l.msg('shouldnt be able to call this from outside');
}
return Toolbox.Base.extend({
// Anything here is public
config : {},
constructor : function (_a, _b, config) {
instance = this;
a = _a;
// this.config = Toolbox.Base.extend(config || {}, {
// b : _b
// });
},
render : function (target) {
this.view = target;
//this.view.html(''); // clear the view
l.msg('Class 1 render');
...