Geekly Articles each Day
📜 ⬆️ ⬇️

Enyo 2. OOP

image

The first topic suffered the fate of many of the Friday posts, but it does not matter!
I do not give up, which means we continue ...

In this topic we will cover the following topics:


Disclaimer


Damn, I do not claim to ultimate truth.
My knowledge of JS and Enyo in particular is rather limited, and therefore the tutorial is incomplete.
I highly recommend everyone interested to get acquainted with the off. documentation.
Links are available in the first part, in the annex to the current topic and of course on enyojs.com .
')

Initial data


We will use all the same “index.html” file:
<!DOCTYPE html> <html> <head> <meta charset=utf-8> <title>Title</title> <link rel="stylesheet" href="http://enyojs.com/enyo-2.2.0/enyo.css"><!-- Enyo 2.2.0--> <script type="text/javascript" src="http://enyojs.com/enyo-2.2.0/enyo.js"></script><!-- Enyo 2.2.0--> </head> <body> <script type="text/javascript"> </script> </body> </html>

All examples will change the code inside the tag.

Classes. Definition, instantiation, inheritance.


Defining your types:
 class ClassName {}

in Enyo, the construction will be as follows
 enyo.kind({name: 'ClassName'})


Creating an instance of an object is not original:
 var class_name = new ClassName()


Inheritance is a little more difficult to instantiate:
 class ClassNameA {} class ClassNameB extends ClassNameA {}

Enyo will look like this:
 enyo.kind({name: 'ClassNameA'}) enyo.kind({kind: 'ClassNameA', name: 'ClassNameB'})

It is worth making a reservation: if in classical OOP languages ​​an instance of the type “ClassName” refers to a chunk of memory and does not have any outstanding features (at best it inherits from the class Object), then in Enyo the default base class will be “enyo.Control” - block DOM element with a div tag (severe WEB legacy), i.e. for the type “ClassNameA”, the base class is implicitly assigned to “enyo.Control”. If this state of affairs does not suit you, inherit enyo.Component.
C ++ / Java / etc multiple inheritance. could not be found, wherever possible - duck typing , although it may be looking bad.

Practical work


Take our “index.html” and enter the following code:
 //   enyo.kind({name: 'ClassNameA'}) enyo.kind({kind: 'ClassNameA', name: 'ClassNameB'}) //   var cls_a = new ClassNameA() var cls_b = new ClassNameB() //    console.dir(cls_a) console.dir(cls_b)

If we check the DOM, we won't find div elements. This is due to the fact that none of the classes had called the “renderInto ()” method, however, the objects were created and initialized.

Methods and fields of classes, constructors and methods of the base class


Classes are good, but why should a class, if not fill it with functionality? - We'll do it now!
Having pseudocode:
 class ClassNameA { object fieldName = "value" }

let's turn into Enyo code:
 enyo.kind({name: 'ClassNameA', fieldName: 'value'})

Now we can create an instance of the class and check that the class field is available:
 var cls_a = new ClassNameA() console.log(cls_a.fieldName)


Ok, but the fields themselves mean little, where are the methods? - Yes, right there, next!
Having pseudocode:
 class ClassNameA { object method () { return "value" } }

let's turn into Enyo code:
 enyo.kind({ name: 'ClassNameA', method: function(){ return 'value' } })

Now we can create an instance of the class and check that the class method is available:
 var cls_a = new ClassNameA() console.log(cls_a.method())


Ok, there are fields, there are methods ... maybe there is also a constructor / destructor? - Of course! Designers already 2 pieces !!! But we will be consistent.
When creating any Enyo object, its constructor method is called; if initialization is necessary, it is worth redefining it.
It looks like this:
 enyo.kind({ name: 'ClassNameC', constructor: function() { //   console.log('constructor') } })

To refer to the method (in this case, the constructor) of the base class, Enyo provides the construction this.inherited(arguments) . It is worth noting that this.inherited(arguments) works for all methods that you plan to override.
As a consequence, the code will be as follows:
 enyo.kind({ name: 'ClassNameC', constructor: function() { console.log('my init befor constructor') this.inherited(arguments) console.log('my init after constructor') } })


All of the above is true for all Enyo objects created by the user, but there is an addition ...
Type "enyo.Component" - if briefly, this beast is one of the base classes for "enyo.Control" (the same which is the default div ).
Among his fields and methods are:

Like it or not, and such functionality is worthy of attention. So this very “enyo.Component” introduces 2 more methods into the life cycle of its “children”:
 enyo.kind({ name: 'ClassNameD', //      constructor: function() { this.inherited(arguments); }, //     createComponent / createComponents create: function() { this.inherited(arguments); }, //     destroyComponents destroy: function() { this.inherited(arguments); } });


What is the salt? Yes, everything is very simple!
Inside "enyo.Component" and, in particular, "enyo.Control", many elements can be nested, and inside them, etc.
How to build this tree? How to connect this tree with DOM? How to recalculate dimensions when adding / removing items?
How to bind / delete event? Do you feel? Yeah, your little graph of objects with checkers and poetess!
For the sake of fairness, I hasten to inform you that the creation / deletion of elements and their actual rendering in the DOM are separated functionally.

Creating / deleting child elements when creating a new instance occurs by create / destroy. The upstream node is accessed by the “owner” field, and the child nodes by “this. $”
Off documentation says: if your object is inherited from "enyo.Component" or its descendants - use create as a constructor. it is called immediately after the constructor, otherwise it is called the constructor.
Total:
 enyo.kind({ name: 'ClassNameD', create: function() { // this.$ -  this.inherited(arguments) // this.$ -   ,    create   }, destroy: function() { // this.$ -    this.inherited(arguments); // this.$ -  } });


Links


Inheritance in Enyo. Github wiki enyo
Object lifecycle Enyo. Github wiki enyo
enyo.Component. Enyo API
enyo.Control. Enyo API

Source: https://habr.com/ru/post/204598/

More articles:


All Articles