之前在学习完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、通过键盘导航的话如果出现相同头字母的网址，无法区分，只能按照哪个在前打开哪个网页。
网友评论