OOjs

OOjs
Features
Inheritance Events Registries and factories
See also
OOUI

OOjs (short for "Object-oriented JavaScript") is a JavaScript library for working with objects. Features include inheritance , mixins , static inheritance and additional utilities for working with objects and arrays. It also provides an EventEmitter mixin for event-driven programming, and a factory pattern for decoupling consumers of functionality from any particular class's implementation.

Features

Inheritance

OO.inheritClass( childClass, parentClass )

Extend prototype and static methods and properties of child constructor from a parent constructor.

OO.mixinClass( childClass, parentClass )

Copy prototype and static methods and properties to a child constructor from a parent constructor.

OO.initClass( baseClass )

Initialise a base class to be inherited by, or mixed into, a child class. Only required for classes that do not inherit or mixin other classes.

Events

OO.EventEmitter

Allow event handlers to be attached, called when events occur, and detached.

Registries and Factories

OO.Registry

Provide a simple map interface for associating arbitrary data with a symbolic name.

OO.Factory

Registry of classes with instantiation abstraction.

Utilities

See the API documentation for a complete reference of available utilities.

Compatibility

OOjs is optimised for modern ECMAScript 5 environments. The source code is compatible with the older ECMAScript 3 engine (such as in older versions of Internet Explorer, broadly speaking IE8 and before), but users need a polyfill to provide required ECMAScript 5 methods.

It is packaged to be run in either Web browsers or Node.js.

Extending OOjs classes in newer versions of ECMAScript

MediaWiki's ResourceLoader treats JavaScript code as ES6 by default since MediaWiki 1.41. ES6 supports the class syntax, so you may declare your extensions of OOjs (and OOUI) classes using the new syntax. For example:

class MyDialog extends OO.ui.MessageDialog {
	static get name() {
		return 'myDialog';
	}

	constructor(config) {
		super(config);
		// ...
	}

	initialize() {
		super.initialize();
		// ...
	}
}

However, you will then need to pass such a class through a helper function like this:

function es6ClassToOoJsClass(targetClass) {
	const originClass = Object.getPrototypeOf(targetClass);
	OO.initClass(originClass);
	targetClass.static = Object.create(originClass.static);
	Object.getOwnPropertyNames(targetClass)
		.filter((key) => key !== 'static')
		.forEach((key) => {
			const descriptor = Object.getOwnPropertyDescriptor(targetClass, key);
			if (descriptor.enumerable || descriptor.get) {
				targetClass.static[key] = targetClass[key];
			}
		});
	targetClass.parent = targetClass.super = originClass;
	return targetClass;
}

It assumes that the class has no static properties with a getter whose output is not fixed (which is unlikely).

If you're building your JavaScript project with a transpiler like Babel, you can also use the most modern syntax, with static properties declared as such:

	static name = 'myDialog';

Namespace

In the presence of a module system, such as in Node.js, OOjs exports all of its classes and methods. In other environments, such as Web browsers, a global variable is created named OO. You may access OO the same way you would access jQuery or mediaWiki.

If you are using eslint, you should add the following to your .eslintrc.json file.

"globals": {
    "OO": "readonly"
}

See also

Wikimedia Foundation projects OOjs Group: Editing team Start: 2013-10 Lead: Timo Tijhof

• OOUI

External links

• Source code on phabricator.wikimedia.org/diffusion/ (GitHub mirror)
• Package on npmjs.org
• Phabricator project (issue tracker)
• API Documentation