<script src="https://cdn.bootcdn.net/ajax/libs/mustache.js/4.2.0/mustache.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/mustache.js/4.2.0/mustache.js"></script>

//編譯普通對(duì)象成token
const templateStr = `<h3>我今天買了一部{{thing}}手機(jī)，花了我{{money}}元，心情好{{mood}}啊</h3>`;
[
    ["text",'<h3>我今天買了一部'],
    ["name",'thing'],
    ["text",'手機(jī)，花了我'],
    ["name",'money']
    ["text",'元，心情好'],
    ["name","mood"],
    ["text",'啊']
]

// Scanner.js
export default class Scanner {
  constructor(templateStr) {
    this.templateStr = templateStr
    // 指針
    this.pos = 0
    // 尾巴
    this.tail = templateStr
  }
  scan(stopTag) { 
    this.pos +=  stopTag.length // 指針跳過 stopTag，比如 stopTag 是 {{，則 pos 就會(huì)加2
    this.tail = this.templateStr.substring(this.pos) // substring 不傳第二個(gè)參數(shù)直接截取到末尾
  }
  scanUntil(stopTag) {
    const pos_backup = this.pos // 記錄本次掃描開始時(shí)的指針位置
    // 當(dāng)指針還沒掃到最后面，并且當(dāng)尾巴開頭不是 stopTag 時(shí)，繼續(xù)移動(dòng)指針進(jìn)行掃描
    while (!this.eos() && this.tail.indexOf(stopTag) !== 0){
      this.pos++ // 移動(dòng)指針
      this.tail = this.templateStr.substring(this.pos) // 更新尾巴
    }
    return this.templateStr.substring(pos_backup, this.pos) // 返回掃描過的字符串，不包括 this.pos 處
  }
  // 指針是否已經(jīng)抵達(dá)字符串末端，返回布爾值 eos(end of string)
  eos() {
    return this.pos >= this.templateStr.length
  }
}

// parseTemplateToTokens.js
import Scanner from './Scanner.js'
import nestTokens from './nestTokens' // 后面會(huì)解釋
// 函數(shù) parseTemplateToTokens
export default templateStr => {
  const tokens = []
  const scanner = new Scanner(templateStr)
  let word
  while (!scanner.eos()) {
    word = scanner.scanUntil('{{')
    word && tokens.push(['text', word]) // 保證 word 有值再往 tokens 里添加
    scanner.scan('{{')
    word = scanner.scanUntil('}}')
    /** 
     *  判斷從 {{ 和 }} 之間收集到的 word 的開頭是不是特殊字符 # 或 /, 
     *  如果是則這個(gè) token 的第一個(gè)元素相應(yīng)的為 # 或 /, 否則為 name
     */
    word && (word[0] === '#' ? tokens.push(['#', word.substr(1)]) : 
      word[0] === '/' ? tokens.push(['/', word]) : tokens.push(['name', word]))
    scanner.scan('}}')
  }
  return nestTokens(tokens) // 返回折疊后的 tokens, 詳見下文
}

// index.js
import parseTemplateToTokens from './parseTemplateToTokens.js'
window.My_TemplateEngine = {
  render(templateStr, data) {
    const tokens = parseTemplateToTokens(templateStr)
    console.log(tokens)
  }
}

const templateStr = `
  <ul>
      {{#arr}}
        <li>
          <div>{{name}}的基本信息</div>
          <div>
            <p>{{name}}</p>
            <p>{{age}}</p>
            <div>
              <p>愛好：</p>
              <ol>
                {{#hobbies}}
                  <li>{{.}}</li>
                {{/hobbies}}
              </ol>
            </div>
          </div>
        </li>
      {{/arr}}
  </ul>
`

// nestTokens.js
export default (tokens) => {
  const nestTokens = []
  const stack = []
  let collector = nestTokens // 一開始讓收集器 collector 指向最終返回的數(shù)組 nestTokens
  tokens.forEach(token => {
    switch (token[0]) {
      case '#':
        stack.push(token)
        collector.push(token)
        collector = token[2] = [] // 連等賦值
        break
      case '/':
        stack.pop(token)
        collector = stack.length > 0 ? stack[stack.length-1][2] : nestTokens
        break;
      default:
        collector.push(token)
        break
    }
  })
  return nestTokens
}

token[2] = []
collector = token[2]

let a = {n:1};
a.x = a = {n:2};
console.log(a.x); // 輸出? 

// lookup.js
// 思路就是先獲取 test.a 的值, 比如說是 temp, 再獲取 temp.b 的值, 一步步獲取
export default (data, key) => {
  // 如果傳入的 key 里有點(diǎn)符號(hào)而且不是僅僅只是點(diǎn)符號(hào)
  if (key.indexOf('.') !== -1 && key !== '.' ) {
    const keys = key.split('.') // 將 key 用 . 分割成一個(gè)數(shù)組
    return keys.reduce((acc, cur) => {
      return acc[cur] // 一步步獲取
    }, data)
  }
  // 如果傳入的 key 沒有點(diǎn)符號(hào)，直接返回
  return data[key]
}

// renderTemplate.js
import lookup from './lookup.js'
import parseArray from './parseArray.js'
export default (tokens, data) => {
  let domString = ''
  tokens.forEach(token => {  
    switch (token[0]) {
      case 'text':
        domString += token[1]
        break
      case 'name':
        domString += lookup(data, token[1])
        break
      case '#':
        domString += parseArray(token[2], data[token[1]])
        break
      default:
        break
    }
  }) 
  return domString
}

// parseArray.js
import renderTemplate from './renderTemplate.js'
export default (tokens, data) => {
  let domString = ''
  data.forEach(itemData => {
    domString += renderTemplate(tokens, {
      ...itemData,
      '.': itemData // 針對(duì)簡(jiǎn)單數(shù)組的情況，即模板字符串里的 {{.}} 
    })
  })
  return domString
}