以点开头的线是什么意思？答案

【问题标题】：What does a line beginning with a dot mean?以点开头的线是什么意思？
【发布时间】：2014-11-22 01:27:53
【问题描述】：

我在阅读Crafty tutorial 时遇到了一个我找不到文档的代码 sn-p。标点符号太难找了。

有问题的第 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");

这在规范中的什么地方？

【问题讨论】：

大声笑 - 很多快速的答案。
它被称为fluent interface，如果你熟悉php，有几个ORM框架都在使用它。
感谢大家的精彩解释。我现在觉得很傻。当然，点是一个运算符，因此可以有空格围绕它。
@JeffStrunk 不必觉得自己很愚蠢——这种事情在我们所有人身上都会时不时发生，甚至在我们的一生中会发生好几次。

标签： javascript

【解决方案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 中，real 语句的终止符是 ;（分号）。这意味着单个语句可以跨越多行。

【讨论】：

【解决方案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 函数中，最后将这些结果输入到 @987654327 @ 功能。嗯...更容易对我反正阅读。可读性可能非常主观。

这称为函数链接，在this blog post 中通过一些示例进行了描述。

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

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

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

【讨论】：

【解决方案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" });

【讨论】：

【解决方案6】：

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

只是为了更清楚而将其列为新行，但您基本上只是一个接一个地调用这些方法。

【讨论】：

【解决方案7】：

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

【讨论】：