JS对象转为类似json的字符串，对象->字符串叫序列化，字符串->对象      是反序列化

㈠json序列化

<script>

var shy = new Object();

shy.name = "石海莹";

shy.birth="1996年9月20日"

document.write("姓名:"+shy.name+"，出生日期："+shy.birth+"<hr>序列化：");

var jsonxlh = JSON.stringify(shy);

document.write(jsonxlh);

</script>

效果图：

 

㈡json-parse

输入json格式的字符串:

<br>

<br>

<input id="zfc" size=60>

<br>

<br>

<button onclick="fxlh()">JSON反序列化</button>

<script>

function fxlh(){

                 var shy=JSON.parse(document.getElementById("zfc").value)

                 document.write("姓名:"+shy.name+"，出生日期："+shy.birth);

               }

//在输入框内输入{"name":"石海莹","birth":"1996年10月04日"}

//得出的结果为 姓名:石海莹，出生日期：1996年10月04日

</script>

效果图：

 点击json反序列化按钮后结果为：

 

㈢JSONstringify格式化输出

<h1>JSONstringify格式化输出</h1>

<script>

var Obj = {

  "teacher":"李国锋",

  "students":[

    {"hy":{"name":"海莹","gender":"女","birth":"1996"}},

    {"yw":{"name":"译伟","gender":"女","birth":"1999"}},

    {"ym":{"name":"耀民","gender":"男","birth":"1997"}}

  ]

};

var JsonStr = JSON.stringify(Obj,undefined,2);

console.log(JsonStr);

</script>

打开控制台，可以看到Jsonstringify的格式化输出

效果图：

在json中的图片

 

 

㈣json数据生成下拉列表框选项练习

<!DOCTYPE html>

<html>

<head>

<script>

var jsonStr = '{"beijing":"北京市","shanghai":"上海市","tianjin":"天津市","chongqing":"重庆市"}';

var obj = JSON.parse(jsonStr);

    function init(){

        var xzq1 = document.getElementById("lb1");

        var xzq2 = document.getElementById("lb2");

        var selectorOpts = xzq1.options;

        var selector2Opts = xzq2.options;

        for(var key in obj){

            selectorOpts.add(new Option(key,key));

            selector2Opts.add(new Option(obj[key],obj[key]));

        }

    }

    function selectorChange(value) {

        var xzq2= document.getElementById("lb2");

        xzq2.value=obj[value];

    }

</script>

</head>

<body onload=init()>

<h1>DOM操作和ParsingJSONMap操作</h1>

<select id="lb1" onchange=selectorChange(this.value)></select>

<select id="lb2" disabled=true></select>

</body>

</html>

效果图：

 

㈤输入json格式的字符串: 

输入json格式的字符串:

<br><br>

<input id="zfc" size=60>

<br><br>

<button onclick="fxlh()">json反序列化</button>

<script>

function fxlh(){

var obj=JSON.parse(document.getElementById("zfc").value)

document.write("老师："+obj.teacher+"<br><br>")

document.write("学生姓名："+obj.students[0].name+"，性别："+obj.students[0].gender+"，出生日期："+obj.students[0].birth+"<br><br>")

document.write("学生姓名："+obj.students[1].name+"，性别："+obj.students[1].gender+"，出生日期："+obj.students[1].birth+"<br><br>")

document.write("学生姓名："+obj.students[2].name+"，性别："+obj.students[2].gender+"，出生日期："+obj.students[2].birth+"<br><br>")

}

</script>

<h1>示例字符串:</h1>

<p>{

  "teacher":"李国锋",

  "students":[

    {"name":"海莹","gender":"女","birth":"1996"},

    {"name":"译伟","gender":"女","birth":"1999"},

    {"name":"耀民","gender":"男","birth":"1997"}

  ]

}

</p>

效果图：

 

㈥虚拟DOM实例练习

VUE设计的核心：虚拟DOM

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>虚拟DOM实例练习</title>

</head>

<body>

<script>

function Element({tagName, props, children}){

    if(!(this instanceof Element)){

        return new Element({tagName, props, children})

    }

    this.tagName = tagName;

    this.props = props || {};

    this.children = children || [];

}

Element.prototype.render = function(){

    var el = document.createElement(this.tagName),

        props = this.props,

        propName,

        propValue;

    for(propName in props){

        propValue = props[propName];

        el.setAttribute(propName, propValue);

    }

    this.children.forEach(function(child){

        var childEl = null;

        if(child instanceof Element){

            childEl = child.render();

        }else{

            childEl = document.createTextNode(child);

        }

        el.appendChild(childEl);

    });

    return el;

};

var elem = Element({

    tagName: 'ul',

    props: {'class': 'list'},

    children: [

        Element({tagName: 'li', children: ['石海莹']}),

        Element({tagName: 'li', children: ['牛译伟']}),

        Element({tagName: 'li', children: ['牛耀民']})

    ]

});

document.querySelector('body').appendChild(elem.render());

</script>

</body>

</html>

效果图：

★简单讲解上面的代码：

⑴这是虚拟dom的部分核心代码，这是什么，是json

⑵这是操作json数据的核心函数

⑶在虚拟dom中基本见不到getElementById，因为getElementById是操作真实DOM的

⑷使用虚拟DOM的好处：

①可能会减少DOM操作次数，带来性能上的提升，即使我们频繁操作虚拟DOM，我们只需要一定时刻一次性同步修改到真实DOM上即可
②真实的HTML节点有两百多个属性和方法，使用虚拟节点，能在数据结构上节省内存。
③虚拟DOM不依赖浏览器环境，能在node环境实现，可以使用虚拟DOM生成html字符串，实现SSR.[SSR：即 服务端渲染（Server Side Render）]

