モホーク/オブジェクトモデル

モヒカンとは何ですか?


Mohawk(MohawkまたはMohawk)は、Iroquois CMS用に作成され、使用されるJSフレームワークです。 当初、このフレームワークは、クロスブラウザースクリプトを作成するためのjs-functionのセットとして作成されましたが、後にスタンドアロンフレームワークに開発されました。

jQueryまたは他の一般的なフレームワークを使用しないのはなぜですか?

実際、イロコイが作成されたとき、jQueryはまだ存在していませんでした。 当時、プロトタイプは非常に人気があり、jQueryは勢いを増してきました。 しかし、プロトタイプはRoRコミュニティでより人気があったため、実際には使用したくありませんでした:)

モヒカンは何ができますか?

今日、Mohawkは次の機能を備えた完全なクロスブラウザjsフレームワークです。

-オブジェクトの作成(オブジェクトモデル)
-DOMの操作(ツリーのナビゲート、CSSクラスとイベントの管理、DOMの操作の簡素化)
-Ajaxインターフェース(フォームの簡略化された作業を含む)
-オブジェクトのドラッグとサイズ変更
-視覚効果の小さなセット
-テンプレートエンジン(jsテンプレート)
-UIコンポーネント(WYSIWYG、リスト、タブ、入力フィールドなど)

この記事では、オブジェクトモデルの説明から始めたいと思います。

オブジェクトモデル


モホーク族のオブジェクトモデルの主な目的は、クラス継承メカニズムの存在でした。 その時点でフレームワークを作成するとき、jsには基本的に2つの人気のあるOOPの実装がありました。
-関数としてのクラスの定義、および関数のプロトタイプの拡張による後続の継承(およそ、次のように: www.kevlindev.com/tutorials/javascript/inheritance
-Dean Edwardsのbase2フレームワークのメソッド(http://code.google.com/p/base2/)

最初の方法は適合しませんでした、なぜなら 継承されたクラスから継承すると、親への参照で不幸が始まりました。 Dean Edwardsのメソッドは完全に機能しましたが、2つのことが忘れられませんでした。1。基本クラスとして「klass」、2。親を参照する方法がなく、書き換えられた親メソッドのみを参照する方法。 ただし、ニーズに合わせてコードを変更しようと何度か試みましたが、継承メソッドを解析するときに頭脳が沸騰しました:)私が間違っていなければ、MooToolsはまだコードでこのメソッドを使用しています。

それで、モヒカンでオブジェクトモデルはどのように機能しますか。

クラス作成

クラスはClass関数を介して作成され、その唯一の引数はクラスのオブジェクト(本体)になります。
var A = new Class({ /* */ });

* This source code was highlighted with Source Code Highlighter .


nameプロパティ、名前を受け入れるコンストラクター、およびhelloメソッドを使用してPersonクラスを作成しましょう。
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 .


コードからわかるように、コンストラクターは、渡されたオブジェクトの__constructフィールドを介して設定されます(明らかに、名前はPHPの影響を受けました)。 もう1つ注意してください。クラスメソッド内では、クラス参照は通常のthisではなく自己変数です。 その理由は、 これが環境に依存することが多く、変数selfが一定になるためです。 helloメソッドでは、Mohawkコンソールにメッセージを書き込んで、例でその動作を確認できるようにします。 ご覧のとおり、メソッドでは、nameプロパティはself変数を介してアクセスされます。
こちらの実際の動作をご覧ください: demo.irokez.org/mohawk
サンプルフレームワークをここからダウンロードします: irokez.org/download/mohawk

オブジェクトをテストします。
var alice = new Person( 'Alice' );
alice.hello();

* This source code was highlighted with Source Code Highlighter .


コンソールには、「こんにちは、私の名前はアリスです」と表示されます。

継承

ここで、 Personから派生したクラスを作成します。 追加の学校フィールド、新しいenterメソッド、オーバーロードされたhelloメソッドを備えたStudentとします。 継承は、作成されたPersonクラスのextendsメソッドを介して実行されます。 パラメータは、 クラスと同様に、継承されたクラスの「本体」を渡します。
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 .

この例からわかるように、 変数を介してへのリンクを取得できます。

新しいクラスのテスト:
var bob = new Student( 'Bob' );
bob.enters( 'MIT' );
bob.hello();

* This source code was highlighted with Source Code Highlighter .


コンソール出力:
こんにちは、ボブです
私はMITで勉強しています

静的プロパティとメソッド

最近のバージョンでは、静的プロパティとメソッドがモホーク語に追加されました。 それらへのアクセスは、 静的変数を介して行われます。 例を見てみましょう:
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 .


コンソールには以下が表示されます。
こんにちは、私の名前はキャロルです
私はMITで勉強します
私の学位は博士号です

シングルトン

1つのインスタンスでのみクラスが必要な場合があります。これには、既製のシングルトーン関数を使用できます。
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 .


例からわかるように、ProfSmithオブジェクトは定義されるとすぐに作成されます。

構文糖

そして最後に、少し構文的な砂糖。 次のコードがコンソールに出力する内容を推測します。
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 .


次の記事では、興味があればフレームワークの説明を続けます。 ご清聴ありがとうございました。

PS:フレームワークをダウンロードしてIE7を使用している場合、MohawkはIE7に不一致があるかもしれません。 したがって、可能であれば、アドレスが少なくともlocalhostになるようにローカルWebサーバーを介して実行します。

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


All Articles