Question

我正在阅读Crafty tutorial并看到了一个我无法找到文档的代码段。搜索标点符号非常困难。

有问题的行11和12遵循Crafty.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");

这在规范中会在哪里？

Answer 1

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

在您的具体情况下，

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中，真实语句终止是;（分号）。这意味着单个语句可以跨越多行。

Answer 2

此代码的作者可能只是想让它更具可读性。该行开头的.只是继续前一行。

所以这......

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函数。那么......对我来说更容易无论如何阅读。可读性可能非常主观。

这称为函数链，在this blog post中用一些例子描述。

Answer 3

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

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" });

//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" });

Answer 4

它们基本上是前几行的延续。因此，第11和第12行基本上与以下相同： Crafty.e（“2D，DOM，Text”）。attr（{w：100，h：20，x：150，y：120}）。text（“Loading”）。css（{“text-align”： “中心”}）;

文本方法正在应用于.atr函数的结果。

Answer 5

只是为了添加这些以前的答案 - 您的具体问题是“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" });

Answer 6

它基本上是链接方法。阅读更多here

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

Answer 7

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

以点开头的行是什么意思？

7 个答案: