{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.¹ 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.

---

¹ _{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屋！