XsltスタイルのHTMLファイルの継承

問題

かつて、大規模プロジェクトのリライト中に、Webアプリケーションのさまざまなバージョンのhtmlテンプレートをカスタマイズするメカニズムを改善する必要がありました。 古いバージョンでは、カスタマイズは次のようになりました。

{{if app.version==versions.main}} <!-- html --> {{else if app.version==versions.custom1}} <!-- html --> {{else if app.version==versions.custom2}} <!--  html --> {{endif}} 

そして、そのような麺でプロジェクト全体が浸透しました。 このようなコードを維持および変更することは難しく、積極的に使用すると、テンプレートは理解できない混乱に変わり、個々のブロックを表示するビジネスロジックが異なるバージョンのカスタマイズと絡み合います。

依存性注入を使用したアプリケーションのバージョン管理の便利な方法に慣れたため、バージョンに応じて異なるインターフェイス実装を使用する場合、XSLTのようなHTMLファイルのバージョン管理用の自転車grunt-html-inheritanceを発明することにしました。 基本的なhtmlファイルの一部を小さなパッチで置き換えることができます。

プロジェクトを書き換えるとき、AngularJSがフレームワークとして選択されたため、アプリケーションのレイアウトは一連のhtmlファイルとして保存され、必要に応じてロードされます。これにより、これらのファイルを構築するシステムをアプリケーションの異なるバージョン用にカスタマイズして簡単に実装できます。

例

HTMLファイル「myfile.html」に次のレイアウトがあることを想像してみましょう。

 <div> Blah blah blah <div>Main version</div> </div> 

また、アプリケーションのさまざまなバージョンでよくあることですが、バージョン「myversion」では、「Main version」というテキストではなく、「My version」というテキストが表示される必要がありました。 html-inheritanceでこれを行うには、2つの簡単な手順を実行する必要があります。

1.「bl-」で始まる属性をタグ付けするタグに追加します。

 <div> Blah blah blah <div bl-mytag>Main version</div> </div> 

2.親ファイル用のパッチを含むファイル「myfile.myversion.html」を作成します。

  <div bl-mytag="replace">Custom version</div> 

それだけです！ プロジェクトのビルド中、すべてのhtmlファイルはバージョンごとに指定されたフォルダーにきちんと折りたたまれます。

 dist
   |
  メイン/
      myfile.html
   myversion /
      myfile.html

これで、バージョンに応じてhtmlファイルをロードする場所をアプリケーションに指示するだけで十分で、すべてが単独で機能します！

設置

grunt-html-inheritanceをプロジェクトに追加するには、コマンドでnpmモジュールをインストールする必要があります

 npm install grunt-html-inheritance --save-dev 

またはpackage.jsonに依存関係を追加し、コマンドでGruntfile.jsにタスクをロードします

 grunt.loadNpmTasks('grunt-html-inheritance'); 

次のようにタスクを構成します。

 grunt.initConfig({ html_inheritance: { main: { files: { src: "**.html" //   }, options: { modules: ["version1", "version2"], //  dstDir: "../dist", //,       }, }, }, }); 

AngularJSアプリケーションでは、HTMLファイルのバージョンを簡単に切り替えるための重要な条件は、ディレクティブとルーティングでこれらのパスをハードコーディングする代わりに、ヘルパーを使用してテンプレートファイルへのパスを構築することです。

メリット

そのようなカスタマイズシステムの最も興味深い利点は、htmlファイルをコンパイルせずにプロジェクトのメインバージョンを使用できることです。bl属性はブラウザがソースファイルを表示するのを妨げないためです。 また、この方法を使用するには、テンプレートエンジンの新しい構文を学ぶ必要はありません。すべてのロジックは、すべての開発者に馴染みのある通常のhtml属性を使用して実装されます。

使用する

上記の例で説明したパッチのベースタグを置き換えることに加えて、次のモードも利用できます。

1. 削除 -パッチの親要素を削除します
2. 挿入 -要素のパッチに挿入しますが、要素のメインバージョンには挿入しません
3. 属性の変更 - 属性の削除と親要素への追加、クラスの削除と追加。

完全なドキュメントは、パッケージページまたはgithub リポジトリで入手できます 。 モジュールはテストでカバーされており、さらなる改善が必要です。 開発を手伝って、プルリクエストを送信してください。