OOP JS

This project when combined with design patterns adds common OOP functionality to JavaScript

Goals:

• Provide OOP like functionality including namespacing, classes, inheritance, public / private scope
• Provide a cross-browser event model that can be added to any object
• Provide methods for cloning and extending objects
• Provide methods for type checking

Install:

npm i @koga73/oop

Run unit tests:

Run NodeJS unit test:

npm test

Run HTML/JS unit test:

tests/test.html

examples/pong snippet:

(function(){
	//Imports from Pong example
	var Models = Pong.Models;
	var DomRenderer = Pong.Renderers.DomRenderer;
	var InputManager = Pong.Managers.InputManager;
	var NormalTimer = Utils.NormalTimer;
	
	//This returns a reference to the class. We are using the word "_class" as a shortcut to easily access static members
	var _class =
	namespace("Foo.Bar.Pong",
	construct({
	
		//Constants
		static:{
			ID_BALL:"ball",
			SPEED_BALL:400, //Pixels-per-second
			
			singleton:null,
			getSingleton:function(){
				if (!_class.singleton){
					_class.singleton = new Foo.Bar.Pong(
						_class.ID_BALL
					);
				}
				return _class.singleton;
			}
		},

		//In general _public is optional since it's the same as "this" (except in the scope of a private method)
		//Properties and methods starting with an underscore '_' are private
		instance:function(_private, _public){
			return {
				ball:null,

				normalTimer:null,
				inputManager:null,

				_renderer:null,
				_renderQueue:[],

				__construct:function(ballId){
					//Init game objects
					this.ball = new Models.Object2D(ballId);

					//Init game timer
					this.normalTimer = new NormalTimer({
						paused:false,
						onTick:_private._onTick
					});
					this.inputManager = InputManager.getSingleton();

					//Init renderer
					_private._renderer = new DomRenderer();
					_private._renderQueue = [
						this.ball
					];

					//--- LISTEN FOR EVENTS ---

					//Start
					this.resetBall();
				},

				//Delta is the time elapsed between ticks
				//Multiplying a movement value by delta makes the movement timebased rather than based on the clock cycle
				_onTick:function(delta){
					//Move
					var queueLen = _private._renderQueue.length;
					for (var i = 0; i < queueLen; i++){
						var obj2d = _private._renderQueue[i];
						obj2d.x += obj2d.moveX * delta;
						obj2d.y += obj2d.moveY * delta;
					}
					
					//--- DO LOGIC ---
					//Do something with _class.SPEED_BALL

					//Render
					_private._renderer.render(_private._renderQueue);
				},

				resetBall:function(){
					//--- DO LOGIC ---
				}
			};
		}
		
	}));
})();

Simple class:

OOP.namespace("foo.bar.Shape", OOP.construct({
	instance:{
		width:100,
		height:200
	}
}));

var defaultShape = new foo.bar.Shape();
console.log(defaultShape);

Change scope:

This allows you to change the scope of OOP methods so don't have to put "OOP" all over the place.

//Add OOP methods to window/global by default or to any object passed in
OOP.changeScope();

namespace("foo.bar.Shape", construct({
	instance:{
		width:100,
		height:200
	}
}));

var defaultShape = new foo.bar.Shape();
console.log(defaultShape);

Constructor:

OOP.namespace("foo.bar.Shape", OOP.construct({
	instance:{
		width:100,
		height:200,

		__construct:function(newWidth, newHeight){
			this.width = newWidth || this.width;
			this.height = newHeight || this.height;
			console.log("This gets called when a new instance is created", this.width, this.height);
		}
	}
}));

//Note that if we pass in non-object parameters they will get sent to the constructor
//Object type parameters will apply value overrides to the instance
var customShape = new foo.bar.Shape(300, 400, {
	test:"this prop gets added to the instance"
});
console.log(customShape);

Static:

OOP.namespace("foo.bar.Shape", OOP.construct({
	instance:{
		width:100,
		height:200,
	},

	static:{
		SOME_CONST:123,

		getArea:function(obj){
			return obj.width * obj.height;
		}
	}
}));

var instance = new foo.bar.Shape({
	width:300,
	height:400
});
console.log(foo.bar.Shape.SOME_CONST);
console.log(foo.bar.Shape.getArea(instance));

Public / Private scope:

