habrahabr.ru/post/196248の導入部分を続けて、この記事では、ライブラリcontrols.jsに実装され、アクティブコンテンツを作成してテキストドキュメントに挿入するためにMarkdown Webdocsで使用されるコンポーネントシステムのメカニズムを確認します。
技術的には、Markdown webdocsコンポーネントは、個別のモジュールで構成され、追加のリソースが提供されるcontrols.jsの観点からのコントロールです。 実際には、Markdown webdocsコンポーネントは、Webデザインで広く使用されているテンプレートの拡張版であり、ページのテキストから直接呼び出せるように実装されています。
コンポーネントは、最初は、パラメーター、データを含む属性、htmlコードテンプレート関数、そしてもちろんコードで定義するプロパティとメソッドを持つJavaScriptオブジェクトの一種です。
既製のコンポーネントのいくつかの基本セットはdocument.jsに組み込まれており、初期化後すぐに使用できます。また、定義済みのフォルダー/コンポーネントからコンポーネントの名前で自動的にロードするか、コンポーネントモジュールを含む外部スクリプトをページに接続することもできます。
基本コンポーネントには、補助コードとスタイルは含まれず、その動作と表示を変更しません。複雑なコンポーネントは、コードとスタイルを含むことができ、その状態、動作と表示を制御し、ドキュメントや外部世界とやり取りし、さらに他のコンポーネントに変換して、完全に別のコンポーネントに変換できます。 独立したコンポーネントを使用すると、すべての依存関係を個別のモジュールに完全に取り込むことができます。 生息地のユニバーサルコンポーネントはブラウザに限定されません。 適切で適切なコンポーネントは、サーバー上で解釈され、ブラウザーで実行されるか、あるフレームから別のフレームに転送されます。 信頼できるコンポーネントは、ページ上のリソースファイルの読み込み順序に依存しません。 スマートコンポーネントはデータをキャッシュしたり、プリロードを実行したりできます。遅延コンポーネントは他のコンポーネントに干渉しません。
Hello World！ 成分
(function() { function HelloWorld(parameters, attributes) { $ENV.controls.controlInitialize(this, 'hello', parameters, attributes, $ENV.default_template, $ENV.default_inner_template); this.text('# Hello World!'); // ← Markdown }; HelloWorld.prototype = $ENV.controls.control_prototype; controls.typeRegister('hello', HelloWorld); // ← })();
関数がMarkdown Webdocsのコンポーネントオブジェクトのコンストラクターになるには、いくつかの条件を満たしている必要があります。
-プロトタイプチェーンにはcontrols.control_prototypeが必要です。これにより、オブジェクトに共通のプロパティと制御メソッドが与えられます。
-controls.typeRegister（）またはcontrols.factoryRegister（）を呼び出して関数を登録する必要があります
-コンストラクターモジュールでは、controls.controlInitialize（）を呼び出して初期化する必要があります。
-初期化中に、Markdownマークアップを理解する特別なテンプレートを割り当てることをお勧めします。 $ ENV.default_templateおよび$ ENV.default_inline_templateは、Markdown Webdocsと互換性があり、ほとんどのカスタムコンポーネントで使用できる制御テンプレートです。
上記の例では、文字列this.text（ '＃Hello World！'）; 問題領域のコードです。
バックグラウンドの動的コンポーネントの読み込み
動的ロードは、プロトタイピングとデバッグの目的に便利です。 サンプルコードHello World！でcontrols.hello-world.jsファイルを作成する場合 パスに沿ってコンポーネント/controls/hello-world/controls.hello-world.jsをサイトフォルダに配置します。このサイトのページのテキストでは、このコンポーネントの呼び出しに表記法を使用できます。％hello（）％hello、スクリプトは呼び出します。 コンポーネントの代わりに、初期化コードの実行からスクリプトの実際のロードまでの時間（そしてこの時間は顕著かもしれません）、スタブスタブコンポーネントはドキュメント内の指定された場所に配置されます。
コンポーネントマニフェスト
コンポーネントシステムのメカニズムは、かなり単純で体系的で普遍的な基本原則に基づいています。
モジュール構造の原理
モジュールはコンポーネントのインフラストラクチャを表し、共通のデータを使用する複数のコンポーネントを1つのモジュールで作成できます。
モジュールはスタイルとリソースをカプセル化します。正しく構築されたコンポーネントは、このコンポーネントによって接続されたリソースを管理できるようにする必要があります。たとえば、コンポーネントを削除するときに一意に使用されるスタイルを無効にします。
修正
パラメーターの主な目的は、コンポーネント変更の選択です。 この変更は、同じコンポーネントの別の表現の場合もあれば、別個のコンポーネントの場合もあります。 パラメーターは、属性値を便利なオブジェクトに渡すためにも使用されます。
例：
％page-layout＃scheme = centered（）％page-layout-ここでschemeは、1つまたは別の変更を選択できるパラメータです。このコンポーネントでは、ページレイアウトスキームを選択することを意味します。
％block＃$ class = m41（）％block-ブロックにクラス名を割り当てます。これは、パラメーターを介して属性値を渡す例です。
HTMLコードの作成、DOM要素の管理、イベントの処理
これはすべてコンポーネントの責任です。このため、ベースライブラリは、必要なコード量を削減する適切な機能を提供します。 DOMは視覚化ツールとして機能し、データオブジェクトから完全に抽象化します。 最も単純な場合、開発者は何もする必要はありません。コンポーネントには、デフォルトのテンプレートと、作成時の対応する動作が既にあります。
任意のネスト、フラクタル性、体系的
文書の各部分は文書全体に類似しており、個別の文書として機能できます。 ドキュメントの一部としてのコンポーネントには、同じプロパティがあります。 文書は、別の文書の不可欠な部分である場合があります。
なぜこれがすべて必要なのですか？
この時点で、コンポーネントの機能のアイデアを得るために、コンポーネントセクションのプロジェクトWebサイトセクションを参照することを提案します。
私の意見では、今日、それは技術的に複雑なWebドキュメントを作成するための最も最適な方法であり、他の技術に固有の多くの根本的な欠点を回避します。 （そしてコードを簡素化します）。 外部コンポーネントの技術を使用して、すでによく使用され一緒に使用されている2つのMarkdownとhtmlマークアップにほぼシームレスに追加し、3つ目の要素を追加して、不足している要素（テンプレート、モジュール性、構造的に構成されたアクティブコード）を補完することができました。
そして、現在すべてのJavaScriptサイトに固有のいくつかの欠点は、近い将来に解決されると確信しています。JavaScriptサイトはますます増えており、ネットワーク上のサポートは時間とともに増加するだけです。
おそらく、読んだ後、システムが非常に複雑であるという誤った印象を受けたのでしょう。 しかし、これはそうではないと言いたいです。 サイトにリストされているコンポーネントのソースコードを見ると、サイトに非常に複雑な効果を作成するために、コンポーネント自体で使用されるコードが比較的少ないことがわかります。 このシステムは、最初の知り合いでは複雑に思えますが、開始するにはいくつかの基本的なことを覚えておく必要があります。
ここに書いた内容について何も理解していない場合は...もっと書きます。時間の経過とともに、すべてを明確に伝え、すべての質問に答えようとします。
プロジェクト
この間、プロジェクトはMarkdown webdocsという名前を取得しました。これがネットワーク技術の新しい言葉になることを願っています。 コメントや提案は、github、ブログ、またはVkontakteグループに残すことができます。 プロジェクトを支援したり、特別な特典を利用したいが、方法がわからない場合は、直接連絡してください。すべての連絡先がプロフィールに公開されています。
プロジェクトサイトaplib.github.io/markdown-site-template
Github.com/aplib/markdown-site-templateリポジトリ