web-dev-qa-db-ja.com

ASP.NET Coreの「asp-fallback-*」CDNタグヘルパーはどのように機能しますか？

asp-fallback-*タグヘルパーが行います。私が理解していないのは、その方法です。

例えば：

<link rel="stylesheet"
      href="//ajax.aspnetcdn.com/ajax/bootstrap/3.3.5/css/bootstrap.min.css"
      asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
      asp-fallback-test-class="sr-only"
      asp-fallback-test-property="position"
      asp-fallback-test-value="absolute" />

これは、CDNからbootstrapをロードし、CDNがダウンしている場合はローカルコピーをロードします。

しかし、それをどのように決定するのでしょうか？私はそれがasp-fallback-test-class、asp-fallback-test-property、およびasp-fallback-test-value。しかし、これらの属性はどういう意味ですか？

CDNから他のライブラリを接続したい場合、それらに何かを提供する必要がありますが、何をそこに置くべきかわかりません。

動作中のこの例はたくさんありますが、これがどのように機能するかについての説明は見つかりません。

[〜＃〜] update [〜＃〜]
タグヘルパーの仕組み、レンダリング方法などを理解しようとはしていません。これらの属性の値を選択する方法を理解しようとしています。たとえば、jQueryフォールバックスクリプトには通常、asp-fallback-test="window.jQuery"これは理にかなっています-jQueryがロードされたかどうかを確認するテストです。しかし、上記で示したものはまったく異なります。どのようにそれらを選択しますか？他のCDN配信ライブラリを使用する場合、それらの属性の値を指定する必要があります...何を使用しますか？なぜそれらがブートストラップ用に選ばれたのですか？

更新2
フォールバックプロセス自体の仕組み、およびそれらのタグの記述方法を理解するには、@ KirkLarkinの回答を参照してください。これらのテスト値が使用された理由を理解するには、私の答えをご覧ください。

c#asp.net-corerazorasp.net-core-2.1asp.net-core-tag-helpers
13
lonix

TL; DR：

  • <meta>タグは、sr-onlyのCSSクラスを持つDOMに追加されます。
  • 追加のJavaScriptがDOMに書き込まれます。
    1. 指定された<meta>要素を見つけます。
    2. 上記の要素にpositionに設定されているCSSプロパティabsoluteがあるかどうかを確認します。
    3. そのようなプロパティ値が設定されていない場合、追加の<link>要素が~/lib/bootstrap/dist/css/bootstrap.min.cssのhrefとともにDOMに書き込まれます。

<link>要素に対して実行される LinkTagHelper クラスは、<meta>のCSSクラスが指定された出力HTMLにsr-only要素を挿入します。要素は次のようになります。

<meta name="x-stylesheet-fallback-test" content="" class="sr-only" />

要素を生成するコードは次のようになります（ソース）：

builder
    .AppendHtml("<meta name=\"x-stylesheet-fallback-test\" content=\"\" class=\"")
    .Append(FallbackTestClass)
    .AppendHtml("\" />");

当然、FallbackTestClassの値は<link>のasp-fallback-test-class属性から取得されます。

この要素が挿入された直後に、対応する<script>ブロックも挿入されます（ source ）。そのためのコードは次のように始まります。

// Build the <script /> tag that checks the effective style of <meta /> tag above and renders the extra
// <link /> tag to load the fallback stylesheet if the test CSS property value is found to be false,
// indicating that the primary stylesheet failed to load.
// GetEmbeddedJavaScript returns JavaScript to which we add '"{0}","{1}",{2});'
builder
    .AppendHtml("<script>")        
    .AppendHtml(JavaScriptResources.GetEmbeddedJavaScript(FallbackJavaScriptResourceName))
    .AppendHtml("\"")
    .AppendHtml(JavaScriptEncoder.Encode(FallbackTestProperty))
    .AppendHtml("\",\"")
    .AppendHtml(JavaScriptEncoder.Encode(FallbackTestValue))
    .AppendHtml("\",");

ここにはいくつか興味深いものがあります。

  • コメントの最後の行。プレースホルダー{0}、{1}および{2}を参照します。
  • FallbackJavaScriptResourceNameは、HTMLに出力されるJavaScriptリソースを表します。
  • FallbackTestPropertyおよびFallbackTestValueは、それぞれ属性asp-fallback-test-propertyおよびasp-fallback-test-valueから取得されます。

それでは、JavaScriptリソース（ source ）を見てみましょう。これは、次のシグネチャを持つ関数に要約されます。

function loadFallbackStylesheet(cssTestPropertyName, cssTestPropertyValue, fallbackHrefs, extraAttributes)

これを前に呼び出したコメントの最後の行とasp-fallback-test-propertyおよびasp-fallback-test-valueの値と組み合わせて、これが次のように呼び出されると推論できます。

loadFallbackStylesheet('position', 'absolute', ...)

fallbackHrefsパラメーターとextraAttributesパラメーターについては少し掘り下げませんが、それは多少自明であり、自分で簡単に探索できるはずです。

loadFallbackStylesheetの実装は大したことはしません-完全な実装を自分で調べることをお勧めします。ソースからの実際のチェックは次のとおりです。

if (metaStyle && metaStyle[cssTestPropertyName] !== cssTestPropertyValue) {
    for (i = 0; i < fallbackHrefs.length; i++) {
        doc.write('<link href="' + fallbackHrefs[i] + '" ' + extraAttributes + '/>');
    }
}

スクリプトは、関連する<meta>要素（<script>自体のすぐ上にあると想定）を取得し、positionに設定されたabsoluteのプロパティがあることを確認するだけです。 _。そうでない場合、追加の<link>要素が各フォールバックURLの出力に書き込まれます。

13
Kirk Larkin

わかりました。@ KirkLarkinの答えと常識を組み合わせることで、私は今それを手に入れたと思います。

sr-onlyは、非表示のmeta要素に適用されます。 bootstrap=がロードされると、その要素はposition:absoluteのc​​ss値を取得します。したがって、テストされ、そうであれば、Bootstrap =がロードされました。

そのため、どのライブラリでも、そのライブラリでしかできないことの良い例を選択し、それに応じて隠し<meta>タグをスタイルし、テストするCSSスタイルと期待する値を指定する必要があります。

Javscriptの場合、ライブラリ自体をテストするだけでよく、通常はwindowまたはDOMに何かが追加されたライブラリをテストできるため、さらに簡単です。したがって、jQueryの場合はwindow.jQueryであり、Bootstrapの場合はwindow.jQuery && window.jQuery.fn && window.jQuery.fn.modalなどとしてテストできます。

6
lonix