ES6 Classes

Classes

The goal of Jilex is to deal with classes. Well, 1st attempt was to make a POO layer in Jilex to be able to create classes with inheritance with a pool of global pseudo class factory and dependency management... Now ES6 bring brand new class syntax sugar so this POO layer was remove on profit of native strict syntax.

Create

To cook a class just simply write it the ES6 way, browsers support get bigger each day, and for the oldies a Babel compilation will make it work everywhere (not done yet).

class MyClass extends ParentClass {
	constructor() {}
	methods() {}
	get getters() {}
	set setters() {}
}

You have 2 types of classes, regular ones, that your write the way you want, and classes that purpose is to be representing a node. These classes must inherit from the Node class:

class MyClass extends Node {}                           // Node itself
class MyClass extends Element {}                        // Element, as it is a descendant of Node
class MyClass extends jx.core.UIComponent {}            // or any class that inherits from Node

These classes have 2 particularities:

• Have a constructor that returns a node (and not the this object), it's more a factory than a the real constructor.
• Have a method with the same name as the class name, that is used as the real constructor but when the class has been merged in a node.

Your class's constructor need to return a Node object, the way you want. Usually the constructor return a brand new node with the good namespace and localName as if it was present in the document:

class MyClass extends Element {
	constructor()
	{
		return new Node('MyClass').extends( MyClass )
	}
	MyClass()
	{
		this.cool = true;
	}
}

Tip: you can use the modified Node class with the new statment as a shortcut of document.createElement. new Node('prefix:localName') gives you a <prefix:localName/> node. The prefix must be eclared in document. @see class Node

This way you still have a node to deal with when using the new keyword, and also you can "construct" later your class on an already created node with the Node.extends method.

let myNode = new MyClass();                         // Create a brand new node <MyClass/>
console.log( myNode instanceof Node );              //true
console.log( myNode.cool == true );                 //true

nodeFromDocument.extends( MyClass );                // or extend an existing node
console.log( nodeFromDocument.cool == true );       //true

Get organised

Creating classes in global context may be confusing and will polute the window object (classic). You may organise your classes in a package, a plain object to store your classes into. To help selecting or creating a tree of package name you may use the Package('') helper with point separator.

Package('my.nested.pack.of.components');               // Select the nested object or create the tree

my.nested.pack.of.components.MyClass = class MyClass extends Element { ... }