var A = A || {};

A.root = document.getElementById('container');

// str : <p>{#demo#}</p>  + data { demo: 'abc'} => <p>abc</p>  
A.formatString = function (str, data) {
  return str.replace(/{#(\w+)#}/g, function(match, key) {
    return typeof data[key] === undefined ? '' : data[key]
  })
}

// 模板生成器
A.view = function(name) {
  // 模板库
  var tpls = {
    code: '<pre><code>{#code#}</code></pre>',
    img: '<img src="{#src#}" alt="{#alt#}" title="{#title#}" />',
    part: '<div id="{#id#}" class="{#class#}">{#part#}</div>',
    theme: [
      '<div>',
      '<h1>{#title}</h1>',
      '{#content#}',
      '</div>'
    ].join('')
  }

  // 如果是数组，就进行递归
  if (Object.prototype.toString.call(name) === '[object Array]') {
    var tpl = '';
    for (var i = 0, len = name.length; i < len; i++) {
      // arguments.callee 指向当前正在执行的函数 即 A.view 相当于递归
      tpl += arguments.callee(name[i]);
    }
    return tpl;
  } else {
    // 如果模板库里面有就返回该模板，如果没有就根据name组装一个简易模板返回
    return tpls[name] ? tpls[name] : `<${name}>{#${name}#}</${name}>`
  }
}

A.strategy = {
  // 文字列表展示
  'listPart': function(data) {
    var s = document.createElement('div');
    var ulStr = '';
    var liData = data.liData;

    var tpl = A.view(['ul'])
    var liTpl = A.formatString(A.view('li'), { li: A.view(['strong', 'span'])})
    // 用到的 li 和 strong span 模板库都没有 就会生成简易模板

    if (data.id) {
      s.id = data.id;
    }

    for (var i = 0, len = liData.length; i < len; i++) {
      if (liData[i].strong || liData[i].span) {
        ulStr += A.formatString(liTpl, liData[i])
      }
    }

    data.ul = ulStr;
    s.innerHTML = A.formatString(tpl, data);
    A.root.appendChild(s);
  },
}

A.init = function(data) {
  this.strategy[data.type](data);
}

A.init({
  type: 'listPart',
  liData: [
    {
      strong: '一',
      span: '内容1'
    },
    {
      strong: '二',
      span: '内容2'
    }
  ]
})