我了解 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 连接一些其他库，我需要为它们提供一些东西，但我不确定放什么。

有很多这样的例子，但我找不到关于它是如何工作的解释。

更新
我并不是真的想了解标签助手是如何工作的——它们是如何呈现的，等等。我试图了解如何为这些属性选择值。例如，jQuery 后备脚本通常有 asp-fallback-test="window.jQuery"，这是有道理的 - 这是一个测试，看看 jQuery 是否已加载。但是我上面展示的那些是完全不同的。如何选择它们？如果我想使用其他一些 CDN 交付的库，我需要为这些属性指定值……我会使用什么？为什么选择这些用于 Bootstrap ？

更新 2
要了解回退过程本身是如何工作的，以及这些标签是如何编写的，请参阅@KirkLarkin 的回答。要了解为什么使用这些测试值，请参阅我的回答。

更新 3
在 bootstrap 5 sr-only 类重命名为 visually-hidden。

最佳答案

长话短说:

• A <meta>标记被添加到具有 sr-only CSS 类的 DOM .
• 将其他 JavaScript 写入 DOM，其中:
  1. 定位说<meta>元素。
  2. 检查所述元素是否具有 CSS 属性 position设置为 absolute .
  3. 如果没有设置这样的属性值，附加 <link>元素以 href 写入 DOM的 ~/lib/bootstrap/dist/css/bootstrap.min.css .

LinkTagHelper 针对您的 <link> 运行的类elements 插入一个 <meta>输出 HTML 中的元素，其 CSS 类为 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> block 也被插入(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 的输出。

关于c# - ASP.NET Core 的 "asp-fallback-*"CDN 标签助手如何工作？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51363291/