link元素
属性 描述asp-href-include
asp-href-exclude
asp-fallback-href 默认href加载失败时的备用地址
asp-fallback-href-include
asp-fallback-href-exclude
asp-fallback-test-class 判断加载失败时用到的class样式
asp-fallback-test-property 判断加载失败时用到的class样式中的属性
asp-fallback-test-value 判断加载失败时用到的class样式中的属性对应的值
asp-file-version
href 默认加载的css文件地址。
link的使用示例如下,比如我们定义如下代码:
<link href="https://ajax.aspnetcdn.com/ajax/bootstrap-touch-carousel/0.8.0/css/bootstrap-touch-carousel.css" asp-fallback-href="~/lib/bootstrap-touch-carousel/css/bootstrap-touch-carousel.css" asp-fallback-test-class="carousel-caption" asp-fallback-test-property="display" asp-fallback-test-value="none" />
则该段代码表示,默认先加载aspnetcdn.com上的css文件,如果加载失败了,再加载本地网站里的css文件,加载失败的判断条件是:检测carousel-caption样式十分应用上了,即该应用了该样式的元素的display属性是否等于none。运行网站后,这段代码的生成html如下:
<link href="https://ajax.aspnetcdn.com/ajax/bootstrap-touch-carousel/0.8.0/css/bootstrap-touch-carousel.css" /> <meta /> <script> !function (a, b, c) { var d, e = document, f = e.getElementsByTagName("SCRIPT"), g = f[f.length - 1].previousElementSibling, h = e.defaultView && e.defaultView.getComputedStyle ? e.defaultView.getComputedStyle(g) : g.currentStyle; if (h && h[a] !== b) { for (d = 0; d < c.length; d++) { e.write('<link href="' + c[d] + '"/>') } } }("display", "none", ["\/lib\/bootstrap-touch-carousel\/css\/bootstrap-touch-carousel.css"]); </script>
从中,我们看到,生成的HTML代码在link元素之后多了两个元素,一个是带有class="carousel-caption"属性的meta元素,一个是script脚本标签。其主要原理是如下:
在meta元素上应用定义的carousel-caption样式。通过JS代码检测该meta元素的display属性是否等于none。如果不等于none,重新加载本地的备用css文件。
注意,这里的js脚本是利用document.getElementsByTagName("SCRIPT"),获取最后一个SCRIPT标签的上一个兄弟元素的形式,来获取meta元素的。
script元素
属性 描述asp-src-include
asp-src-exclude
asp-fallback-src 备用js文件地址
asp-fallback-src-include
asp-fallback-src-exclude
asp-fallback-test 判断默认js文件是否加载成功用到的对象
asp-file-version
src 默认的js文件地址。
script标签元素的fallback功能,和link元素记载css文件类型,只不过这里判断的不是class样式,而是检测某个对象是否存在,来判断默认的js文件是否加载成功,示例如下:
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.10.2.min.js" asp-fallback-src="~/lib/jquery/jquery.min.js" asp-fallback-test="window.jQuery"> </script>
生成后的HTML代码,相对比较简单,示例如下:
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.10.2.min.js"> </script> <script>(window.jQuery||document.write("<script src=https://www.jb51.net/article/\"\/lib\/jquery\/jquery.min.js\"><\/script>"));</script>
多生成了一个script标签元素,然后判断jQuery对象是否存在,如果不存在则表示加载失败,那就再加载本地的备用js文件。
Cache
属性 描述vary-by
vary-by-header
vary-by-query
vary-by-route
vary-by-cookie
vary-by-user
expires-on
expires-after
expires-sliding
priority
enabled .
利用EnvironmentTagHelper来控制不同运行环境的输出结果