logo标签列表

以点号开头的行表示什么？

javascript
4
我正在阅读Crafty教程，看到了一段代码片段，但找不到相关文档。搜索标点符号真的很困难。
问题所在的第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");

这个应该在规范的哪个部分？
1
Lol - 很多快速的答案。 - Dave
它被称为流畅接口，如果你熟悉PHP，那么有几个ORM框架使用它。 - kirugan
感谢大家提供的精彩解释。现在我感到有些愚蠢了。当然，点号是一个运算符，因此可以在其周围加上空格。 - Jeff Strunk
@JeffStrunk 不必感到愚蠢 - 这种事情在我们的生命中某个时候甚至多次发生，每个人都会遇到。 - Jesse
7个回答
5
一行以.开头的代码，表示该函数/属性在上一行代码所调用的对象上执行。
在您的特定情况下，
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中，真正的语句终止符是分号;。这意味着一个单独的语句可以跨越多行。

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 函数中。嗯……至少对我来说更容易阅读。可读性很主观。

这被称为函数链接，在这篇博客文章中用一些示例进行了描述。

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

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

它们基本上是前面行的延续。因此，第11行和第12行基本上与以下代码相同：

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

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

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

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

它只是列为新行以更清晰地呈现，但实际上你只是一个接一个地调用这些方法。

0

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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接