[JavaScript]键盘导航知识点总结

键盘导航知识点总结

项目预览链接：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:'内容'})

我们就可以创建成功了！