Explore the Vue source code above : mustache template engine (6) write Scanner scanning class to process string segmentation according to the format. We started the code writing for the template engine to convert strings to tokens.
We use Scanner to split the content according to curly braces. Now we continue to study tokens conversion.
We open the project we created before
and create a file called formConversToken.js in the src directory.
We will do this format conversion in this folder
. Then we will export a function to this file by default.
export default function formConversToken() {
}
Then we go to index.js under src to import this file
and then we change index.js to this
import formConversToken from "./formConversToken";
window.GrManagData = {
render(templateStr,data) {
let tokens = formConversToken(templateStr);
console.log(tokens);
}
}
We don’t need the content written in render above because it’s just for writing the Scanner class for testing
Then we introduce Scanner to formConversToken.js under src, it is useful,
and then we directly write the formConversToken function code as follows
export default function formConversToken(templateStr) {
let tokens = [];
let scanner = new Scanner(templateStr);
while(scanner.pos != templateStr.length) {
let text = scanner.scanUtil("{
{");
tokens.push(["text",text]);
scanner.scan("{
{");
let name = scanner.scanUtil("}}");
tokens.push(["name",name]);
scanner.scan("}}");
}
return tokens;
}
Here we define an array called tokens
and then add the loop condition we filtered above.
If the templateStr template string has not been processed, keep going. Then first
filter out the content from the beginning to {
{. This content is text text type
, and then
filter out from { { to }} called name
. Because the curly braces are all fields in the data we use.
We need to take this content out and
loop until the entire template string content is processed.
After the loop is over, return the tokens array we stored and run.
The result is as follows
Our tokens here are processed
It looks amazing, but the function is actually very weak.
Now ours can withstand one-dimensional arrays.
If we use two-dimensional arrays, it will be useless.
We will change the content of templateStr in index.html to this
let templateStr = `
<div>
{
{#students}}
<ul>
<li>{
{ item.name }}</li>
</ul>
{
{/students}}
</div>
`;
Let's run it again
, it looks okay, but it's still a bit messy
, and we still made a one-dimensional array
Normally, our loop structure must have internal nesting. For example, a loop structure here is a two-dimensional array. We will
continue to talk about array nesting in the next article.
This time we will first solve this # and /.
Here we find formConversToken.js under src
and see tokens.push(["name",name]);
we change this position to
if(name) {
if(name[0] == "#") {
tokens.push(["#",name.substring(1)]);
}else if(name[0] == "/") {
tokens.push(["/",name.substring(1)]);
}else{
tokens.push(["name",name]);
}
}
First, if(name) judges that the name cannot be empty , then judges that if the first character is a pound sign, then the name is a pound sign, and the content takes the second character of the string to the
end.
