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）]
由衷感謝：李國鋒老師的代碼示例