从0解构tinyWeb项目--(Day:2)

今日目标

项目对应代码

今日内容

Dom操作

dom是文档对象模型，就是html中的树状结构

dom操作可以通过JavaScript对文档对象进行增删改查

例如具体我的项目中

这里var totalEl = document.getElementById('totalVisits');

就是指把id为totalVisits的那个 < span > 元素的那个位置赋给变量totalEl, document就是这个网站的控制台,控制台里有很多我们可以用的函数,另外这个赋给一个变量是因为后续可能要多次操作，可以简化代码，也就是说要多次用到totalEl;

这里data.是指后端返回的json数据，这个数据需要先获取，在后续代码中会先用fetch函数获取再调用这个renderState函数，在判断了data..不等于undefined和null时将这个值赋给totalEL.textContent,之前说到totalEL可以理解成一个位置，这里就是赋给了这个位置里的数据了。然后再动画函数，三个if的格式都是差不多的就不再讲，注意最后一个if的判断条件可以理解为，读取了last_visits_at的值确定是对应时间的字符格式（2026/../.. 时/分/秒）才赋值。

注释：data的结构类比

sessionStorage是什么

可以把这个当做一个当前标签页的一个内置小空间，里面存放了某些东西，这里的具体作用就是存放了一个标签（这个标签可以看成哈希表，它的下标是visit_recorded,值是true）如果在第一次访问这个网站打开标签页时，会定义visited_recorded并赋值true，于是你就可以通过调取visit_recorded的值来判断是不是同一个标签页（网站刷新前和刷新后是同一标签页，只有关闭网站再次打开才是另一个标签页），这就可以起到防止单纯刷新网站也会增加访问量数字的问题。

getItem，和setItem

第一次访问是我们先getItem访问值，但是显然这时没有set值，那么就if条件判断结果为！get...，那么就会执行setItem,存值

fetch api（重点）

实际上这个fetch有两次，而且完整逻辑代码相当长，在if/else这个大框架内存在

fetch是什么

fetch是http请求。（http：客户端和服务器之间的"通信规则/语言"）

fetch的作用是向后端服务器发送http请求，把json化的用户数据 发送到后端服务器上，然后通过url路由匹配对应的函数处理数据，最后返回得到的数据。这个项目就是对应得到处理后的访客量，时间，以及人数等数据

因为fetch是前端的代码，前端代码向后端服务器代码发出请求，要调用后端代码，然而前端和后端的代码服务器的位置是不一样的，可能我的浏览器是在重庆，而储存后端代码的服务器在深圳。

我们不能直接调用后端代码，就需要通过http协议访问后端服务器，

fetch的格式

body内是json化的访问用户的信息，method是post，

API_BASE +'/api/visit',

API_BASE就看作网址，api/visit是路由，路由是用来找到处理数据的后端的对应函数，也可以看做哈希表

fetch的返回值

我们只看代码，fetch其实没有相应的 return语句，但其实他是有对应的内置返回值，可以想象成有一个隐藏的return 值，在后面.then异步回调中就会体现

这里就先说fetch函数会返回一个promise对象，这个对象中有很多属性，

我们可以看到，他会返回状态三种的一种，结果值两种中的一种，以及两个可以调用的方法then（成功时调用）以及catch（失败时调用）

异步回调(.then() && .catch())

就是不阻塞后续代码的意思，比如我们这个第二个程序settimeout是需要一些时间才能执行console log，那么他会先打印'开始'，再打印'结束'，最后等'2秒后结束'可以打印了最后打印

这里.then(function(res){ return res.json()});中就是在等处理后的数据（在fetch函数返回的promise属性中）解析成前端js的数据格式，

完整的数据变化示例

我们看到前端发送的数据就是最初的格式1：未处理数据js格式，然后通过fetch请求json化（图中没显示）变为格式 2:未处理数据json格式，进过服务器调用函数处理过后，返回格式3:调用函数处理过数据json格式，然后.then这里第一个function功能就是把格式3 变成格式4:调用函数处理过数据js格式，并返回

等这个结束了继续执行.then(function(res)){console.log(' $Visit$ 记录结果',res)，这里的参数res是第一个then的返回值也就是格式4，他是自动传递的，

这里的res只是个参数名

if/else中的完整逻辑理解（代码3596~3646）

那么知道了fetch和.then.cath之后理解全部的if else分支代码

就是说在第一个fetch请求个人数据的框架下的then会继续fetch请求统计数据，请求统计数据的失败是第一个fetch，然后如果第二个fetch也就是说连第一次fetch个人访问都没成功的情况下，他就跳过个人访问，先把原本未更新的的统计数据返回