由衷感谢：李国锋老师的代码示例

json代码——json序列化，json-parse，JSONstringify格式化输出，虚拟DOM的更多相关文章

  1. java代码--Date类获取当前时间-格式化输出

    44:52 阅读数:2299 package cn.Date;   import java.text.Format; import java.text.SimpleDateFormat; import ...

  2. json and pickle 序列化

    前言 文件只能存储字符串.二进制,若把内存的数据对象存到硬盘   从硬盘里读取数据,里面不止是字符串的类型,因此用到了json and pickle 序列化 json序列化 作用:用于不同语言进行的数 ...

  3. 使用 ServiceStack.Text 序列化 json的实现代码【转】

    转自:http://www.jb51.net/article/38338.htm 今天发篇文章总结下自己使用 ServiceStack.Text 来序列化 json.它的速度比 Newtonsoft. ...

  4. JSON代码格式化 进行查询筛选

    JSON是前端编程经常用到的格式,对于PHP或者Python,解析JSON都不是什么大事,尤其是PHP的json_encode和json_decode,干的相当的漂亮.Linux下也有处理处理JSON ...

  5. 使用 ServiceStack.Text 序列化 json的实现代码

    相信做 .net 开发的朋友经常会遇到 json 序列化这样的需要,今天发篇文章总结下自己使用ServiceStack.Text 来序列化 json.它的速度比 Newtonsoft.Json 快很多 ...

  6. SpringBoot中使用Fastjson/Jackson对JSON序列化格式化输出的若干问题

    来源 :https://my.oschina.net/Adven/blog/3036567 使用springboot-web编写rest接口,接口需要返回json数据,目前国内比较常用的fastjso ...

  7. 表单序列化json字符串和js时间格式化

    js时间格式化 new Date().format("时间格式") Date.prototype.format = function(fmt) { var o = {        ...

  8. 【ASP.NET Web API教程】6.2 ASP.NET Web API中的JSON和XML序列化

    谨以此文感谢关注此系列文章的园友!前段时间本以为此系列文章已没多少人关注,而不打算继续下去了.因为文章贴出来之后,看的人似乎不多,也很少有人对这些文章发表评论,而且几乎无人给予“推荐”.但前几天有人询 ...

  9. python---基础知识回顾（四）（模块sys,os,random,hashlib,re,序列化json和pickle，xml，shutil，configparser，logging，datetime和time，其他）

    前提:dir,__all__,help,__doc__,__file__ dir:可以用来查看模块中的所有特性(函数,类,变量等) >>> import copy >>& ...

随机推荐

  1. 西安邀请赛-D（带权并查集+背包）

    题目链接:https://nanti.jisuanke.com/t/39271 题意:给定n个物品,m组限制,每个物品有个伤害值,现在让两个人取完所有物品,要使得两个人取得物品伤害值之和最接近,输出伤 ...

  2. coredump产生的几种可能情况

    coredump产生的几种可能情况 造成程序coredump的原因有很多,这里总结一些比较常用的经验吧: 1,内存访问越界 a) 由于使用错误的下标,导致数组访问越界. b) 搜索字符串时,依靠字符串 ...

  3. [转帖]天津飞腾回应处理器造假 没有采用ARM的内核，内核自主设计

    天津飞腾回应处理器造假没有采用ARM的内核,内核自主设计 ... https://www.expreview.com/63233.html 看了下 同意孟宪瑞老师的关系 飞腾 的确改动了 ARM的架构 ...

  4. hive_UDTF函数

    hive的UDTF函数是可以输入一行数据然后输出多行多列(可以是单行/单列)的函数 public class Tex extends GenericUDTF { /** * 对传入的参数进行初始化 * ...

  5. C++学习 之 类的声明及成员的访问（笔记）

    1.类的声明 简单来说,属性以及对属性的操作的整合叫做类.要声明类可使用关键字class,并在它的后面定义类名,然后紧接着是属于该类的代码块{}.类的声明类似于函数声明,类的声明本身并不改变程序 的行 ...

  6. CodeForces 820B + 821C

    (点击题目即可查看原题) 820B Mister B and Angle in Polygon  题意:在一个正n边形中,每个顶点按顺序记为1~n,正n边形中任意三点顶点组成一个角,∠x1x2x3,问 ...

  7. Linux就该这么学——新手必须掌握的命令之我的第一个命令

    1.Linux操作系统的开机进程(基本过程) (1).内核的引导: BIOS自检,安装BIOS默认设置的启动设备(硬盘)来启动.读取目录/boot目录下的内核文件 (2).运行init: 运行init ...

  8. LeetCode题解： LRU Cache 缓存设计

    LeetCode题解: LRU Cache 缓存设计 2014年12月10日 08:54:16 邴越 阅读数 1101更多 分类专栏: LeetCode   版权声明:本文为博主原创文章,遵循CC 4 ...

  9. redis 学习（11）-- redis pipeline

    redis pipeline 什么是流水线(pipeline) 首先来看 redis 执行一次操作所需要的时间: 1 次时间 = 1 次网络时间 + 1次命令时间 执行 n 次就需要: n 次时间 = ...

  10. O024、Nova组件如何协同工作

    参考https://www.cnblogs.com/CloudMan6/p/5415836.html   Nova 物理部署方案   前面大家已经看到 Nova 由很多子服务组成,我们也知道OpenS ...