Clever Geek Handbook

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 リポジトリで入手できます 。 モジュールはテストでカバーされており、さらなる改善が必要です。 開発を手伝って、プルリクエストを送信してください。


More articles:


All Articles