Mustache低层原理实现4

目的:将零散的token嵌套起来，将“#”和“/”下面的内容当做一项token

 引出问题:不知道嵌套到第几层

解决算法：栈（后进先出）

官网的小技巧:使用collection（收集器）改变对象指向的变量

上代码：

parseTemplateToTokens.js

nestTokens.js

export default function nestTokens(tokens){
    // 结果数组
    var nestTokens = [];
    // 收集器,指向同一个数组
    var collection =nestTokens;
    // 栈结构
    var sections = [];
    console.log(tokens)
    for(let i=0;i<tokens.length;i++){
        let token = tokens[i];
        switch(token[0]){
            case '#':
                // 收集器放入token,此时nestTokens也是和collection一样的token对象，因为都指向同一个引用
                collection.push(token)
                // 入栈
                sections.push(token)
                // console.log(sections,"当前sections")
                // 收集器换人，给token添加下表为2的项，并且让收集器指向它
                token[2]=[];
                collection = token[2]
                //  console.log(collection,"collection")
                break;
            case '/':
            //    出栈,pop会返回刚刚弹出的项
            let section_pop = sections.pop();
            // 改变收集器为栈结构队尾（队尾是栈顶）下标为2的数组
            collection = sections.length>0?sections[sections.length-1][2]:nestTokens;
                break;
            default:
                // 不管是什么都默认收集所有的token，只有在做#和/时才判断和重新指向新的数组进行收集
                collection.push(token)
        }
    }
    return nestTokens;
}

index,js

最后输出这个处理后的tokens，

import parseTemplateToTokens from './parseTemplateToTokens.js'
window.SSG_TemplateEngine = {
    render(template,data){
        var tokens = parseTemplateToTokens(template)
        console.log(tokens)        
    }
}

输出结果:

 

 以上就能将零散的token全部收集起来了！！！