👌🏻 👨🏾‍🌾 ◾️ JavaScriptインターフェイスの抽象表記 🚪 ⚡️ ⛴️

みなさん、こんにちは。この投稿は、ライブラリに関するものであり、むしろ、数か月前に発明したJavascriptでのアプリケーション開発の哲学に関するものです。私は常に自分で使用し、すべての友人に配布しました。レビューは肯定的であるため、私はそれをより広いコミュニティに公開する機会をとることに決めました。

ライブラリ自体はjQueryの調整として機能します。実際には、jQueryへの依存は条件付きであり、必要になるまでライブラリ自体と共有できます。

Jiantを使用すると、複雑なクライアントアプリケーションを作成して、サポートと開発を大幅に簡素化できます。

簡単な背景

私は10年以上にわたってWebアプリケーションを開発しています。過去数年間、私はGWTを常に使用しています。残念ながら、Googleはこのライブラリの最も深刻な問題であるコンパイルの遅延を解決できませんでした。新しいバージョンのリリース（2.4から2.5）での長い休止とGWTのサイドへの移行の後、私が働いている会社の有名な開発者（あまり知られていない）は、GWTと提携する時が来たことに同意しました。 jQueryでの開発を続けることにしました。しかし、GWTは、純粋なjavascriptプログラミングには明らかに欠けていた非常に便利な開発「反射神経」を植え付けました。特に、プレゼンテーションとロジックを分離したMVCアプローチ、EventBus。新しい状況の不便さと不快感は、次第に発展し変容するいくつかのアイデアにつながり、以下に説明する解決策につながりました。

また、ライブラリを作成する前に、Backboneなどの既存のMVCソリューションを見つけましたが、定型コードの量（必要な宣言の冗長性）にはあまり満足していませんでした。

メリット

実際に、読むインセンティブを得るために、先に進み、主な利点をリストします。

コード補完（自動補完）-文字列宣言の代わり。
インターフェイスの完全な抽象化と、ロジックとプレゼンテーションの分離
特定のコードフラグメントの実行中ではなく、アプリケーションの起動中にJavaScript変数をWebページの実際の要素にバインドすることの検証。デザイナーの遊び心のある手から機能の開発者をさらに保護するもの
可能な限り単純な方法でコードレベルで自己文書化する-少ないと同時に、私は見たことがない
埋め込みが簡単-いつでもどこでも埋め込みが可能で、すぐにメリットを享受できます

そして、ささいなことについてもっと。

原則

ライブラリのイデオロギーは、次の論文に基づいています。それらを基礎とすると、さらにすべてが簡単に理解できます。

インターフェースは、一連のビュー（View、View？）で構成されています。ロシア語で単語を見つけることは困難です。これらはウィジェットではなく、画面でもないためです。これらは、インターフェースのユニークで意味のある部分です。顧客の話を聞くだけで簡単に選択できます。ここに「連絡先編集画面」があります。ここから「ユーザーリスト」に移動します（ページ上には同時に複数のビューが表示されます）。
各ビューには、「リストに戻るボタン」、「ユーザーのリストのコンテナー」、「ユーザーの写真」などの要素のセットが含まれています。これらの要素は、同じビュー内で識別可能です。

「方法」を決定する必要があるときにジャングルを通過するいくつかの技術論文と同様に？以下と矛盾しないように：

ユーザーが最終的に画面に表示するのは、本質的にhtmlコードです。そして、htmlをレンダリングする最良の方法は何ですか？ htmlのみ。つまり、ユーザーに特定のインターフェイスを表示する必要がある場合-ユーザーのhtmlをページに配置し、必要なときに使用します。 DOMを介して生成する代わりに、その場で文字列を操作または連結します（最も単純な場合を除く）。また、デザイナーの生活が楽になります-彼は単にhtmlコードをデザインします。
繰り返し要素はテンプレートによって生成されますが、これもページ上の単なるHTMLコードです

最も重要なことは、Jiant（javascriptインターフェース抽象表記法）は、一連のトリックよりも開発哲学です。この哲学を遵守して開発すれば、すべてが簡単かつ自然に成り立ちます。

表示する

設計中

そのため、最初に実装の詳細に入らずにjsonでインターフェースを設計します。たとえば、登録フォームについてナレーター（または顧客）を聞くだけです：「ユーザーに名前と電子メールを入力して、登録ボタンを押すと、登録されているウィンドウが表示され、クリックして中に入ります。」

聞いたり書いたりしながら、jsonで記述します。

