JSON基础与数据解析

引入json主要是为了数据交互,它是轻量级的数据交互
所有编程语言都离不开的三大数据类型
scalar 标量 ->字符串和数字
sequence 序列->数组和列表 list array
mapping 映射->键值对
json采用的映射关系形成的一种轻量级的数据形式

json的数据格式

并列的数据用逗号隔开
"name":"张三",
"age": 18
json里的键名要用双引号

模版替换

 <script type='text/html' id='J_tpl'>
   <li class="list-item">
     <div class='mask'>
       <h3>{{career}}工程师（上海）</h3>
        <p>月薪{{salary}}</p>
      </div>
           <img src="../img/{{img}}" alt="">
    </li>
 </script>
数据缓存
 <div id='J_data' style='display: none;'>
            [{"career":"java","salary":"20","img":"1.jpeg"},{"career":"web","salary":"28","img":"2.jpeg"},
            {"career":"java","salary":"20","img":"3.jpeg"},{"career":"java","salary":"20","img":"4.jpeg"},{"career":"web","salary":"28","img":"5.jpeg"}]
</div>
    function setTplToHtml(tpl,regExp,opt){
        return tpl.replace(regExp(),function(node,key){
            return opt[key]
        })
    }
    function regTpl(){
        return new RegExp(/{{(.*?)}}/,'gim')
    }
    function render() {
        var jsonData=document.getElementById('J_data').innerHTML,
            tpl=document.getElementById('J_tpl').innerHTML,
            data=JSON.parse(jsonData),
            len=data.length,
            oList=document.getElementsByClassName('js-list')[0],
            list='',
            item;
            for(var i=0;i<len;i++){
                item=data[i]
                list+=setTplToHtml(tpl,regTpl,{
                    career: item.career,
                    city: item.city,
                    salary: item.salary,
                    img: item.img
                })
            }
            oList.innerHTML=list;
    }