How do I read this javascript diagram? - Stack Overflow

admin管理员组

文章数量:1243170

I'm currently reading Javascript: The Good Parts and I'm having trouble understanding their "grammar" diagrams.

The first one is Whitespace

I'm not quite sure how to read it, perhaps some code will help me understand?

Thanks for the help in advanced guys.

I'm currently reading Javascript: The Good Parts and I'm having trouble understanding their "grammar" diagrams.

The first one is Whitespace

I'm not quite sure how to read it, perhaps some code will help me understand?

Thanks for the help in advanced guys.

• javascript

Share Improve this question Follow edited Oct 8, 2012 at 4:27 James Sumners 14.8k1111 gold badges6161 silver badges7777 bronze badges asked Oct 8, 2012 at 4:03 RufioLJRufioLJ 43711 gold badge77 silver badges1212 bronze badges 7

• 3 Basically, spaces, tabs, and new line characters are all considered whitespace, as well as any ments. – Brad Commented Oct 8, 2012 at 4:05
• I was having trouble trying to figure out what the ment syntax had to do with the white space, but it makes sense now with Brad's answer. – Fabrício Matté Commented Oct 8, 2012 at 4:08
• I kinda understand now. But what about the structure? Still kinda confusing with the next section examples :/ Should I skip the grammar chapter and go with objects? – RufioLJ Commented Oct 8, 2012 at 4:12
• 3 "Follow the tracks". A train can only move the "smooth way" around a corner. If there is a split in the track, both tracks must be followed - the train must clone itself, with each clone going down a separate track. If a train runs into a condition that is not met then the train must explode. – user166390 Commented Oct 8, 2012 at 4:15
• 1 "The rules for interpreting these diagrams are simple: You start on the left edge and follow the tracks to the right edge. As you go, you will encounter literals in ovals, and rules or descriptions in rectangles. Any sequence that can be made by following the tracks is legal. Any sequence that cannot be made by following the tracks is not legal. Railroad diagrams with one bar at each end allow whitespace to be inserted between any pair of tokens. Railroad diagrams with two bars at each end do not." – j08691 Commented Oct 8, 2012 at 4:18

 |  Show 2 more ments

5 Answers 5

Sorted by: Reset to default 8

Start at the left-most || and continue right. The first bar down (Immediately next to your start point) cannot be followed because the curve does not originate from the left (The direction you are traveling.) If you look at where it es from, it should be easy to tell it represents a while loop:

while (!EOF) {} // While there's still text to parse

The second line can be followed because the curve originates from the left (Following your current directory.) This line represents this if-else statement:

if (char == '/') {}       // Forward slash
else if (char == '\n') {} // Line end
else if (char == '\t') {} // Tab
else if (char == ' ') {}  // Space

Space, tab and end line both both end the function and either return or continue immediately. However, if the character is a Forward Slash, it needs to check whether it's single line (//) or multiline (/* */):

*char++;                 // Move to next character
if (char == '*') {}      // Multi line
else if (char == '/') {} // Single line

If it's a single line it reads until the end of the line and continues. If it is a multiline it reads in a similar manner until it finds '*' followed by '/' and then continues.

The left side double bar ("||") can be viewed as the "input" of a function and the right double bar as the "output". So, in this case, a character or line is the input, and the paths between the double bars are the tests. If the character/line is considered "white space" by any of the tests, the output of the function will be "true", otherwise it will be "false."

In particular, let's say you follow the fourth path. On this path you will first encounter a "/", subsequently followed by another "/", followed by any other character until the EOL character. In this case, if the line of code is "// an example", then the output will be true.

Think about it as if you are the parser or the language, and you need a set of rules to understand the input stream of characters.

By thinking how the parser does, you can understand exactly what constitues the tokens of the JavaScript language.

The grammar diagram you refer to was widely used to document the Pascal syntax. It is basically the flow chart of how the source code is parsed. Each "chunk" of the chart, in your example, 'whitespace', is like a function call. Technically we are talking about a recursive descent parser.

So my way of thinking about it is:

The parser gets a character from the input stream. So we go and "try" the whitespace function, if that character is a space, tab, line end or '/' character we go to the next step, if not we exit with a 'not found' return value.

If it was a '/' then we get the next character. If it is another '/' then we read characters until we get an line end and then exit with the 'found' return value.

If the next character is a '' then we look read anything that is not a '/' or ''. etc ...

Basically the flow is from left to right, but when a line loops back to the left we have a repeat. The neat thing about these diagrams is that once you get the hang of it, it is easy to quickly write syntactically correct code. AND you can rather easily code up the recursive descent parser by following the 'flow chart'.

(refer to this answer)

To learn to how to read railroad diagram, you need understand the difference of the graph in these three situations:

zero or more, zero or one, one or more.

To understand their differences (as the following picture shows), the point is "You start on the left edge and follow the tracks to the right edge." So imagine you are the train, you just turn right, cannot turn left.

the above picture created by https://www.bottlecaps.de/rr/ In the "Edit Grammar" tab, input the following grammar:

zeroormore ::= element*
zeroorone ::= element?
oneormore ::= element+

本文标签： How do I read this javascript diagramStack Overflow