c# - 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上连接其他库，则需要为它们提供一些东西，但是我不确定该放在哪里。

实际中有很多示例，但是我找不到有关其工作原理的解释。

更新
我并不是真的想了解标签助手的工作方式-它们如何呈现等等。我试图了解如何为这些属性选择值。例如，jQuery后备脚本通常具有合理的asp-fallback-test="window.jQuery"-这是一项测试以查看jQuery是否已加载。但是我上面显示的内容却大不相同。如何选择它们？如果我想使用其他CDN交付的库，则需要为这些属性指定值...我将使用什么？为什么选择那些作为 bootstrap ？

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

最佳答案

TL； DR :

将<meta>标记添加到具有sr-only CSS类的DOM中。

将其他JavaScript写入DOM，该DOM:

找到所说的<meta>元素。

检查所述元素是否具有设置为position的CSS属性absolute。

如果未设置此类属性值，则会使用<link>的href将附加的~/lib/bootstrap/dist/css/bootstrap.min.css元素写入DOM。

针对您的LinkTagHelper元素运行的 <link> 类在输出HTML中插入<meta>元素，该元素具有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>块(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属性。如果不是，则将每个备用URL的其他<link>元素写入输出。

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