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, later it developed into a standalone framework.

Why not jQuery or any other popular framework?

The fact is that when Iroquois was created, jQuery did not exist yet. Prototype was very popular at that time, 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 the Mohawk do?

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

- Creating objects (object model)
- Working with DOM (navigating through the tree, managing CSS classes and events, simplifying work with the DOM)
- Ajax interface (including simplified work with forms)
- Dragging and resizing objects
- A small set of visual effects
- Template (js templates)
- UI components (WYSIWYG, lists, tabs, input fields, etc.)

In this article, I would like to start with a description of the object model .

Object model

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

The first method did not suit, because when inheriting from an inherited class, there simply began a misfortune with references to the parent. The method from Dean Edwards worked perfectly, but two things haunted: 1. “klass” as the base class and 2. there was no way to refer to the parent, but only to the rewritten parent method. However, I tried several times to change the code to fit my needs, but there, when parsing the inheritance method, the brains boiled :) If I am not mistaken, then MooTools still uses this method in its code.

So, how does the object model work in the Mohawk.

Class creation

The 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.

Let's create the Person class with the name property , the constructor accepting the name and the 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 set through the __construct field of the passed object (obviously, the name was affected by PHP). One more 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 variable self 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 through the self variable .
You can see it 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 Student with an additional school field , a new enters method and an overloaded hello method . Inheritance is performed through the extends method of the created Person class . The parameter, as well as in Class, passes 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, a link to the parent can be obtained through the parent variable .

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 the Mohawk. Access to them is via 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 display:
Hello, my name is Carol
I study at MIT
My degree is PhD

Singleton

Sometimes a class is required in only 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 you can see from the example, the ProfSmith object is created immediately when it is defined.

Syntactic sugar

And finally, a little syntactic sugar. Guess what the following code will output 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, the Mohawk may have some disagreements with IE7. Therefore, if possible, run it through the local web server so that the address is at least localhost .