elements一致するページに追加するために、Chrome コンテンツ スクリプトでいくつかのテンプレートを使用します。
現在、これらのテンプレートをstringスクリプトのように保存していますが、これを行うより良い方法があるかどうか疑問に思っています。
質問する
806 次
1 に答える
5
tl;dr 回答- はい、<script type="text/html">タグに保存するか、ajax を介して動的にロードできます。例はこちら(KnockoutJS から) とこちらです。それらを適切な拡張子のファイルに保存し、ID X の空のタグを使用してから、$("#X").load("/path/to/template", function() { renderX(); })
洞察に満ちた考えで長い答え、読み続けてください...
システムのテンプレート/ビューまたは関連する GUI コンポーネントが別のファイルにあることを確認してください(理由を知るために読み続けてください)
フロントエンド エンジニアとして、レイヤーをできるだけ分離することを学びました。これにより、チームはコードをよりよく理解し、保守しやすくなります。レイヤーをモジュールに分割し、"アセンブリ" メカニズムを介してそれらをアセンブルすることは、おそらくソフトウェア エンジニアリングのベスト プラクティスの 1 つです。このプラクティスの利点には、次のようなものがあります。
- 保守性 : 複数の開発者が、より堅牢なソフトウェアを作成するために、コードの 1 つの部分を閲覧および編集できます。
- 読みやすさ : 言語の数が多いため、これらの X または Y 言語のすべての構文を全員が理解できるとは期待できません。1 つのファイルに複数の言語を混在させることは、コード レビュー担当者を混乱させ、必要以上の時間を費やす原因の 1 つにすぎません。
- アクセシビリティ: 例として、html、jade、haml、smarty、twig、erb、またはその他のテンプレート ファイルを取り上げます。これらのファイルには、コード エディターと IDE が構文を強調表示できるように、常に適切な拡張子を付けて名前を付ける必要があります。開発者は、フォルダを一瞥するだけで、それらのファイルが何をするべきかを知ることができます。スクリプトやボットは、拡張機能だけで重要な情報を得ることができます。
ビューを個別のファイルに保持することにより、他のコーダーはそれらを表示して、アプリケーション全体を理解する必要なく、システムの重要なレイヤーを理解できます。開発者がこれらの特定のファイルを確認するだけでよい場合は、コラボレーションも容易になります。バッシングやスクリプトによって、ファイルのような何千もの「ビュー」を持つ大規模なアーキテクチャ システムでさえ、レビューが必要なものだけを出力するためにフィルタリングできます。
(ここまでで、コードから文字列を削除し、そこに新しいファイルを作成するよう説得したいと思います。それ以外の場合は、ライティング スキルを向上させる必要があります)
テンプレートを外部ファイルに移動したら、次に何をすればよいのでしょうか。
Javascript と Chrome 拡張機能について
Javascript にはデフォルトのテンプレート機能がありません (何人かの頭のいい人が ECMAScript Ed. 6 のために取り組んでいますが、モジュラー機能さえありません)。つまり、テンプレート機能を使用する必要があります。そのためのライブラリ。似たようなものである Mustache と Underscore テンプレートを使用していて、そのライブラリを使用してそれをレンダリングしていると仮定しましょう。
これらのテンプレート エンジンのほとんどは悪名高い を使用evalします。これは、コードに脆弱性をもたらす可能性があり、Chrome 拡張機能はこれを非常に嫌います。Chrome 拡張機能の開発チームは、manifest.json禁止するためにファイルの新しいバージョンを強制し、開発者がそのためにサンドボックス ページevalを使用する選択肢を与えました。幸いなことに、彼らはポリシーを少し緩和することを決定したので、適切なCSP定義で引き続き使用できます。manifest.json
これは、1 つだけではなく 2 つの問題に取り組む必要があることを意味します: 「テンプレートをロードする」問題と、「Chrome 拡張機能開発チームが CSP の新しいバージョンを変更した場合に備えて、CSP の新しいバージョンを驚かせない方法でテンプレートをレンダリングする」問題です。マインド"。
テンプレートを読み込む
幸いなことに、テンプレートのロードは、AJAX を介した XML HTTP リクエストによって実行できます。ファイルの名前で URL を指定するだけで、テンプレートを文字列として受け取ることができます。これは、おそらく元の設定です。KnokcoutJS を使用した例を次に示します。
$("#aiesecTemplate").load('js/libs/aiesec/aiesecTemplate.html', function() {
ko.applyBindings(AIESECViewModel);
});
ブラウザが DOM の一部としてレンダリングしないタグ#aiesecTemplateです。<script type="text/html">実際に DOM を組み立てるために、他のテンプレート メカニズムでそれを使用できます。これに対する解決策がすでにある場合は、おそらくこれで答えは終わりであり、人生を続けることができます. そこからコードをどのようにレンダリングするのか疑問に思っている場合は、読み続けてください。
テンプレートをレンダリングする
Chrome 開発チームは、ほとんどのテンプレート エンジン ライブラリが CSP に準拠していないため ( AngularJSは例外)、レンダリング プロセスをサンドボックス化することを提案しています。サンドボックス ページからのコードの抜粋です。
iframe.contentWindow.postMessage(message, '*');
テンプレート エンジンを持つページiframeの属性を持つサンドボックス ページの特定の DOM Iframe 要素はどこにありますか。文字列テンプレートが以前に読み込まれているため、メッセージを投稿した後、iframe 内で問題なくレンダリングできます。サンドボックス評価の詳細については、こちらを参照してくださいsrcmessagewindow.addEventListenermessage
結論
ここまで来たらすごい！私の答えはそれほど退屈ではないかもしれません。最後に、「AMD や RequireJS はどうですか?」と考えているかもしれません。正直なところ、私はそれらを試したことはありませんが、本当に賢い人は、AMD が最善のアプローチではないと考えています。XML HTTP リクエストによる読み込みは良くないかもしれませんが、パフォーマンスに問題があると思われる場合 (私はアプリケーションで使用しましたが、そうではありません)、イベント ページとWeb ワーカーをいつでも使用できます。
于 2013-01-10T05:29:38.640 に答える