将JSON数据渲染到页面

引言—编程语言的三大数据类型

1. scalar(标量)，在编程语言里面主要是数字和字符串。
2. sequence（队列），数组和列表。
3. mapping（映射），表现为键值对形式。

JSON简介

JSON， JavaScript Object Notation，是一种存储数据的对象,也是一种轻量级的数据结构。

JSON对象也有一定的格式：

• 单个数据大括号括起来，以对象的形式保持，键值对为字符串时，引号为双引号。
• 多个数据保存在数组当中，每个数据都是一个对象
• 映射用冒号隔开
  "name": "tom"
• 并列数据用逗号隔开

"name" : "tom",
"age" : 18

• 映射集合用｛｝包裹

{
    "name" : "tom",
    "age" : 18
}

• 键名一定要使用双引号
• 并列数据集合用[]包裹。

[
    {
    "name" : "tom",    
    "age" : 18
    },{
    "name" : "tom",    
    "age" : 18
    }
]

JSON 与 XML格式的区别

XML数据文档很大
不易读
解析比较复杂

JSON方法

1. JSON.parse(jsonStr) 将JSON字符串转换为json对象。
2. stringify()将json对象转换为json字符串

JSON的使用

从服务器获取数据时，基本都是JSON字符串。在第一加载页面时，我们可以把初始的数据存储到HTML的DIV标签中，提高加载速度。

• 数据渲染到页面上

//将模板中的内容替换为opt中的数据
function setTplToHTML(tpl, regExp, opt){
  return tpl.replace(regExp(), function(node, key){
    return opt[key];
  });
}
//正则表达式
function regTpl(){
  return new RegExp(/{{(.*?)}}/, 'gim');
}

模板一般写在HTML中，在script标签里面，替换的字符串使用{{}}包裹起来。

<script type="text/html" id="j_itemtpl">
        <li class="list-item">
            <div class="inner">
                <div class="img">
                    <img src="" />
                </div>
            </div>
            <div class="info">
                <h4>{{classname}}</h4>
                <p class="row-2">{{name}}老师</p>
                <p class="row-3">{{watched}}人学习</p>
            </div>
        </li>
    </script>

通过这样的方式，加上for循环，将数据渲染到页面中。