OOjs
OOjs |
---|
Features |
See also |
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
[edit]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.
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.
Allow event handlers to be attached, called when events occur, and detached.
Provide a simple map interface for associating arbitrary data with a symbolic name.
Registry of classes with instantiation abstraction.
Utilities
[edit]See the API documentation for a complete reference of available utilities.
Compatibility
[edit]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
[edit]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
[edit]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
[edit]
OOjs
|
External links
[edit]- Source code on phabricator.wikimedia.org/diffusion/ (GitHub mirror)
- Package on npmjs.org
- Phabricator project (issue tracker)
- API Documentation
- Community-created TypeScript definitions for OOjs (work in JavaScript projects as well in popular IDEs).
OOjs is maintained by the Editing department.
Get help:
|