4

我正在阅读Crafty 教程，遇到了一个我找不到文档的代码片段。搜索标点符号太难了。

有问题的第 11 行和第 12 行遵循该行并以andCrafty.e开头。这些属性属于什么对象？.text.css

//the loading screen that will display while our assets load
Crafty.scene("loading", function () {
    //load takes an array of assets and a callback when complete
    Crafty.load(["sprite.png"], function () {
        Crafty.scene("main"); //when everything is loaded, run the main scene
    });

    //black background with some loading text
    Crafty.background("#000");
    Crafty.e("2D, DOM, Text").attr({ w: 100, h: 20, x: 150, y: 120 })
            .text("Loading")
            .css({ "text-align": "center" });
});

//automatically play the loading scene
Crafty.scene("loading");

这将在规范中的什么位置？

4

7 回答 7

5

以 a 开头的行.只是在前一个函数/行的对象上调用的函数/属性。

在您的具体情况下，

Crafty.e("2D, DOM, Text").attr({ w: 100, h: 20, x: 150, y: 120 })
      .text("Loading")
      .css({ "text-align": "center" });

.text("Loading")只是对结果的函数调用Crafty.e(...)。

类似地，.css({ "text-align": "center" })只是对前一行的结果的函数调用.text("Loading")。

因为它在同一条线路中，所以.attr(...)呼叫是不可见的，但它与其他线路中的其他呼叫完全相同。

在扩展方面，上面的示例与执行此操作相同：

var eResult = Crafty.e("2D, DOM, Text");
var attrResult = eResult.attr({ w: 100, h: 20, x: 150, y: 120 });
var textResult = attrResult.text("Loading");
var cssResult = textResult.css({ "text-align": "center" });

正如其他人所说，这只是一种链接对同一对象的调用的方法 - 但是，请注意（！）这在所有编程语言中并不总是可行的。jQuery 和许多其他 JavaScript 框架/库都采用这种方法来使开发更容易/更顺畅，因此它在 JavaScript 开发中很普遍。

特别是在 JavaScript 中，真正的语句终止是;（分号）。这意味着单个语句可以跨越多行。

于 2013-04-22T02:50:34.943 回答
4

这段代码的作者可能只是想让它更具可读性。行首.的 只是延续上一行。

所以这...

Crafty.e("2D, DOM, Text").attr({ w: 100, h: 20, x: 150, y: 120 })
            .text("Loading")
            .css({ "text-align": "center" });

...与将所有内容集中在一行中相同：

Crafty.e("2D, DOM, Text").attr({ w: 100, h: 20, x: 150, y: 120 }).text("Loading").css({ "text-align": "center" });

行尾的分号终止语句。

但是，通过按照作者的方式编写它，更容易看出您正在从attr函数中获取结果并将其输入到text函数中，然后这些结果最终输入到css函数中。嗯...无论如何我更容易阅读。可读性可能是非常主观的。

这称为函数链接，并在此博客文章中通过一些示例进行了描述。

于 2013-04-22T02:49:31.973 回答
2

只是添加到这些先前的答案 - 您的具体问题是“这在 API 中的什么位置？” 如果您查看 API 中的方法签名，您将看到这些方法中的每一个都返回对“this”的引用。例如：

public this .attr(String property, * value)

因此，您可以将调用“链接”在一起（正如其他评论者所建议的那样），因为正在返回对象引用。例如

Crafty.e("2D, DOM, Text").attr({ w: 100, h: 20, x: 150, y: 120 }).text("Loading").css({ "text-align": "center" });

是相同的

var myEntity = Crafty.e("2D, DOM, Text");
myEntity.attr({ w: 100, h: 20, x: 150, y: 120 });
myEntity.text("Loading");
myEntity.css({ "text-align": "center" });
于 2013-04-22T02:57:35.550 回答
2

这只是上一行的延续。在一行中，它是：

Crafty.e("2D, DOM, Text").attr({ w: 100, h: 20, x: 150, y: 120 }).text("Loading").css({ "text-align": "center" });

它被称为“Chaining”，前面的函数调用返回一个包含函数的接口（通常是一个对象）。无需中间存储它们或逐个调用它们，您只需“链接”下一个调用，因为上一次调用与它返回的一样好。

Crafty.e("2D, DOM, Text")
      .attr({ w: 100, h: 20, x: 150, y: 120 })
      .text("Loading") 
      .css({ "text-align": "center" });

//synonymous to

var eReturn = Crafty.e("2D, DOM, Text");
var aReturn = eReturn.attr({ w: 100, h: 20, x: 150, y: 120 });
var tReturn = aReturn.text("Loading");

tReturn.css({ "text-align": "center" });
于 2013-04-22T02:48:57.627 回答
2

它们基本上是前几行的延续。所以第 11 行和第 12 行本质上是一样的： Crafty.e("2D, DOM, Text").attr({ w: 100, h: 20, x: 150, y: 120 }).text("Loading" ).css({ "text-align": "center" });

text 方法被应用于 .atr 函数的结果。

于 2013-04-22T02:50:30.793 回答
0

这些不是新的代码行，它们是“Crafty.e”的延续

于 2013-04-22T02:52:10.293 回答
0

它基本上是链接方法。在这里阅读更多

它只是作为一个新行列出来更清楚，但你基本上只是一个接一个地调用这些方法。

于 2013-04-22T02:49:16.690 回答