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. HTML笔记(三) 表格和列表

    本篇记录表格 (table) 和有序列表 (ordered list) \ 无序列表 (unordered list) 的部分用法 1.表格table 表格标签 使用 <table> 定义 ...

  2. shell作业01

    1.判断/etc/inittab文件是否大于100行,如果大于,则显示”/etc/inittab is a big file.”否者显示”/etc/inittab is a small file.” ...

  3. [转帖]jdk8 Metaspace 调优

    jdk8 Metaspace 调优 https://blog.csdn.net/bolg_hero/article/details/78189621 转帖 简介 从JDK8开始,永久代(PermGen ...

  4. 以石子合并为例的区间DP

    区间DP,是一类具有较为固定解法的DP,一般的思路都是: first.初始化区间长度为1的情况(一般区间长度为1的较易于初始化) second. for(枚举区间长度2~n){ for(枚举左端点){ ...

  5. python-1：正则表达式（基础知识点）

    1.简单匹配: \d  →匹配一个数字 \w →匹配一个数字或字母 \s  →匹配一个空格(包括tab等空白符) .    →匹配任意字符 *   →匹配任意个字符(包括0个) +  →匹配至少一个字 ...

  6. Codeforces 1190D. Tokitsukaze and Strange Rectangle

    传送门 注意到矩形往上是无限的,考虑把点按 $y$ 从大到小考虑 对于枚举到高度为 $h$ 的点,设当前高度大于等于 $h$ 的点的所有点的不同的 $x$ 坐标数量为 $cnt$ 那么对于这一层高度 ...

  7. 学习笔记--APIO 2018 二分专题 By wuvin

    前言: 在APIO 2018 Day2下午听wuvin讲二分,听了一上午的神仙,现在终于有可以听懂了. 专题: 平均边权最大 题目链接:https://www.questoj.cn/problem/3 ...

  8. qt webengineview 设置背景颜色

    当使用qwebengineview加载网页的使用,可以通过网页端的css设置网页的显示效果 但是当窗口大小改变的时候,你会发现网页的resize速度赶不上窗口的resize速度,这是会出现白色空白,而 ...

  9. 分布式的几件小事（三）dubbo的通信协议与序列化

    1.dubbo的通信协议 ①dubbo协议 Dubbo缺省协议采用单一长连接和NIO异步通讯,适合于小数据量大并发的服务调用,以及服务消费者机器数远大于服务提供者机器数的情况. 特点 : dubbo缺 ...

  10. vue iview面包屑

    简单看一下vue,iview的面包屑怎么写呢? 简单的思路:1.获取到路由记录$route.matched 2.渲染 效果: 一.$route.matched 官网地址:https://router. ...