异步与闭包与fetch
异步与闭包与fetch
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 <div class="asd">
2 <div class="title">
3 <a href="https://lol.qq.com/data/info-defail.shtml?id=MissFortune">点击直达官方网页</a>
4 <span>赏金猎人</span>
5 <span>厄运小姐</span>
6 </div>
7 <div class="about">
8
9 </div>
10 <div class="history">
11
12 </div>
13 <div class="skill">
14 <h2>技能介绍</h2>
15
16 </div>
17 <div class="zhuangbei">
18 <h2>推荐装备</h2>
19
20 </div>
21 </div>
22
23
24
25 <!-- main-modal -->
26 <div class="template-main">
27 <div class="mask"></div>
28 <div class="introuduce">
29 <h4>${nickname}</h4>
30 <h1>${name}</h1>
31 <p><span class="work" >射手</span></p>
32 <p><span>物理攻击</span> ${}</p>
33 <p><span>魔法攻击</span> ${}</p>
34 <p><span>防御能力</span> ${}</p>
35 <p><span>上手难度</span> ${}</p>
36 <div class="down">
37 <button>购买英雄</button>
38 </div>
39 </div>
40 <div class="bgm">
41 <img src="" alt="">
42 </div>
43 </div>
44
45 <!-- 背景故事模板 -->
46 <div class="template-history">
47 <h2>背景故事</h2>
48 <div class="story">
49 <p>${story}</p>
50 </div>
51 </div>
52
53 <!-- 模板 -->
54 <div class="template-skill">
55 <div class="img"><img src="" alt="" ></div>
56 <div class="skill-about">
57 <h3>${skillName}</h3>
58 <p>${skillOne}</p>
59 <p>${skillTwo}</p>
60 </div>
61 </div>
62 <!-- class改为template-equ-box -->
63 <div class="template-equ">
64 <div class="start">
65 <h4>${introduce}</h4>
66 <div class="content">
67
68 </div>
69 </div>
70 </div>
71 <!-- class改为equ-conten -->
72 <div class="equ-main">
73 <div class="item">
74 <div class="item-top">
75 <img src="" alt="" >
76 </div>
77 <p>${equName}</p>
78 </div>
79 </div>
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.response
23 // 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 //替换main
56 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 = templateString
64
65
66 //替换故事
67 templateString = story.replace( '${story}', data.story )
68 storyBox.innerHTML = templateString
69
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 = templateString
80 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 = templateString
89 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 = templateString
95 ss.appendChild( son )
96 }
97 equBox.appendChild( ss )
98 }
99 }
转自十二月出行的博客>>>>https://www.cnblogs.com/curtain473/p/10049392.html
