键盘导航知识点总结
项目预览链接：GitHub Pages
项目链接：GitHub
项目描述：用JavaScript创建一个可以自己更改链接、样式为键盘的导航网站。
使用JavaScript给HTML添加多个div
我们在构建HTML的时候，出于结构需要可能会需要添加多个具有相同属性、class的div，但是我们需要直接在HTML中层层搭建出来吗？这样操作步骤未免也太繁琐了，也显得结构十分臃肿。
我们可以使用JS代码在指定的HTML标签内自动生成div。
比如说我们现在的HTML结构是这样：
<div class="wrapper" id="mainFather"></div>
我们要在这个div中生成一个span标签：
<script>
//创建一个span标签
var span = document.createElement('span')
//如有需要给span标签添加class和内容
span.className = 'spanClass'
span.textContent = "内容"
//添加进指定的HTML标签中
mainFather.append(span)
</script>
这样我们就得到了一个通过JS代码主动生成的div了：
<div class="wrapper" id="mainFather">
<span class = "spanClass">
内容
</span>
</div>
这只是添加一个内容的案例，如果我们需要添加多个内容呢？
我们这就需要用到循环了：
<script>
for (var index = 0;index < 10;index++){
//创建一个span标签
var span = document.createElement('span')
//如有需要给span标签添加class和内容
span.className = 'spanClass'
span.textContent = "内容"
//添加进指定的HTML标签中
mainFather.append(span)
}
</script>
我们通过for循环，给HTML中添加了10个class为spanClass,内容为内容的span:
<div class="wrapper" id="mainFather">
<span class = "spanClass">内容</span>
<span class = "spanClass">内容</span>
<span class = "spanClass">内容</span>
<span class = "spanClass">内容</span>
<span class = "spanClass">内容</span>
<span class = "spanClass">内容</span>
<span class = "spanClass">内容</span>
<span class = "spanClass">内容</span>
<span class = "spanClass">内容</span>
<span class = "spanClass">内容</span>
</div>
在实际的生产开发环境中，我们也可以运用类似的思路，根据工作任务和提供的接口，使用JS代码为结构做出一定的优化，提升工作效率。
监听键盘事件
在完成项目的过程中，有一个需求是需要知道用户在键盘上敲击了哪个键，这样我们才可以根据用户敲击的键位，跳转到具体的网址。
我们可以直接给document添加一个监听事件，用户一旦来到我们的网页，我们就可以监听用户的键位：
document.onkeypress = function(keyWord) {
// 得知用户按下的是哪个键
var key = keyWord['key']
//得到用户所获得的哪个地址
var website = hash[key]
// 在当前窗口打开网站地址
// location.href = "http://" + website
//在新窗口打开网站地址
window.open("http://" + website,'_blank')
}
在这里我也学到了一个小技巧：
就是善用开发者工具和console.log()
我们该怎么知道用户按键的具体位置在哪里，有哪个地方会有显示出来？
我们直接打印出来，然后再控制台查看提供的API，得知正是key表示我们刚才所按下的键位：
document.onkeypress = function(keyWord) {
//善用console.log()
console.log(keyWord)
// 得知用户按下的是哪个键
var key = keyWord['key']
//得到用户所获得的哪个地址
var website = hash[key]
// 在当前窗口打开网站地址
// location.href = "http://" + website
//在新窗口打开网站地址
window.open("http://" + website,'_blank')
}
使用localStorage
只读的localStorage 允许你访问一个Document 的远端（origin）对象 Storage；数据存储为跨浏览器会话。 localStorage 类似于sessionStorage。区别在于，数据存储在 localStorage 是无期限的，而当页面会话结束——也就是说当页面被关闭时,数据存储在sessionStorage 会被清除 。
应注意无论数据存储在 localStorage 还是 sessionStorage ，它们都特定于页面的协议。
当用户提交了信息或是对数据做出了修改，我们希望他刷新页面之后还可以保留下来，可以用localStorage。
// 使用localStorage进行存储
localStorage.setItem(`myCat`, `Tom`)
// 使用localStorage进行读取
let cat = localStorage.getItem(`myCat`)
// 移除所有的localStorage项
localStorage.clear()
值得注意的是，localStorage只能存储和提取字符串，所以在存储之前我们应该把不是字符串的数据处理一下：
localStorage.setItem('myCat', JSON.stringify(Tom))
使用onerror处理图片加载失败
onerror 事件会在文档或图像加载过程中发生错误时被触发。
在装载文档或图像的过程中如果发生了错误，就会调用该事件句柄。 ---w3c定义
具体到项目中的实现就是：
一旦img的图片地址没有获取或者加载成功，那么这个onerror事件会触发，就会把地址自动设置为我们自己上传的图片的链接地址
function imgMaker(src){
var img = tag('img')
if (src) {
img.src = 'http://' + src + '/favicon.ico'
}else {
img.src = '//i.loli.net/2018/08/13/5b7119df79c1a.png'
}
//here
img.onerror = function(xxx){
xxx.target.src = '//i.loli.net/2018/08/13/5b7119df79c1a.png'
}
return img
}
代码优化
组织形式
把内容相关的代码归为一块，利于维护
进行正确的变量声明
函数封装（把一些常用的、复杂的、重复的步骤用函数封装起来）
比如我们之前写的：
<script>
//创建一个span标签
var span = document.createElement('span')
//如有需要给span标签添加class和内容
span.className = 'spanClass'
span.textContent = "内容"
//添加进指定的HTML标签中
mainFather.append(span)
</script>
那么我们可以把他封装成一个函数，不管是span也好，div也好，我们都可以通过这个调用这个函数进行创建，并且还能设置他的属性：
function tag(name,attrs){
var element = document.createElement(name)
for (var key in attrs) {
element[key] = attrs[key]
}
return element
}
当我们需要创建一个class为spanClass,内容为内容的span时，我们只需要输入一条代码：
var span = tag('span',{className:`spanClass`,textContent:'内容'})
我们就可以创建成功了！