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. [转帖]PostgreSQL与MySQL比较 From 2010年

    PostgreSQL与MySQL比较 [复制链接]  http://bbs.chinaunix.net/thread-1688208-1-1.html osdba 稍有积蓄 好友 博客 消息 论坛徽章 ...

  2. Dubbo消费方服务调用过程源码分析

    参考:dubbo消费方服务调用过程源码分析dubbo基于spring的构建分析Dubbo概述--调用过程dubbo 请求调用过程分析dubbo集群容错机制代码分析1dubbo集群容错策略的代码分析2d ...

  3. java中this总结（转载请注明出处）

    1:this在构造方法中:this可以进行构造方法中的相互调用,this(参数): 2:this调用方法中,代表调用该方法的对象的地址,例如下面的代码比较 package thisTest; publ ...

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

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

  5. weex 轮播如何使用？

    下面的内容是你必须要掌握的 1.怎么让banner的宽度和屏幕的宽度相等 2.怎么让banner自动轮播和轮播间隔 3.如何添加指示器 4.如何设置指示器的颜色和大小 5.点击轮播图时触发事件 6.检 ...

  6. Clang调试CUDA代码

    Clang调试CUDA代码全过程 有空再进行编辑,最近有点忙,抱歉 使用的llvm4.0+Clang4.0的版本,依据的是上次发的llvm4.0和clang4.0源码安装的教程https://www. ...

  7. 2019-11-29-Roslyn-通过-NuGet-库修改应用程序入口函数

    title author date CreateTime categories Roslyn 通过 NuGet 库修改应用程序入口函数 lindexi 2019-11-29 08:37:49 +080 ...

  8. MySQL 5.7 免安装版 access denied 解决办法

    MySQL 5.7 在Windows 下安装的过程很多人都写过了 但是安装完成后用 root 第一次登录时需要密码 可是我根本就没设密码嘛... 搞了半天最后终于搞定了 在执行 mysqld --in ...

  9. 小米Air安装Arch Linux之图形界面配置（Gnome 和 sway）持续更新中……

    0. 前言 上一篇文章简单讲述了在小米Air上安装Arch Linux的经验,但是安装完后基本系统后,还需要额外的配置才能进到日常使用.下文简单列举一些步骤. 1. 参考网站 主要还是参考ARCH W ...

  10. 架构师成长之路5.4-Saltstack配置管理（LAMP架构案例）

    点击架构师成长之路 架构师成长之路5.4-Saltstack配置管理(LAMP架构案例) 配置管理工具: Pupper:1. 采用ruby编程语言:2. 安装环境相对较复杂:3.不支持远程执行,需要F ...