Last active
December 30, 2015 23:39
-
-
Save codeFareith/7902242 to your computer and use it in GitHub Desktop.
JSoonJS: JavaScript Object Oriented Notation. This is a simple JavaScript boilerplate. It will help you to create your own JavaScript classes, libraries, etc. and teaches you the most common conventions in JavaScript OOP/OOD.
There's a full annotated copy of the code and one without any annotations,
except information about the file, version, au…
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
/** | |
* JSoonJS - v1.0.0 - 2013-12-10 | |
* JavaScript Object Oriented Notation | |
* https://github.com/codeFareith | |
* | |
* This boilerplate will help you to create your own | |
* JavaScript classes, libraries, etc. | |
* It teaches you the most common conventions in JavaScript OOP/OOD | |
* | |
* @author Robin von den Bergen <robinvonberg@gmx.de> | |
* @copyright Copyright (c) 2013 Robin 'codeFareith' von den Bergen | |
* licensed under the MIT license | |
*/ | |
/** | |
* self-invoking anonymous function to | |
* enclose object from global scope. | |
* Use @param undefined later in code | |
* to check undefined values | |
*/ | |
(function(global, undefined){ | |
// use strict mode instead of quirks mode | |
'use strict'; | |
/** | |
* Constructor | |
* ensures instantiation even if called without "new" | |
* @param {HTMLElement} element | |
* @param {Object} [settings] | |
* @returns {Class.Instance} | |
* @constructor | |
*/ | |
var Class = function(element, settings){ | |
return new Class.Instance(element, settings || {}); | |
}; | |
/** | |
* Instance-Constructor | |
* create and return an instance | |
* @param {HTMLElement} element | |
* @param {Object} [settings] | |
* @returns {Class.Instance} | |
* @constructor | |
*/ | |
Class.Instance = function(element, settings){ | |
/* INITIALIZER */ | |
// reinitialize and -instantiate object, if @var this refers to global scope | |
if(this === global){ | |
return new Class.Instance(element, settings || {}); | |
} | |
/** | |
* default settings | |
* @type {Object} | |
*/ | |
var defaults = {}; | |
/* PROPERTIES (private) */ | |
/** | |
* save instance in local/private var | |
* to provide access from inside private methods | |
* @type {Class.Instance} | |
* @private | |
*/ | |
var _this = this; | |
/* PROPERTIES (public) */ | |
/** | |
* save given settings or create empty object | |
* @type {Object} | |
* @public | |
*/ | |
_this.element = element; | |
_this.settings = settings || {}; | |
/* METHODS (private) */ | |
/** | |
* yet another initializing function | |
* merge default settings with custom settings | |
*/ | |
var init = function(){ | |
_this.settings = Class.Utilities.merge(defaults, _this.settings); | |
}; | |
/* FINALIZER */ | |
// eventually call private method init() | |
init(); | |
// return object instance | |
return this; | |
}; | |
/** | |
* Prototype | |
* enable object inheritance | |
* and provide public methods | |
*/ | |
Class.Instance.prototype = { | |
/** | |
* pointless function | |
* @returns {Class.Instance} | |
*/ | |
foo: function(){ | |
console.log("FOO"); | |
// enable method chaining | |
return this; | |
}, | |
/** | |
* pointless function | |
* @param {Object} [param] | |
* @returns {Class.Instance} | |
*/ | |
bar: function(param){ | |
// use @param undefined (from the enclosure function) to check if @param param is undefined | |
if(param === undefined){ | |
console.log("BAR - param: undefined!"); | |
} else { | |
console.log("BAR - param: %o", param); | |
} | |
// enable method chaining | |
return this; | |
} | |
}; | |
/** | |
* Utilities | |
* contain some utilitarian functions | |
* @private | |
* @static | |
*/ | |
Class.Utilities = { | |
/** | |
* merge two objects | |
* with overwriting first objects properties | |
* @param {Object} obj1 | |
* @param {Object} obj2 | |
* @returns {Object} | |
*/ | |
merge: function(obj1, obj2){ | |
var cache = {}; | |
var attr; | |
for(attr in obj1){ | |
if(obj1.hasOwnProperty(attr)) | |
cache[attr] = obj1[attr]; | |
} | |
for(attr in obj2){ | |
if(obj2.hasOwnProperty(attr)) | |
cache[attr] = obj2[attr]; | |
} | |
return cache; | |
} | |
}; | |
// add "namespace" to global scope | |
global.Class = Class; | |
}(window)); | |
/** | |
* TEST FIELD | |
*/ | |
var element = window.document.createElement('div'); | |
window.document.getElementsByTagName('body')[0].appendChild(element); | |
// myNewInstance is an instance of Class, created with the "new" keyword | |
var myNewInstance = new Class(element); | |
// calling prototype methods | |
myNewInstance.foo(); | |
myNewInstance.bar(); | |
// myForcedInstance is an instance of Class, even if there's no "new" keyword | |
var myForcedInstance = Class(element); | |
// chaining methods | |
myForcedInstance.foo().bar("test"); |
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
/** | |
* JSoonJS - v1.0.0 - 2013-12-10 | |
* JavaScript Object Oriented Notation | |
* https://github.com/codeFareith | |
* | |
* This boilerplate will help you to create your own | |
* JavaScript classes, libraries, etc. | |
* It teaches you the most common conventions in JavaScript OOP/OOD | |
* | |
* @author Robin von den Bergen <robinvonberg@gmx.de> | |
* @copyright Copyright (c) 2013 Robin 'codeFareith' von den Bergen | |
* licensed under the MIT license | |
*/ | |
(function(global, undefined){ | |
'use strict'; | |
var Class = function(element, settings){ | |
return new Class.Instance(element, settings || {}); | |
}; | |
Class.Instance = function(element, settings){ | |
if(this === global){ | |
return new Class.Instance(element, settings || {}); | |
} | |
var defaults = {}; | |
var _this = this; | |
_this.element = element; | |
_this.settings = settings || {}; | |
var init = function(){ | |
_this.settings = Class.Utilities.merge(defaults, _this.settings); | |
}; | |
init(); | |
return this; | |
}; | |
Class.Instance.prototype = { | |
foo: function(){ | |
console.log("FOO"); | |
return this; | |
}, | |
bar: function(param){ | |
if(param === undefined){ | |
console.log("BAR - param: undefined!"); | |
} else { | |
console.log("BAR - param: %o", param); | |
} | |
return this; | |
} | |
}; | |
Class.Utilities = { | |
merge: function(obj1, obj2){ | |
var cache = {}; | |
var attr; | |
for(attr in obj1){ | |
if(obj1.hasOwnProperty(attr)) | |
cache[attr] = obj1[attr]; | |
} | |
for(attr in obj2){ | |
if(obj2.hasOwnProperty(attr)) | |
cache[attr] = obj2[attr]; | |
} | |
return cache; | |
} | |
}; | |
global.Class = Class; | |
}(window)); | |
var element = window.document.createElement('div'); | |
window.document.getElementsByTagName('body')[0].appendChild(element); | |
var myNewInstance = new Class(element); | |
myNewInstance.foo(); | |
myNewInstance.bar(); | |
var myForcedInstance = Class(element); | |
myForcedInstance.foo().bar("test"); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment