How to generate HTML from a tree's JSON array, using "ul" and "li" to build page elements. This article talks about this topic.

Then wrote the corresponding simulation data (JavaScript object)

Finally, I wrote a recursion and generated the tree structure of HTML. Originally written in JavaScript ES6, in order to indicate the data structure, here use TypeScript to write:

The effect is pretty good

Then the friend said that he didn’t understand it, okay, then I started from the beginning.

There are two ways to traverse tree data, as we all know: breadth traversal and deep traversal. In general, breadth traversal is implemented using queues, and deep traversal is just better for recursion.

The process of breadth traversal can be roughly understood from the diagram:

Prepare an empty queue;

Put the root (single or multiple roots) nodes into the queue;

Take a node from the queue

Processing (such as printing) this node

Check the child nodes of the node, if any, add them to the queue in turn

Go back to step 3 and start processing until the queue is empty (processing is complete)

Const node = queue.shift()! This is behind! The suffix indicates that the result is not undefined or null. This is a TypeScript syntax. Since .shift() returns undefined when there are no elements in the array, its return type is declared as INode | undefined, since the slave can guarantee that .shift() will return a node object, so use it here! The suffix ignores the undefined part of the type, causing the type of node to be derived as an INode.

A little harder to understand in the code is to pay attention to the content and length of the queue. If you want to use for instead of a while loop, the node number will change continuously due to .shift(), so the judgment of queue.length is wrong.

Deep traversal is a recursive process, and recursion has always been a difficult point of programming.

Recursion is a cyclic process that has two points to note:

Recursive call point, recursively call itself (or another may call its own function)

Recursive end point, exit the current function

Taking the tree node as an example, we expect the process to process (print) a tree node, printNode(node: INode). Then its

Recursive call point: If the node has child nodes, call printNode(children[i]) on the child nodes in turn.

Recursive end point: all child nodes are processed (the number of child nodes is limited, so it will end)

Describe this process with a pseudocode

The above two lines of code complete the recursion process, but in reality the situation is more complicated, because the entry and fault tolerance are handled.

Traversing has not finished

Both of the above traversals have been mentioned, but they haven't finished yet - because both traversals are based on printing, and our goal is to generate a DOM tree. The difference between generating a DOM tree and purely printed information is that we not only use node information, but also return the DOM from the node information.

This time we will talk about deep traversal, because recursion is easier to implement. Recursion itself has hierarchical information, and each time it enters a recursive call point, it goes deeper into one layer, and every time it leaves a recursive end point, it will be reduced by one layer. So the algorithm itself can retain the structure information, and the corresponding code will be easier to implement. And at the beginning of this article, it has already been realized.

One thing to note is that the code uses two functions to complete the recursive process:

makeNode handles a single node, it calls makeNodeList to process the list of child nodes

makeNodeList traverses the list of nodes and calls makeNode for processing

The mutual call between makeNode and makeNodeList forms recursion. The above two are recursive call points, and the recursive end points also have two:

The makeNodeList is not called when the node processed by makeNode has no children.

When the loop in makeNodeList ends, makeNode is no longer called

The process of breadth traversal is to flatten all nodes into a queue. This process is irreversible. In other words, we have lost the tree structure information during processing. Then we want to generate a DOM tree that requires structural information - so we need to attach structural information to each node. Here we bind the generated DOM to the data node, and the DOM saves the structure information. To do this, you need to modify the node type.

Although the local function expression makeUl is defined as described above when recursively traversing printNode, there is no recursion here, because makeUl does not call itself internally, or a function that calls makeUl.

But the problem is a little deeper, because the above code changes the original data. In general, we should try to avoid such side effects.

Extensive traversal generation node without side effects

Endlaunch Adapter

End Launch Adapter,Coax Connector Adapter,Wr28 Waveguide Adapter,End Launch Coaxial Adapter

Chengdu Zysen Technology Co., Ltd. , https://www.zysenmw.com