OOP.namespace("foo.bar.Shape", OOP.construct({
	instance:function(_private, _public){
		return {
			width:100,
			height:200
			_thisIsPrivate:"some message",

			getThisIsPrivate:function(){
				return _private._thisIsPrivate;
			}
		};
	}
}));

var defaultShape = new foo.bar.Shape();
console.log(defaultShape);

Note that when a function is passed to "instance" a public and private scope is created. Anything starting with an underscore '_' is private. You can use the _private and _public references passed into the function to call between scopes. Optionally "this" refers to the _public or _private scope respectively. You can also use these _public and _private variables to avoid creating event delegates for "this".

Inheritance:

OOP.namespace("foo.bar.Shape", OOP.construct({
	instance:{
		width:100,
		height:200
	},

	static:{
		getArea:function(obj){
			return obj.width * obj.height;
		}
	}
}));

OOP.namespace("foo.bar.Triangle", OOP.inherit(foo.bar.Shape, OOP.construct({
	instance:{
		width:300,
		angles:[30, 60, 90]
	},

	static:{
		getArea:function(obj){
			return obj.width * obj.height * 0.5;
		}
	}
})));

var triangle = new foo.bar.Triangle();
console.log(OOP.isType(triangle, foo.bar.Triangle)); //true
console.log(OOP.isType(triangle, "foo.bar.Triangle")); //true
console.log(OOP.isType(triangle, foo.bar.Shape)); //true
console.log(triangle._interface); //Triangle instance
console.log(triangle._super); //Shape instance
console.log(triangle._super._interface); //Triangle instance
console.log(triangle._type); //"foo.bar.Triangle"
console.log(triangle._super._type); //"foo.bar.Shape"

Events:

OOP.namespace("foo.bar.Shape", OOP.construct({
	instance:{
		width:100,
		height:200
	},
	events:true,

	static:{
		getArea:function(obj){
			return obj.width * obj.height;
		}
	}
}));

var instance = new foo.bar.Shape();
instance.addEventListener("test-event", function(evt, data){
	console.log("Got event", evt, data);
});

instance.dispatchEvent(new OOP.Event("test-event", 123));

Note that events fired from inherited classes (_super) will bubble up (they share the same _eventHandlers)

Add events to any object:

var myObj = {};
OOP.addEvents(myObj);

myObj.addEventListener("test-event", function(evt, data){
	console.log("Got event", evt, data);
});

myObj.dispatchEvent(new OOP.Event("test-event", 123));

Clone:

var obj = OOP.clone({foo:{bar:"foobar"}}); //Makes a deep copy - The foo objects will be different
var obj = OOP.clone({foo:{bar:"foobar"}}, false); //Makes a shallow copy - The foo objects will be the same reference

Extend:

var foo = {abc:123};
var bar = {def:{ghi:456}};

//Extend bar onto foo - deep by default meaning foo.def will not equal bar.def
OOP.extend(foo, bar);

//Extend bar onto foo - shallow meaning foo.def and bar.def will be the same reference
OOP.extend(foo, false, bar);

//Extend bar onto foo - shallow meaning foo.def and bar.def will be the same reference but the third object is deep again
OOP.extend(foo, false, bar, true, {jkl:{mno:789}});

Note the number of arguments is unlimited. When a boolean is encountered it sets the "deep" flag for subsequent objects. The first object found in the arguments is what gets extended (you could pass true/false as the first argument).

Type checks:

OOP.isType
OOP.isFunction
OOP.isArray
OOP.isObject
OOP.isString
OOP.isBoolean
OOP.isRegExp

Full API:

init:_methods.init,

//Class
namespace:_methods.namespace,
inherit:_methods.inherit,
createClass:_methods.createClass,
construct:_methods.construct,

//Core
clone:_methods.clone,
extend:_methods.extend,

//Type checks
isType:_methods.isType,
isFunction:_methods.isFunction,
isArray:_methods.isArray,
isObject:_methods.isObject,
isString:_methods.isString,
isBoolean:_methods.isBoolean,
isRegExp:_methods.isRegExp,

//Events
Event:_methods.event,

addEvents:_methods.addEvents,
removeEvents:_methods.removeEvents,

addEventListener:_methods.addEventListener,
on:_methods.addEventListener, //Alias

removeEventListener:_methods.removeEventListener,
off:_methods.removeEventListener, //Alias

dispatchEvent:_methods.dispatchEvent,
trigger:_methods.dispatchEvent, //Alias
emit:_methods.dispatchEvent //Alias