Mohawk / Object Model

What is Mohawk?

Mohawk (Mohawk or Mohawk) is a JS framework created for Iroquois CMS and used in it. Initially, the framework was created as a set of js-functions for creating cross-browser scripts, however, it later became a separate framework.

Why not jQuery or any other popular framework?

The fact is that when Iroquois was created, jQuery was not there yet. At that time, Prototype was very popular, and jQuery was only gaining momentum. But Prototype was more popular in the RoR community, so I didn’t really want to use it :)

What can Mohawk?

At present, Mohawk is a full-fledged cross-browser js-framework that has the following features:

- Creation of objects (object model)
- Working with the DOM (navigating the tree, managing CSS classes and events, simplifying working with the DOM)
- Ajax interface (including simplified work with forms)
- Dragging and resizing objects
- A small set of visual effects
- Template engine (js templates)
- UI components (WYSIWYG, lists, tabs, input fields, etc.)
')
In this article, I would like to begin by describing the object model.

Object model

The main objective of the object model in Mohawk was the existence of a mechanism for class inheritance. When creating the framework at that time, there were basically two popular implementations of OOP in js:
- class definition as a function, and subsequent inheritance through the extension of the function prototype (approximately, something like this: www.kevlindev.com/tutorials/javascript/inheritance )
- a method from the base2 framework from Dean Edwards (http://code.google.com/p/base2/)

The first method did not suit, because When inheriting from an inherited class, the trouble started there with references to the parent. The method from Dean Edwards worked perfectly, but two things did not give rest: 1. “klass” as the base class and 2. it was not possible to refer to the parent, but only to the rewritten method of the parent. However, I tried several times to change the code to fit my needs, but there, when analyzing the inheritance method, the brains boiled up :) If I'm not mistaken, MooTools still uses this method in its code.

So, how does the object model in Mohawk.

Class creation

A class is created through the Class function, the only argument of which will be the object (body) of our class:

var A = new Class({ /* */ });

* This source code was highlighted with Source Code Highlighter .

Create a Person class with the name property, a constructor accepting a name, and a hello method:

var Person = new Class({
//
name: 'anonoymous' ,

//
__construct: function (name) {
self.name = name; //
},

//
hello: function () {
Console.log( 'Hello, my name is ' + self.name);
}
});

* This source code was highlighted with Source Code Highlighter .

As you can see from the code, the constructor is specified via the __construct field of the passed object (obviously, the name was influenced by PHP). Another note: inside the class methods, the class reference is the self variable instead of the usual this . The reason for this is that this often depends on the environment, and the self variable will be constant. In the hello method, I write a message to the Mohawk console so that in the example you can see how it works. As you can see, in the method, the name property is accessed via the self variable.
View in action here: demo.irokez.org/mohawk
And download the framework with an example here: irokez.org/download/mohawk

Test our object:

var alice = new Person( 'Alice' );
alice.hello();

* This source code was highlighted with Source Code Highlighter .

In the console we will see: “Hello, my name is Alice”.

Inheritance

Now create a class derived from Person . Let it be a Student with an additional school field, a new enters method and an overloaded hello method. Inheritance is done through the extends method of the created Person class. The parameter, as well as in Class, transfers the “body” of the inherited class:

var Student = Person.extend({
school: '' ,

enters: function (school) {
self.school = school;
},

//
hello: function () {
// ""
parent.hello();

if (self.school) {
Console.log( 'I study at ' + self.school);
} else {
Console.log( 'I don\'t study yet' );
}
}
});

* This source code was highlighted with Source Code Highlighter .

As you can see from this example, the link to the parent can be obtained through the variable parent .

We are testing a new class:

var bob = new Student( 'Bob' );
bob.enters( 'MIT' );
bob.hello();

* This source code was highlighted with Source Code Highlighter .

Console output:
Hello my name is Bob
I study at MIT

Static properties and methods

In a recent version, static properties and methods were added to Mohawk. They are accessed through the static variable. Let's see an example:

var Phd = Student.extend({
hi: function () {
self.hello();

Console.log( 'My degree is ' + static .degree);
}
})

Phd.degree = 'PhD' ; // ( ) degree

//
var carol = new Phd( 'Carol' );
carol.enters( 'MIT' );
carol.hi();

* This source code was highlighted with Source Code Highlighter .

The console will issue:
Hello my name is Carol
I study at MIT
My degree is PhD

Singleton

Sometimes a class is only required in one instance, for this you can use the ready-made Singletone function:

var ProfSmith = new Singletone({
hello: function () {
Console.log( 'Hello, I am Prof. Smith' );
}
});

ProfSmith.hello(); // Hello, I am Prof. Smith

* This source code was highlighted with Source Code Highlighter .

As can be seen from the example, a ProfSmith object is created immediately upon its definition.

Syntactic sugar

And finally, a little syntactic sugar. Guess what the following code will give to the console:

var sugar = new Singletone({
a: function () {
Console.log( 'I am called from method ' + __function__);
},

b: function () {
Console.log( 'I am called from method ' + __function__);
}
});

sugar.a();
sugar.b();

* This source code was highlighted with Source Code Highlighter .

In the next article I will try to continue the description of the framework if you are interested. Thank you all for your attention.

PS: if you downloaded the framework and use IE7, Mohawk may have some differences with IE7. Therefore, if possible, run it through a local web server so that the address is at least localhost .