👩‍❤️‍💋‍👨 🚕 🅱️ Enyo 2. OOP 🧜 🆑 🈺

最初のトピックは多くの金曜日の投稿の運命に苦しみましたが、それは問題ではありません！

私はあきらめません、それは私たちが続けることを意味します...

このトピックでは、次のトピックについて説明します。

クラス。定義、インスタンス化、継承。
クラスメソッドとフィールド、コンストラクターと基本クラスのメソッド

免責事項

Habrazhiteli、私は究極の真実であると主張していません。

特にJSとEnyoについての私の知識はかなり限られているため、チュートリアルは不完全です。

読み飛ぶことに興味のある人は大いに推薦します。ドキュメント。

リンクは、最初の部分、現在のトピックの付録、そしてもちろんenyojs.comで利用できます。

ソースデータ

同じ「index.html」ファイルを使用します。

<!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>

すべての例は、タグ内のコードを変更します。

クラス。定義、インスタンス化、継承。

タイプの定義：

 class ClassName {}

Enyoでは、デザインは次のようになります

 enyo.kind({name: 'ClassName'})

オブジェクトのインスタンスの作成はオリジナルではありません：

 var class_name = new ClassName()

継承はインスタンス化よりも少し複雑です：

 class ClassNameA {} class ClassNameB extends ClassNameA {}

Enyoでの形式は次のとおりです。

 enyo.kind({name: 'ClassNameA'}) enyo.kind({kind: 'ClassNameA', name: 'ClassNameB'})

ここで、古典的なOOP言語で「ClassName」タイプのインスタンスがメモリロケーションを参照し、顕著な機能を持たない場合（最良の場合はObjectクラスから継承する場合）、Enyoでは、基本クラスはデフォルトで「enyo.Control」になります。 div

タグ（過酷なWEB遺産）を持つDOM要素をブロックします。タイプ「ClassNameA」の場合、基本クラス「enyo.Control」として暗黙的に割り当てられます。この状況があなたに合わない場合-「enyo.Component」を継承します。

C ++ / Java / etcスタイルの多重継承。可能な場合は見つかりませんでした- ダックタイピング、それは不十分に検索された可能性があります。

ワークショップ

「index.html」を取得して、次のコードを入力します。

 //   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)

DOMをチェックすると、 div

要素は見つかりません。これは、クラスのいずれも「renderInto（）」メソッドを呼び出していないためですが、オブジェクトは作成および初期化されています。

クラスのメソッドとフィールド、コンストラクター、および基本クラスのメソッド

クラスは良いのですが、なぜ機能で満たしていないのにクラスなのでしょうか？ -さあ、やってみましょう！

擬似コードを持つ：

 class ClassNameA { object fieldName = "value" }

コードをEnyoに変えましょう：

 enyo.kind({name: 'ClassNameA', fieldName: 'value'})

これで、クラスのインスタンスを作成し、クラスフィールドが使用可能であることを確認できます。

 var cls_a = new ClassNameA() console.log(cls_a.fieldName)

わかりましたが、フィールド自体はほとんど意味がありません、メソッドはどこにありますか？ -はい、すぐそこに！

擬似コードを持つ：

 class ClassNameA { object method () { return "value" } }

コードをEnyoに変えましょう：

 enyo.kind({ name: 'ClassNameA', method: function(){ return 'value' } })

これで、クラスのインスタンスを作成し、クラスメソッドが使用可能であることを確認できます。

 var cls_a = new ClassNameA() console.log(cls_a.method())

わかりました、フィールドがあります、メソッドがあります...多分コンストラクタ/デストラクタもありますか？ -もちろん！ 2ピースものコンストラクター!!! しかし、我々は一貫しています。

Enyoオブジェクトを作成すると、そのconstructor

メソッドが呼び出されます;初期化が必要な場合は、オーバーライドする価値があります。

次のようになります。

 enyo.kind({ name: 'ClassNameC', constructor: function() { //   console.log('constructor') } })

基本クラスのメソッド（この場合はコンストラクター）にアクセスするために、Enyoはthis.inherited(arguments)

構築を提供します。 this.inherited(arguments)

は、オーバーライドする予定のすべてのメソッドで機能することに注意してください。

その結果、コードは次のようになります。

 enyo.kind({ name: 'ClassNameC', constructor: function() { console.log('my init befor constructor') this.inherited(arguments) console.log('my init after constructor') } })

上記のすべては、ユーザーが作成したすべてのEnyoオブジェクトに当てはまりますが、追加があります...

「enyo.Component」と入力します。要するに、このビーストは「enyo.Control」（デフォルトのdiv

）の基本クラスの1つです。

そのフィールドとメソッドには次のものがあります。

name-オブジェクトの入力/命名を担当するフィールド
createComponent / createComponents-子コンポーネントを動的に作成するためのメソッド
destroyComponents-子コンポーネントを動的に削除するためのメソッド
owner-現在のコンポーネントの親へのリンクフィールド
id-明らかだと思う
イベントを操作するための多くのおいしいメソッドがありますが、それらについては次のトピックで説明します

好むと好まざるとにかかわらず、このような機能は注目に値します。そのため、この「enyo.Component」は、「子供」のライフサイクルにさらに2つのメソッドを導入します。

 enyo.kind({ name: 'ClassNameD', //      constructor: function() { this.inherited(arguments); }, //     createComponent / createComponents create: function() { this.inherited(arguments); }, //     destroyComponents destroy: function() { this.inherited(arguments); } });

塩とは何ですか？はい、すべてが非常に簡単です！

「enyo.Component」内、特に「enyo.Control」内では、多くの要素をネストできます。

このツリーを構築する方法は？このツリーをDOMにバインドする方法は？要素を追加/削除するときに寸法を再計算する方法は？

イベントをバインド/削除する方法は？感じますか？そう、チェッカーと詩人がいるオブジェクトの小さなグラフ！

正義のために、要素の作成/削除とDOMでの実際のレンダリングが機能的に分離されていることをお知らせします。

新しいインスタンスを作成するときに子要素を作成/削除することは、作成/破棄によって行われます。親ノードへのアクセスは「所有者」フィールドを経由し、子ノードへのアクセスは「this。$」を経由します

オフ。ドキュメントには、オブジェクトが「enyo.Component」またはその子孫から継承されている場合、コンストラクタとしてcreateを使用します。それはコンストラクタの直後に呼び出され、そうでなければ-コンストラクタ。

結果：

 enyo.kind({ name: 'ClassNameD', create: function() { // this.$ -  this.inherited(arguments) // this.$ -   ,    create   }, destroy: function() { // this.$ -    this.inherited(arguments); // this.$ -  } });

参照資料

Enyoの継承。 Github Wiki Enyo

オブジェクトライフサイクルEnyo。 Github Wiki Enyo

enyo.Component。 Enyo API

enyo.Control。 Enyo API

Enyo 2. OOP