What Does A Line Beginning With A Dot Mean?

I was reading through the Crafty tutorial and came across a code snippet that I can't find documentation for. It is so hard to search for punctuation. The lines in question, 11 and

Solution 1:

A line starting with a . is simply a function/property being called on the previous function/line's object.

---

In your specific case,

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

.text("Loading") is just a function call on the result of Crafty.e(...).

Similarly, .css({ "text-align": "center" }) is simply a function call on the result of the previous line's .text("Loading").

Because it's in the same line, the .attr(...) call isn't outwardly visible, but it is the exact same things as the others in their own lines.

---

In expanded terms, the sample above is the same as doing this:

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

---

As others have stated, this is simply a method of chaining calls to the same object - however, be aware(!) that this isn't always possible in all programming languages. jQuery and many other JavaScript framework/libraries have taken this approach to make development easier/smoother, therefore, it is widespread in JavaScript development.

In JavaScript specifically, the real statement termination is a ; (semicolon). What this means is that a single statement can span several lines.

Solution 2:

The author of this code is probably just trying to make it more readable. The . at the beginning of the line simply continues the previous line.

So this...

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

...is the same as having it all on one line:

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

The semi-colon at the end of the line terminates the statement.

However, by writing it the way the author did, it is easier to see that you're taking the results from the attr function and feeding it into the text function, and those results finally into the css function. Well...easier for me to read anyway. Readability can be very subjective.

This is called function chaining, and is described with some examples in this blog post.

Solution 3:

They're basically continuations of the previous lines. So lines 11 and 12 are essentially the same as: Crafty.e("2D, DOM, Text").attr({ w: 100, h: 20, x: 150, y: 120 }).text("Loading").css({ "text-align": "center" });

The text method is being applied to the result of the .atr function.

Solution 4:

It's just a continuation of the previous line. In one line, it's:

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

It's called "Chaining", where the previous function invocation returns an interface (usually an object) that contains functions. Instead of storing them intermediately or calling them one by one, you just "chain" the next call since the previous invocation is as good as what it returned.

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

Solution 5:

Just to add to these previous answers - your specific question was "where is this in the API?" If you look at the method signatures in the API, you will see that each of these methods returns a reference to 'this'. E.g. :

public this .attr(String property, * value)

Therefore, you can "chain" together calls (as other commenters have suggested) because the object reference is being returned. E.g.

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

is the same as

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