Question

我正在尝试理解我在Masonry中找到（并实际使用）的以下JavaScript代码：

var docElem = document.documentElement;
var transitionProp = typeof docElem.style.transition == 'string' ?
    'transition' : 'WebkitTransition';
var transitionEndEvent = {
  WebkitTransition: 'webkitTransitionEnd',
  transition: 'transitionend'
}[ transitionProp ];

表达式{} []是否意味着，transitionProp变量被添加到transitionEndEvent对象中？而且，docElem.style.transition的Expression类型是否可以找出是否支持css转换？

感谢您的帮助！

Answer 1

它正在返回该对象的特定元素。

例如：

var obj = { key: 'value' };
var val = obj['key']);

可缩短为：

var val = { key: 'value' }['key'];

（显然在这种情况下它没有意义，但它说明了正在发生的事情。）

Answer 2

最初的两行，

var docElem = document.documentElement;
var transitionProp = typeof docElem.style.transition == 'string' ?
    'transition' : 'WebkitTransition';

会将值transition或WebkitTransition分配给transitionProp。

然后您创建一个对象并使用[transitionProp]，它更像transitionProp内['transition'/'WebkitTransition']的值。

var transitionEndEventObj = {
  WebkitTransition: 'webkitTransitionEnd',
  transition: 'transitionend'
};
var transitionEndEvent = transitionEndEventObj[ transitionProp ];

在其他方面，它看起来像这样

var transitionEndEvent = transitionEndEventObj[ 'transition'];

或

var transitionEndEvent = transitionEndEventObj['WebkitTransition'];

Answer 3

此处transitionEndEvent将包含：

'webkitTransitionEnd'如果transitionProp == 'WebkitTransition'或

如果'transitionend'

，请

transitionProp == 'transition'

Answer 4

要向JSON添加一些属性，我们使用

object["property"] = value;

因此编写代码中的上述行以从对象访问属性名称transitionProp。

因此变量transitionEndEvent将保存transitionProp属性的值。

var transitionEndEvent = {
  WebkitTransition: 'webkitTransitionEnd',
  transition: 'transitionend'
}[ transitionProp ];

这个JavaScript对象数组表达式{} []是什么意思？

4 个答案: