前端导航项目

之前在学习完JS，jQuery之后试着做了一个仿照谷歌的导航项目，一些基本的功能都可以实现。也可以进行扩展，打造出一个属于自己的专属导航界面。

【项目介绍】
项目名称 : 极速导航
具体功能 : 搜索、新增网站、删除网站、键盘导航

【技术栈】

jQuery
LocalStorage
SVG Symbols
媒体查询
git & GitHub

【开发工具】

VS Code & WebStorm
Figma作图(一个在线作图网站)

【效果展示】

【效果链接】
由于我是部署到GitHub上面的，所以加载会有些慢，图片有时会不显示，不是bug,耐心等待几秒图片就出来了
https://lxy-dream.github.io/nav-2/dist/index.html

【代码链接】
https://github.com/lxy-dream/nav-2

【正文】

一、Figma作图

在开始做项目之前，需要把设计稿先做好，作图工具我采用的是Figma这个在线网站。当然，也可以采用PS进行作图。总之，在开始编写之前一定要有一个设计稿或者大致的轮廓才行。下面是我用Figma作图的地址链接，可以进行参考:

项目设计

二、创建文件

我使用VS Code来搭建项目文件，搭建之后的文件目录结构如下 :

（注:.cache文件夹、dist文件夹是用parcel命令行进行预览时候生成的文件，直接看src文件夹里面的内容即可）

三、写HTML和CSS

1、为了防止移动端页面被用户随意放大缩小，需要重写meta,可直接复制粘贴淘宝网页上面的meta。代码如下:

    <meta name="viewport"
        content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

说明

引入style.css文件

<link rel="stylesheet" href="style.css">

生成网址前面的小图标

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />

2、页面框架搭建
根据设计图纸进行搭建，最好采用语义化进行编写。由于使用了一些外部文件，所以需要引入。

说明

引入main.js文件

 <script src="main.js"></script>

引入icon图标

   <script src="//at.alicdn.com/t/font_1731808_u2qs0ecook.js"></script>

引入jQuery，使用bootcdn

 <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>

3、写CSS
在给元素加样式的话需要特定情况特定分析，为了适合移动端，我采用了媒体查询这个功能进行响应。为了让我的页面画板不受其他元素的影响，我会先加入如下样式 :

* {
  box-sizing: border-box;
}
*:before,
*:after {
  box-sizing: border-box;
}
* {
  margin: 0;
  padding: 0;
}

扩展

1、给body加上背景色的话浏览器会智能的把它扩展到整个网页）

2、图标可以使用iconfont，这用到了SVG Symbols，即阿里提供的一个矢量图标库。
步骤:

进入网站找到需要的图标，加入购物车
添加进项目里面
选择Symobl,接着点击查看在线链接，复制生成的代码即可
然后在html文件里面添加下面几行代码

    <style type="text/css">
        .icon {
            width: 1em;
            height: 1em;
            vertical-align: -0.15em;
            fill: currentColor;
            overflow: hidden;
        }
    </style>

在需要添加图标的div里面添加下面代码:

 <svg class="icon">
                            <use xlink:href="#icon-add-pluss-"></use>
                        </svg>

四、功能实现

1、搜索功能
搜索是什么，是我发送一个请求，服务器接收我这个请求之后给我传递回来一个参数，可以利用form表单，包裹住input。来实现搜索功能。

2、新增功能
如何新增一个网站，简单流程就是弹出一个对话框，让用户输入网址，点击确认，在页面显示出来用户新增的网站书签。

创建站点

$(".addButton").on("click", () => {
    let url = window.prompt("请问你要添加的网址是什么？");
    if (url.indexOf("http") !== 0) {
        url = "https://" + url;
    }
    console.log(url);
    hashMap.push({
        logo: simplifyUrl(url)[0].toUpperCase(),
        logoType: "text",
        url: url
    });
    render();
});

构建哈希数组，用于留存添加的网站

const $siteList = $(".siteList");
const $lastLi = $siteList.find("li.last");
const x = localStorage.getItem("x");
const xObject = JSON.parse(x);
const hashMap = xObject || [{
        logo: "A",
        url: "https://www.acfun.cn"
    },
    {
        logo: "B",
        url: "http://www.bilibili.com"
    }
];

新增网站显示在页面中

const render = () => {
    $siteList.find("li:not(.last)").remove();
    hashMap.forEach((node, index) => {
        const $li = $(`<li>
              <div class="site">
                  <div class="logo">${node.logo}</div>
                  <div class="link">${simplifyUrl(node.url)}</div>
                  <div class="close">
                  <svg class="icon">
                      <use xlink:href="#icon-close"></use>
                  </svg>
                  </div>
              </div>
      </li>`).insertBefore($lastLi);

3、键盘导航
只需要监听document元素就行了，代码如下 :

$(document).on("keypress", e => {
    const {
        key
    } = e;
    for (let i = 0; i < hashMap.length; i++) {
        if (hashMap[i].logo.toLowerCase() === key) {
            window.open(hashMap[i].url);
        }
    }
});

改进地方

1、由于书签小标是自动从网站获取的，所以会出现如果不是https开头com结尾的网站的话是生成不了小图标的。
2、通过键盘导航的话如果出现相同头字母的网址，无法区分，只能按照哪个在前打开哪个网页。