变量在transit.js中不起作用

Question

我使用的是transit.js，我有以下代码行：

var axis = Math.floor(Math.random() * 2);
axis = genXY(axis);

if($(this).hasClass(btn_className)) {       
    $(this).transition({ axis : '100px' } , function(){
        $(this).addClass('active');
        $(this).transition({ axis :  0 , duration : 2000 });
    })  

} 

genXY函数如下：

var xy = ['x' , 'y'];

function genXY(no) {
    return xy[no];
}

现在，我对单个元素(在我的devTools中)运行了下面的简单测试：

var axis = x;
$('.gridbox .large').eq(2).transition({ x : "100px" });

上面的代码行工作得很好，即它通过100px转换元素，但是现在如果我用轴替换x，它实际上是一个变量，实际上是x，现在代码如下所示：

var axis = x;
$('.gridbox .large').eq(2).transition({ axis : "100px" });

上面的线不起作用。为什么现在起作用了？毕竟轴本身就是x，有人能解释吗？

Answer 1

实际上，您正在为一个不能这样做的对象设置一个键：

var axis = x;
$('.gridbox .large').eq(2)
             .transition({ axis : "100px" }); // <----see the object { axis : "100px" }

如果您尝试将var名称替换为对象文本中的键，则不引用它的值，但它在对象中设置了一个新的key:value。在ES5和更早版本中，不能将变量用作对象文本中的属性名。

那么，我们能做的是：

var obj   = {}, // a new object creation
    axis  = x;  // a reference to the x

obj[axis] = '100px'; // now it results in {x:"100px"}

$('.gridbox .large').eq(2)
             .transition(obj); // <---put the object here

Answer 2

这两行表示相同的内容(引号是可选的)：

var obj = { x: '100px' };
var obj = { 'x': '100px' };

因此，在下面的行中，您并没有真正使用变量，而是定义了x的属性名。

$('.gridbox .large').eq(2).transition({ x : "100px" });

要解决问题，可以定义一个空对象并向其添加一个动态属性名，然后将该对象作为参数传递。

var axis = 'x';
var obj = {};
obj[ axis ] = '100px';
$('.gridbox .large').eq(2).transition(obj);

还要注意，必须使用[]语法来添加变量(动态)属性名，而不是点语法。下面的示例将添加一个名为axis的属性，而不是x。

obj.axis = '100px';

Answer 3

ECMAScript是JavaScript实现的语言的规范。

如果您查看ECMAScript标准的第5版的"11.1.5对象初始化器“部分，它将定义用于创建对象的对象字面语法。

让我们看看{ axis: "100px" }是如何根据规范计算的：

ObjectLiteral => { PropertyNameAndValueList } => { PropertyName : AssignmentExpression } => { IdentifierName : AssignmentExpression }

对于IdentifierName，它声明：“返回包含与IdentifierName相同的字符序列的字符串值”。换句话说，{ axis: "100px" }与{ "axis": "100px" }相同，而{ "axis": "100px" }与{ x: "100px" }和{ "x": "100px" }不一样。换句话说，对象文字中的未引号属性名成为名称的字符串版本，而不是变量值。这就是为什么不能用{ x: "100px" }代替{ axis: "100px" }的原因，因为它们是不一样的。

有人建议您使用以下代码：

var axis = "x";
var obj = {};
obj[ axis ] = "100px";

这使得使用'axis‘的变量值，因为obj[axis] = "100px"与obj["x"] = "100px"相同，后者与{ x: "100px" }和{ "x": "100px" }相同。