前端开发中的 json 和 xml 还有JavaScript的异步加载

本文链接：https://blog.csdn.net/zhanghuanhuan1/article/details/109201659

1.xml

XML文档中的数据采用元素像 HTML 的段落一样展现。

<?xml version="1.0"?>
<!-- XML demonstration -->

<?xml-stylesheet type="text/css" href="style9.css"?>

<!DOCTYPE planet>
<planet>

<ocean>
<name>Arctic</name>
<area>13,000</area>
<depth>1,200</depth>
</ocean>

</planet>

2.json

JSON 是一种语法，用来序列化对象、数组、数值、字符串、布尔值和 null 。它基于 JavaScript 语法，但与之不同：JavaScript不是JSON，JSON也不是JavaScript。JSON最常用的格式是对象的键值对。例如下面这样：

{"firstName": "Brett", "lastName": "McLaughlin"}

和普通的 JS 数组一样，JSON 表示数组的方式也是使用方括号 []。

{ 
    "people":[{
        "firstName": "Brett",
        "lastName":"McLaughlin"
        },
        {   
        "firstName":"Jason",
        "lastName":"Hunter"
    }]
}

在跟后台进行数据交互的时候得到一个json字符串。

JSON.parse(text[, reviver])

方法用来解析JSON字符串，构造由字符串描述的JavaScript值或对象。提供可选的reviver函数用以在返回之前对所得到的对象执行变换(操作)。

text：要被解析成JavaScript值的字符串，查看 JSON 对象学习的JSON 语法的说明。
reviver（可选）：如果是一个函数，则规定了原始值如何被解析改造，在被返回之前。

返回值：Object对应给定的JSON文本。

JSON.stringify(value[, replacer [, space]])

返回与指定值对应的JSON字符串，可以通过额外的参数, 控制仅包含某些属性, 或者以自定义方法来替换某些key对应的属性值。

value：将要序列化成一个JSON 字符串的值。
replacer（可选）：如果该参数是一个函数，则在序列化过程中，被序列化的值的每个属性都会经过该函数的转换和处理；如果该参数是一个数组，则只有包含在这个数组中的属性名才会被序列化到最终的 JSON 字符串中；如果该参数为null或者未提供，则对象所有的属性都会被序列化。
space （可选）：指定缩进用的空白字符串，用于美化输出（pretty-print）；如果参数是个数字，它代表有多少的空格；上限为10。该值若小于1，则意味着没有空格；如果该参数为字符串(字符串的前十个字母)，该字符串将被作为空格；如果该参数没有提供（或者为null）将没有空格。
返回值 :一个表示给定值的JSON字符串。

3.js的异步加载 defer、async属性以及JS异步加载并执行解决方案；

先要创建document文档开始解析web页面，解析HTML和他们的文本内容后添加到Element对象和Text节点到文档中。这个阶段document.readyState = "loading".加载domTree css 才能开始加载js。
如果没有defer、async会同步加载，阻塞整个页面，等待js脚本加载完成并执行脚本，然后继续解析文档。
如果有defer、async,浏览器会创建线程异步加载js,并且解析文档，不会阻碍文档的解析。对于async属性的script脚本加载完以后会立即执行。（异步加载的js里面禁止写document.write（）因为，执行这个文档会把整个文档流清空会用它里边的文档去代替）

<div style="height:100px;width:100px;background:red;"></div>
<script>
    document.onload=function(){
        document.write('a')
    }
</script>

这样页面只能输出一个 a

遇到img 标签会正常的解析文档，然后浏览器会开启异步线程加载src里的内容，并且继续解析文档。
当文档解析完成的时候domTree 完成，document.readyState="interactive"。//活跃的，动态的。
文档解析完成后，所有的defer的脚本会按照顺序正常解析。（与async的不同，但是同样禁止使用document.write()）
当document对象解析完成以后，会触发DOMContentLoad事件，这标志着执行从同步脚本执行阶段，转化为事件驱动阶段。浏览器就开始监听，识别事件
当所有async 属性的脚本加载完毕以后，img等标签加载完毕以后，document.readystate = "complete",window对象触发load事件，浏览器开始以异步的方式处理用户输入，事件等一系列操作。
js可以操作dom和css。只有在dom和css加载完以后才能加载js。
window.onload要等到所有的结束后才会触发，也就是等到所有图片加载完毕之后才能触发，我们希望只要domTree解析完以后就开始操作，jQuery里有一个$(document）.ready(function(){}),就是在domTree解析完以后就开始执行，底层原理是document.readyState="interactive"和DOMContenLoaded;
这也是window.onload和$(document).ready(function(){})的区别，一个是页面加载完，一个是页面解析

<script>
    console.log(document.readyState);
    document.onreadystatechange=function(){console.log(
        console.log(document.readyState);
    }
    document.addEventListener('DOMContenLoaded',function(){
    
        console.log('好了')
    }，false)
</script>

这是异步加载js的一个形式，就是比较复杂，传了一个回调函数，也可以更改一下传一个数组，执行一系列的方法。

function loadScript(url,callback){
    var script = document.createElement('script');
    script.type = "text/javascript";
    if(script.readyState){
        script.onreadystatechange = function(){
            if(script.readyState == "complete"||script.readyState == "loaded"){
                tools[callback]();
            }
        }
    }else{
            script.onload=function(){
                tools[callback]();
            }
        }
        script.src = url;
        document.head.appendChild(script);
    }
    loadScript('dome.js',"test")