ASP.NET Core 的“asp-fallback-*"是如何实现的CDN 标签助手有用吗? [英] How do ASP.NET Core's "asp-fallback-*" CDN tag helpers work?
问题描述
我了解 asp-fallback-* 标签助手的作用.我不明白的是如何.
I understand what the asp-fallback-* tag helpers do. What I don't understand is how.
例如:
<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 加载引导程序，并在 CDN 关闭时加载本地副本.
This loads bootstrap from the CDN, and loads the local copy if the CDN is down.
但是它是如何决定这样做的呢?我假设它检查 asp-fallback-test-class、asp-fallback-test-property 和 asp-fallback-test-value.但这些属性是什么意思?
But how does it decide to do that? I assume it checks asp-fallback-test-class, asp-fallback-test-property, and asp-fallback-test-value. But what do those attributes mean?
如果我想从 CDN 连接其他一些库，我需要为它们提供一些东西，但我不知道该放什么.
If I want to hook up some other library off a CDN, I'll need to supply something for those, but I'm not sure what to put there.
有很多这样的例子，但我找不到关于它是如何工作的解释.
There are lots of examples of this in action, but I can't find explanations about how this works.
更新
我并不是真的想了解标签助手是如何工作的——它们是如何呈现的，等等.我试图了解如何为这些属性选择值.例如，jQuery 回退脚本通常具有 asp-fallback-test="window.jQuery" 这很有意义 - 这是一个测试，看看 jQuery 是否已加载.但是我上面展示的那些是完全不同的.人们如何选择它们?如果我想使用其他一些 CDN 交付的库，我需要为这些属性指定值……我会使用什么?为什么选择这些作为引导程序?
UPDATE
I'm not really trying to understand how the tag helpers work - how they render, and so on. I'm trying to understand how to choose values for those attributes. For example, the jQuery fallback script usually has asp-fallback-test="window.jQuery" which makes sense - it's a test to see if jQuery has loaded. But the ones I've shown above are quite different. How does one choose them? If I want to use some other CDN delivered library, I'll need to specify values for those attributes... what would I use? Why were those ones chosen for bootstrap?
更新 2
要了解回退过程本身的工作原理以及这些标签的编写方式，请参阅@KirkLarkin 的回答.要了解为什么使用这些测试值，请参阅我的回答.
UPDATE 2
To understand how the fallback process itself works, and how those tags are written, see @KirkLarkin's answer. To understand why those test values were used, see my answer.
推荐答案
TL;DR:
- 一个
标签被添加到具有sr-only的 CSS 类的 DOM 中. - 额外的 JavaScript 被写入 DOM，其中:
- A
<meta>tag is added to the DOM that has a CSS class ofsr-only. - Additional JavaScript is written to the DOM, which:
- 定位所述
元素. - 检查所述元素是否具有设置为
absolute的 CSS 属性position. - 如果没有设置这样的属性值，一个额外的
元素被写入到 DOM 中，href为~/lib/bootstrap/dist/css/bootstrap.min.css.
- Locates said
<meta>element. - Checks whether said element has a CSS property
positionthat is set toabsolute. - If no such property value is set, an additional
<link>element is written to the DOM with ahrefof~/lib/bootstrap/dist/css/bootstrap.min.css.
针对您的 类在给定 CSS 类的输出 HTML 中插入一个 元素运行的 LinkTagHelper 元素sr-only.元素最终看起来像这样:
The LinkTagHelper class that runs against your <link> elements inserts a <meta> element in the output HTML that is given a CSS class of sr-only. The element ends up looking like this:
<meta name="x-stylesheet-fallback-test" content="" class="sr-only" />
生成元素的代码如下(来源):
The code that generates the element looks like this (source):
builder
.AppendHtml("<meta name="x-stylesheet-fallback-test" content="" class="")
.Append(FallbackTestClass)
.AppendHtml("" />");
不出所料，FallbackTestClass 的值是从 的 asp-fallback-test-class 属性获得的.
Unsurprisingly, the value for FallbackTestClass is obtained from the <link>'s asp-fallback-test-class attribute.
在插入这个元素之后，相应的
