Geek Answers Handbook

What does a line starting with a point mean?

I read the Craftful tutorial and came across a piece of code that I cannot find for documentation. Hard to find punctuation.

The lines in question, 11 and 12, follow the line Crafty.e and begin with .text and .css . What objects do these properties belong to?

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

Where will it be indicated in the specification?

+4
source share
7 answers

A line starting with . , is just a function / property called by the previous function / line object.

In your particular 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 for the result of Crafty.e(...) .

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

Since it is on the same line, the call to .attr(...) not externally visible, but it is the same as the others in its lines.

In extended expressions, the above example matches 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 argued, this is simply a method of chaining calls to the same object, however, remember (!) That this is not always possible in all programming languages. jQuery and many other JavaScript platforms / libraries used this approach to make development easier / smoother, which is why it is widespread in JavaScript development.

In JavaScript, specifically, the statement real is ; (semicolon). This means that a single statement can span multiple lines.

+5
source

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

So this is ...

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

... the same as everything on the same line:

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

The half-column at the end of the line completes the statement.

However, having written it in the way the author did, it is easier to see that you accept the results from the attr function and pass it to the text function, and these results finally fall into the css function. Well ... easier for me to read anyway. Readability can be very subjective.

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

+4
source

This is just a continuation of the previous line. In one line, this:

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

It is called "Chaining", where a previous function call returns an interface (usually an object) that contains functions. Instead of storing them in between or calling them one by one, you simply “catch” the next call, since the previous call is just as good as it is.

 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
source

They are mainly a continuation 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 ("Download"). Css ({"text-align": "center"});

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

+2
source

To add to these previous answers, your specific question was “where is it 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'. For instance.

 public this .attr(String property, * value)

This way you can “hook” calls together (as suggested by other commentators), because the reference to the object is returned. For instance.

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

coincides with

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

These are basically chaining methods. More here

It only displays as a new line, to be more clear, but you basically just call these methods one by one.

0
source

these are not new lines of code, they are a continuation of "Crafty.e"

0
source

More articles:


All Articles