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. 【C】命令行参数解析——getopt、getopt_long及getopt_long_only

    前言 在linux下学习开源代码Webbench,遇到get_long等函数的用法,一时有点懵,故想深入了解这类命令行解析函数,并记此博文. 1.getopt getopt主要用来处理短命令行选项,例 ...

  2. MySQL Explain命令详解--表的读取顺序，数据读取操作的类型等

    表示索引中使用的字节数,可通过该列计算查询中使用的索引的长度(key_len显示的值为索引字段的最大可能长度,并非实际使用长度,即key_len是根据表定义计算而得,不是通过表内检索出的) 不损失精确 ...

  3. Test：河北金力集团企业网集成

    三.网站建设部分(40分) 河北金力集团公文流转系统 1.项目需求: 河北金力集团是我省机械加工的龙头企业,主要从事矿山机械制造及各种机械零部件加工.企业有3个厂区,主厂区位于省高新技术开发区,3个分 ...

  4. UOJ46 玄学

    题目 一个比较自然的想法是线段树维护二进制分组. 因为我们询问的是一段连续的操作的积,所以我们可以建一棵线段树,每个节点存储当前区间各个操作的积. 这里的操作的积指的是把一系列操作做完之后区间每个位置 ...

  5. 蚂蚁分类信息商家发布文章、商品外链及远程图片自动添加nofollow属性

    蚂蚁商户发布文章.商品是可以添加外链或者直接用外部图片,但是这对分类网站运营不利. 所以要对外链进行过滤,演示网站保洁,蚂蚁分类的源码. 下面就说下怎么处理自动给外链自动加上nofollow属性. 1 ...

  6. Git_基础命令

    gitinit//初始化一个Git仓库" role="presentation">gitinit//初始化一个Git仓库gitinit//初始化一个Git仓库 gi ...

  7. BIML 101 - ETL数据清洗 系列 - BIML 快速入门教程 - 将文本文件(csv)数据导进数据库

    第二节 将文本文件数据导进数据库 该小节介绍如何用BIML生成ssis包,将货币文本导入到数据库currency的表中. SSIS组件: Connection Manager组建管理connectio ...

  8. ARC 100 C - Linear Approximation题解---三分法

    题目链接: https://arc100.contest.atcoder.jp/tasks/arc100_a 分析: 比赛时做这题想到一个瞎搞的方法就是在平均数上下波动一下取最小值,然后大佬yjw学长 ...

  9. markdown图片转换demo

    markdown图片转换demo 一直以来都是用Markdown来写博客的,但是它的图片嵌入实在是太让人头秃,逼得我能找网上的图片就不用自己的,实在是麻烦.所以我在发现了一个可以生成markdown样 ...

  10. CentOS下安装DockerCE

    title: CentOS下安装DockerCE comments: false date: 2019-09-04 09:47:58 description: 在CentOS下安装社区版Docker ...