Clever Geek Handbook

リンクを持つシンプルな純粋なJSテンプレートエンジニア

最近、Webアプリケーションのプロトタイプの可能な限り高速な開発がますます必要になっています。 インターフェイスは複雑になっており、膨大な量のデータを表示する必要があります。 そのため、簡単で非常にシンプルなhtmlテンプレートエンジンの作成に戸惑いました。 誰が〜50行のJSコードで何が起こったのかを気にする-catの下。



最小タスク



JSデータをhtml表示に接続する一方向（JS→HTML）テンプレートエンジンを作成することは、可能な限り簡単です。 解決策は、エントリーの最小しきい値を使用して迅速に行う必要があります。 特定の要件に対する最大限のカスタマイズ性-プリミティブさが成功の鍵です。



動作原理



HTML側



通常のデータ属性を使用してjsと通信する通常のhtmlコードを作成します。

data-template-タグ内に表示されるコンテンツ

データ名前空間-JSにバインドするデータ



JSから



データは透過的に記録および更新する必要があります。 つまり dataプロパティを持つオブジェクトオブジェクトがある場合、これは通常のHTMLの直後に更新する必要があります。 



object.data = 5;


次のようなヘルパーメソッドなし： 



 object.setData = function(val){ this.data = val; document.getElementById("tpl").html = val; } object.setData(5);


-これは通常のアプローチですが、データの大きなjsonパックがサーバーから到着し、別のオブジェクトにプッシュしてインターフェースに変更を表示する必要がある場合はどうしますか？ プロパティ/プロパティセットごとにセッターを記述して呼び出す-この実装にうんざりしています。



解決策は簡単です。 オブジェクトのプロパティごとに、値が通常の割り当てで変更されたときに起動するデフォルトのセッター/ゲッターを設定できます。 これはObject.definePropertyと呼ばれます（...） -私は記事をもう一度語るつもりはありません。すぐにアイデアに戻ります。



htmlに接続されているオブジェクトのすべてのプロパティを調べる必要があります。 これを行うには2つの方法があります。



1）domを調べ、そこからdata-namespace属性のすべての可能な（重複しない）値を引き出して別の配列に入れます

2）jsの各オブジェクトに対して、通信で使用されるデータ（データのみではなくデータのみ）を使用する配列を手動で設定します。



コードは実装とプリミティブの視覚化であると主張しているため、2番目のオプションを選択します。

茂みに打ち勝つことがないように、すぐに例を挙げて説明します。



html 

 <div data-template="dataA" data-namespace="test">    dataA      this_namespace=test</div> <div data-template="dataB" data-namespace="test">    dataB      this_namespace=test</div> <div data-template="dataA" data-namespace="test2">    dataA      this_namespace="test2"</div>


js 



 var obj1 = { this_namespace: 'test', //        this_data: ['dataA', 'dataB'] //         }; var obj2 = { this_namespace: 'test2', //        this_data: ['dataA'] //         }


ご覧のとおり、最初はオブジェクトにデータがありませんが、後でそれを受け取ります。まず、オブジェクトはこのために準備する必要があります。



魔法



すべての魔法は、オブジェクト内のthis_data配列を実行し、同じオブジェクト内の配列の各要素に対して2つのプロパティを作成することから成ります。



1）__dataA、__ dataB ...-値はここに保存されます

2）dataA、dataB ...-ここに値が格納されます=）



この操作の意味は、たとえば、渡された値をここに書き込むdataAプロパティだけにデフォルトのセッターを設定すると、再帰的に結果が出るということです。 これを回避するために、接頭辞「__」で別のプロパティが作成されます（たとえば、fake_やmagic_など、誰でも使用できます。オブジェクトの名前空間を詰まらせないように1つだけ選択しました）。



obj.dataA = 3を書き込むと、この値はobj .__ dataAプロパティに書き込まれ、obj.dataAによって要求された場合、デフォルトのゲッターは値obj .__ dataAを返します。 つまり、実際には、obj配列には、純粋な形式のdataAプロパティとdataBプロパティはありません。setterとgetterは、プレフィックスを持つプロパティに置き換えます。



先ほど言ったように、初心者の方が使いやすいように、できるだけ低いエントリーしきい値を確保する必要があります。 そして、誰が望むように書き直される必要があります。 これに関して、オブジェクトに望ましい外観を与える方法全体は、オブジェクトのプロトタイプを介して実装されます。



ここでコードを読むのは不便です。すぐにここ（jsfiddle）を見てください 。コメントと起動を含むすべてのコードがあります。



他に何



  1. クロスブラウザーではありません（つまり、11 +）。これは、varの代わりにletを使用する必要があるためです-クロージャーに煩わされないようにするため。 しかし、再び-あなたはそれを書き換えることができます。
  2. ボックスからネストされたオブジェクトは機能しません-追加できます。 自分用にカスタマイズできる最も短縮されたコードのみを提供しました。
  3. htmlにはロジックを含めるべきではないという概念に従って、テンプレート内のプリミティブな操作（dataA + dataBなど）を使用する機能を追加しませんでした。 愚かなデータ出力。 ロジックはjs上にある必要があります。 私がこれを始めたばかりのとき、そのような機会があったので、私はすぐにevalを使わなければなりませんでした。
  4. コードにはチェックがまったくありません。必要に応じてこれを自分で行ってください。このメソッドが記述された特定のケースでは、すべてのチェックは別のレイヤーを通過します。
  5. 慰めの賞品として：記事の冒頭で次のことについて話しました：「ちょっと、たくさんのjson daaaanyを手に入れます、私はそれらで何ができますか...」-すべてが簡単です：JSONを解析し、 Object.assignを通して必要なオブジェクトにプッシュします-これ動作します。
  6. 私のプロジェクトでは、すべての変数とプロパティにプレフィックス（データ型）を付けています。 arr_list = [1,2,3];のようなもの。 int_count = 2; など これにより、登録せずに「デフォルトのゲッターをセットアップ」し、SMSでデータ型に対応する値を指定できます。突然int_count = 1.4になった場合、結果1を返し、その場ですべての値をチェックします。 それは規律と本当に役立ちます。
  7. 状況ごとに、最終的に取得する内容に応じて、異なるセットと取得を提供できます-非常に便利です。


聞いて、批判して、健康になってください！


More articles:


All Articles