js是单线程语言，单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务。如果前一个任务耗时很长，后一个任务就不得不一直等着。
如果排队是因为计算量大，CPU忙不过来，倒也算了，但是很多时候CPU是闲着的，因为IO设备（输入输出设备）很慢（比如Ajax操作从网络读取数据），不得不等着结果出来，再往下执行。
JavaScript语言的设计者意识到，这时主线程完全可以不管IO设备，挂起处于等待中的任务，先运行排在后面的任务。等到IO设备返回了结果，再回过头，把挂起的任务继续执行下去。
于是，所有任务可以分成两种，一种是同步任务（synchronous），另一种是异步任务（asynchronous）。同步任务指的是，在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务；异步任务指的是，不进入主线程、而进入"任务队列"（task queue）的任务，只有"任务队列"通知主线程，某个异步任务可以执行了，该任务才会进入主线程执行。
具体来说，异步执行的运行机制如下。（同步执行也是如此，因为它可以被视为没有异步任务的异步执行。）
闭包就是能够读取其他函数内部变量的函数。例如在javascript中，只有函数内部的子函数才能读取局部变量，所以闭包可以理解成“定义在一个函数内部的函数“。在本质上，闭包是将函数内部和函数外部连接起来的桥梁。
fetch使用
1 *{ 2 padding: 0px; 3 margin: 0px; 4 } 5 a{ 6 font-size: 18px; 7 color: rgb(0, 0, 0); 8 text-decoration: none; 9 padding: 5px 8px;10 background-color: rgb(218, 230, 226);11 border-radius: 4px;12 }13 .title{14 margin: 40px auto;15 width: 360px;16 display: flex;17 justify-content: center;18 align-items: center;19 }20 .title span{21 margin: 0px 20px;22 }23 .asd{24 max-width: 960px;25 margin: 100px auto;26 }27 .about{28 position: relative;29 }30 .about{31 color: #fff;32 }33 .about .introuduce{34 position: absolute;35 left: 60px;36 top: 70px;37 }38 .about .introuduce p{39 margin: 10px 0px;40 }41 .about .introuduce p span{42 margin-right: 20px;43 }44 button{45 background-color: #4CAF50;46 border: none;47 color: white;48 padding: 10px 15px;49 text-align: center;50 text-decoration: none;51 display: inline-block;52 font-size: 12px;53 margin: 4px 2px;54 cursor: pointer;55 }56 .about .mask{57 width: 200px;58 height: 100%;59 left: 0px;60 top: 0px;61 position: absolute;62 background-color: rgba(0, 0, 0, .5);63 }64 .work{65 padding: 4px 8px;66 border: 1px solid rgb(255, 126, 40);67 background: rgb(255, 126, 40);68 border-radius: 6px;69 }70 .history{71 margin: 20px 0px;72 }73 .template{74 display: flex;75 margin: 20px 0px;76 }77 .template .img{78 margin-right: 20px;79 }80 h2{81 font-size: 20px;82 margin: 10px 0px;83 }84 h4{85 margin: 8px 0px;86 font-size: 14px;87 }88 .template-skill, .template-equ, .equ-main, .template-main, .template-history{89 display: none;90 }91 92 93 .equ-item{94 display: inline-block;95 width: 110px;96 text-align: center;97 } 1 22 23 24 25 2627 2844 45 462940${nickname}
30${name}
31射手
32物理攻击 ${}
33魔法攻击 ${}
34防御能力 ${}
35上手难度 ${}
3637 3839414342
4752 53 54背景故事
484951${story}
505562 6356![]()
5761${skillName}
58${skillOne}
59${skillTwo}
606471 726570${introduce}
6667 6869737479757776
${equName}
78
1 var temMain = document.getElementsByClassName('template-main')[0].innerHTML 2 var story = document.getElementsByClassName('template-history')[0].innerHTML 3 var skill = document.getElementsByClassName('template-skill')[0].innerHTML 4 var equTemp = document.getElementsByClassName('template-equ')[0].innerHTML 5 var itemEqu = document.getElementsByClassName('equ-main')[0].innerHTML 6 7 var mainBox = document.getElementsByClassName('about')[0] 8 var storyBox = document.getElementsByClassName('history')[0] 9 var skillBox = document.getElementsByClassName('skill')[0]10 var equBox = document.getElementsByClassName('zhuangbei')[0]11 12 13 var templateString = ""14 15 16 // var asd = new XMLHttpRequest()17 var reqUrl = "https://curtaintan.github.io/tan/a.json"18 // asd.open( 'GET', reqUrl, true )19 // asd.responseType = 'json'20 // asd.send()21 // asd.onload = function(){ 22 // var res = asd.response23 // console.log(res)24 // show( res )25 // }26 27 28 29 fetch( reqUrl ).then( res => {30 return handleResponse( res )31 }).then( res => {32 console.log( res )33 show( res )34 } )35 36 37 38 //返回数据类型转换39 function handleResponse( res ){40 let contentType = res.headers.get('content-type')41 console.log( contentType )42 if( contentType.includes('application/json' ) ){ //json格式43 console.log('-------------数据是json---------------')44 return res.json()45 }else if( contentType.includes('application/json' )){ //xml和文本格式46 console.log('-------------数据不是json---------------')47 return res.text()48 }49 }50 51 52 53 54 function show ( data ){55 //替换main56 templateString = temMain.replace("${nickname}", data.nickName)57 .replace("${name}", data.name)58 .replace('src=""', 'src="'+ data.headImg +'"')59 .replace('${}', data.attr.物理攻击 )60 .replace('${}', data.attr.魔法攻击 )61 .replace('${}', data.attr.防御能力 )62 .replace('${}', data.attr.上手难度 )63 mainBox.innerHTML = templateString64 65 66 //替换故事67 templateString = story.replace( '${story}', data.story )68 storyBox.innerHTML = templateString69 70 71 //替换技能72 for( let i = 0; i < data.skill.length; i ++ ){73 templateString = skill.replace( 'src=""', 'src="'+ data.skill[i].image +'"' )74 .replace( '${skillName}', data.skill[i].name )75 .replace( '${skillOne}', data.skill[i].introduce)76 .replace( '${skillTwo}', data.skill[i].twointroduce)77 let ss = document.createElement('div')78 ss.classList.add('template')79 ss.innerHTML = templateString80 skillBox.appendChild( ss )81 }82 83 84 //替换装备85 for( let i = 0; i < data.equipment.length; i ++ ){86 templateString = equTemp.replace( "${introduce}", data.equipment[i].introduce )87 let ss = document.createElement('div')88 ss.innerHTML = templateString89 for( let j = 0; j < data.equipment[i].equ.length; j ++ ){90 templateString = itemEqu.replace('${equName}', data.equipment[i].equ[j].name)91 .replace( 'src=""', 'src="'+ data.equipment[i].equ[j].image +'"' )92 var son = document.createElement('div')93 son.classList.add('equ-item')94 son.innerHTML = templateString95 ss.appendChild( son )96 }97 equBox.appendChild( ss )98 }99 }