var registration = { //  ,       views: { //  views     View registrationFormView: { //   nameInput: jiant.input, //    emailInput: jiant.input, //    registerCtl: jiant.ctl //  ,      }, successView: { //      continueCtl: jiant.ctl //   , ,     }, errorView: { //      errorMessage: jiant.label, //    disposeCtl: jiant.ctl //             } } };

これをすべて理解する方法は？コードを次のように読み取ります。「アプリケーションは、登録フォーム、成功メッセージ、エラーメッセージの3つのビューで構成されています。登録フォームには、2つの入力フィールドと1つのコントロール...が含まれます。ここでのjiant.inputおよびjiant.ctlは、文書化のみを目的としています。たとえば、次のように書くこともできますが、機能しますが、読むとわかりにくくなります。

 var registration = { views: { registrationFormView: { nameInput: 1, emailInput: 1, registerCtl: 1, }, successView: { continueCtl: 1 }, errorView: { errorMessage: 1, disposeCtl: 1 } } };

実現する

インターフェイスが可能な限り最も簡潔で簡潔な方法で記述されたので、インターフェイスを使用してアプリケーションロジックを実装し、インターフェイス自体をHTMLコードで実装します。その結果、MVCをjson-html-javascriptの形式で取得します。最初に、次のルールに従って、HTMLビュー自体を実装します。

各ビューには、対応するIDを持つhtml要素があります
各View要素（nameInput、registerCtl）は、View要素内にある対応するクラスを持つhtml要素に対応します

RegistrationFormViewの実装：

 <div id="_registrationFormView"> Your name: <input class="_nameInput"> <br> Your email: <input class="_emailInput"> <br> <button class="_registerCtl">Register</button> </div>

識別子とクラス名の前のアンダースコアは何ですか？少し下に説明されています。

同様に、successViewを実装します。

  <div id="_successView">   ,    ! <button class="_continueCtl">Continue</button> </div>

およびerrorView。

抽象化を具現化する

したがって、抽象インターフェース定義があります。その実装があります。それらを接続する方法は？

次のように：

 $(function() { jiant.bindUi("_", registration, true); });

できた

bindUi関数は、ViewまたはView要素の各抽象定義に追加される最初のパラメーターとしてプレフィックスを取ります。この場合、下線が引かれます。空の文字列を渡すと、jsonの名前とhtmlのクラス識別子が一致します。 htmlコードの可読性を高めるために下線を使用すると便利です。意味のあるインターフェイス要素がすぐに表示されます。

2番目のパラメーターは、アプリケーションの抽象的な定義を含む変数です。 jiantはそこからビュー要素を引き出し、各ビューをその実装に関連付けます。

3番目のパラメーターはデバッグモードを含めることです。これにより、エラーの検索が簡素化され、コンソールへの出力量が増加します。

魔法

ここから小さな魔法がすでに始まっています。 bindUiの実行中、各ビューは識別子によりインターフェイス定義から検索されます。次に、結果のjQueryラッパーオブジェクトが定義変数に添付されます。つまり、bindUiの実行後、registration.views.registrationFormView変数に$（ "#_ registrationFormView"）の結果が含まれます。また、ビューの各要素はクラスによって検索され、入力されます。つまり、registration.views.registrationFormView.registerCtlには$（ "#_ registrationFormView"）。Find（ "._ registerCtl"）が含まれます。

リンクが見つからない場合は、コンソールにエラーが報告されます。そして、デバッグモードがオンになっている場合、すべてのエラーのリストを含むアラートが最後に発行されるため、開発者はこれを見失うことはありません。

出力には、実際のhtml要素に完全に添付されたインターフェイス記述オブジェクトがあります。これは、次のようにロジックコードで使用できるようになりました。

使用する

最も簡単な方法は、独自の個別のjavascriptファイルを記述し、onUiBoundイベントに登録することです。次に例を示します。

 jiant.onUiBound(function($, app) { //     jQuery wrapper       var view = app.views.registrationFormView, errorView = app.views.errorView; //    view.registerCtl.click(function() { errorView.hide(); if (view.nameInput.val() == "") { errorView.errorMessage.html(" !"); errorView.show(); } else if (view.emailInput.val() == "") { errorView.errorMessage.html(" !"); errorView.show(); } else { view.hide(); app.views.successView.show(); } }); });

準備ができたロジック。読むとき、これは感じられませんが、良いIDEでは-このコードの75％は自動補完されます、つまりスペルの時間を節約し、タイプミスによるエラーの可能性を減らしました。

他に何

時間が経つにつれて、テンプレート、EventBus、ハッシュナビゲーション、サーバーでのAJAXの動作が使用プロセスに追加されました。これらはすべて、オートコンプリートに最も友好的で、開発者の最小限の労力で済みます。

AJAX定義の例：

 var app = { ajax: { getDataFromServer: function(id, callback) {} } }

開発者がこれ以上必要とするものはありません。jiant自体がAJAX要求コードを実装します。

使用するために残ります：

  app.ajax.getDataFromServer(6345, function(data) { //do smth with data });

GWTを知っている人-非同期サービスと完全に類似していることがすぐにわかります。

さらに

この記事が公開されて興味をそそられたら、残りの機能（テンプレート、AJAX、状態、およびイベントバス）をさらに説明する準備ができています。 Gihubプロジェクトコード： github.com/vecnas/jiant 、説明付きのサイト： sites.google.com/site/jiantscript/home

JavaScriptインターフェイスの抽象表記