{x:expression(...)}做什么? [英] What does {x:expression(...)} do?
问题描述
我发现IE7的这个polyfill querySelectorAll
https://gist.github.com/connrs/2724353
我有以为我是Okayish的JavaScript,但我从来没有看到像polyfill第9行的引用部分:
{ x:expression(document .__ qsaels.push(this))}
显然,它是一个JavaScript对象与 x
和值表达式(文档.__ qsaels.push(this))
,但除此之外我知道对我来说是神秘的。这个表达式
的功能是什么?我不能通过谷歌找到任何东西。
您正在查看生成的CSS规则。这不是一个JavaScript对象,而是一个CSS声明块。
行
styleTag.styleSheet.cssText = selector +{x:expression(document .__ qsaels.push(this))};
将具有声明块的CSS选择器连接到CSS的字符串中。声明块包含一个名为 x
的虚拟CSS属性,值为 expression(document .__ qsaels.push(this))
什么 expression()
是,是一个非标准的功能IE的旧版本,允许作者直接执行任意JavaScript并获取在CSS中使用的值。所以当整个字符串是一个CSS声明块时, document .__ qsaels.push(this)
实际上是一个JavaScript表达式。
这个表达式是什么,将与CSS选择器匹配的任何元素推入 __ qsaels
数组中,以便polyfill可以将其作为由选择器匹配的元素集返回
作为具体示例,调用polyfilled 文档.querySelectorAll(。foo)
导致IE7将以下CSS附加到文档样式表中:
.foo {x:expression(document .__ qsaels.push(this))}
有些缩进和换行符,所以它类似于常规CSS:
.foo {
x:expression(document .__ qsaels.push(this) )
}
这里可以看到,这个CSS规则将适用于任何匹配的元素 .foo
,导致每个元素t在
sup> 1 无论什么原因,IE似乎很高兴执行 expression()
语句,即使在未知的属性(AFAIK也没有这样的属性称为 x
甚至在IE7上,但我知道什么?)
I came across this polyfill of querySelectorAll
for IE7:
https://gist.github.com/connrs/2724353
I had thought that I am Okayish in JavaScript, but I have never seen anything like the quoted part in line 9 of the polyfill:
{x:expression(document.__qsaels.push(this))}
Apparently, it is a JavaScript object with key x
and value expression(document.__qsaels.push(this))
, but other than this much I know, it is mysterious to me. What does this expression
function do? I was not able to find anything close via google.
You are looking at a generated CSS rule. This is not a JavaScript object, but a CSS declaration block.
The line
styleTag.styleSheet.cssText = selector + "{x:expression(document.__qsaels.push(this))}";
concatenates a CSS selector with a declaration block into a string of CSS. The declaration block contains a dummy CSS property called x
with a value of expression(document.__qsaels.push(this))
.
What expression()
is, is a non-standard feature of old versions of IE that allows the author to execute arbitrary JavaScript directly and obtain a value for use within CSS. So while the entire string is a CSS declaration block, document.__qsaels.push(this)
is in fact a JavaScript expression.
What this expression does, is push any element matching the CSS selector into the __qsaels
array so that the polyfill can return it as the set of elements matched by the selector.1 This, in essence, is how the polyfill works.
As a concrete example, calling the polyfilled document.querySelectorAll(".foo")
causes IE7 to append the following CSS to the document stylesheet:
.foo{x:expression(document.__qsaels.push(this))}
With some indentation and newlines so it resembles conventional CSS:
.foo {
x: expression(document.__qsaels.push(this))
}
Here you can see that this CSS rule will apply to any element that matches .foo
, causing each element to be added to __qsaels
before it is returned.
1 For whatever reason, IE seems happy to execute expression()
statements even on unknown properties (AFAIK there isn't such a property called x
even on IE7, but what do I know?).
这篇关于{x:expression(...)}做什么?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!