如何使用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.

UPDATE

我并不是真正地试图理解标记助手的工作方式-它们如何呈现，等等。我试图了解如何为这些属性选择值。例如，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?

UPDATE 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 ：

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


• 将其他JavaScript写入DOM，其中：
  
  

• A <meta> tag is added to the DOM that has a CSS class of sr-only.
• Additional JavaScript is written to the DOM, which:

1. 找到表示< meta> 元素的位置。


2. 检查所述元素是否具有CSS属性<$ c设置为绝对的$ c>位置。


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

1. Locates said <meta> element.
2. Checks whether said element has a CSS property position that is set to absolute.
3. If no such property value is set, an additional <link> element is written to the DOM with a href of ~/lib/bootstrap/dist/css/bootstrap.min.css.

LinkTagHelper 类针对您的< link> 元素在输出HTML中插入< meta> 元素，该元素的CSS类为 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 的值从< link> 的 asp-fallback-test-class 属性中获得。

Unsurprisingly, the value for FallbackTestClass is obtained from the <link>'s asp-fallback-test-class attribute.

在插入此元素之后，还会插入相应的< script> 块（源）。此类代码的开始如下：

Right after this element is inserted, a corresponding <script> block is also inserted (source). The code for that starts off like this:

// 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("\",");

这里有一些有趣的事情：

There are a few things of interest here:

• 注释的最后一行，表示占位符 {0} ， {1} 和 {2} 。


• FallbackJavaScriptResourceName


• FallbackTestProperty 和 FallbackTestValue ，这些属性分别从属性 asp-fallback-test-property 和 asp-fallback-test-value 获得。

• The last line of the comment, which refers to placeholders {0}, {1} and {2}.
• FallbackJavaScriptResourceName, which represents a JavaScript resource that is output into the HTML.
• FallbackTestProperty and FallbackTestValue, which are obtained from the attributes asp-fallback-test-property and asp-fallback-test-value respectively.

所以，让我们看一下JavaScript资源（源），可以归结为具有以下签名的功能：

So, let's have a look at that JavaScript resource (source), which boils down to a function with the following signature:

function loadFallbackStylesheet(cssTestPropertyName, cssTestPropertyValue, fallbackHrefs, extraAttributes)

将此与我先前提到的注释的最后一行以及<$的值相结合c $ c> asp-fallback-test-property 和 asp-fallback-test-value ，我们可以得出这样的调用：

Combining this with the last line of the comment I called out earlier and the values of asp-fallback-test-property and asp-fallback-test-value, we can reason that this is invoked like so:

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

我不会深入研究 fallbackHrefs 和 extraAttributes 参数应该是显而易见的，并且可以自己轻松浏览。

I won't dig into the fallbackHrefs and extraAttributes parameters as that should be somewhat obvious and easy to explore on your own.

loadFallbackStylesheet 的实现没什么大不了的-我鼓励您自己探索完整的实现。这是来自源的实际检查：

The implementation of loadFallbackStylesheet does not do a great deal - I encourage you to explore the full implementation on your own. Here's the actual check from the source:

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

脚本获取相关的 < meta> 元素（假定直接在< script> 本身之上），并简单地检查它是否具有排名设置为绝对。如果不是，则为每个后备URL将其他< link> 元素写入输出。

The script obtains the relevant <meta> element (it's assumed to be directly above the <script> itself) and simply checks that it has a property of position that is set to absolute. If it does not, additional <link> elements are written to the output for each fallback URL.

这篇关于如何使用ASP.NET Core的“ asp-fallback- *” CDN标签助手可以工作吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！