前言

本文介绍如何用js封装一个组件，这里以导航栏为例。
看这篇文章你需要有一定的js基础哦

一、实现思路介绍

我打算写个如图1-1 所示的导航栏；在前端用div作为组件的容器，并设置ID为‘nav’，在div上添加两个属性Avalue、Alink，分别用来传递a标签的文本值和href值，多个值之间用分号隔开，如图1-2；最后用js获取Avalue、Alink的值，将Avalue、Alink按分号进行切割存到数组中，然后用for循环拼接a标签和li标签，最后再用innerHTML方法将HTML标签写入，如图1-3。

图 1-1

图 1-2

图 1-3

二、代码

1.html代码

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>前端组件封装测试</title><script type="text/javascript" src="js/test.js"></script><link rel="stylesheet" href="css/index.css" /></head><body><!-- 导航栏 --><div id="nav" Avalue="百度网;新华网;百度网;新华网" Alink="https://www.baidu.com/;http://www.gx.xinhuanet.com/;https://www.baidu.com/;http://www.gx.xinhuanet.com/"></div></body>
</html>

Tip：核心代码就一句，其实作用就是为组件提供一个容器，ID必须与js对应起来，我这里ID设置为‘nav’，Avalue和Alink也必须与js对应起来，多个值之间用分号隔开。

2.js代码

// 页面加载时加载样式
window.onload = function(){//alert('测试测试');//获取A标签的文本var Avalue = document.getElementById("nav").getAttribute("Avalue");//获取A标签的href值var Alink = document.getElementById("nav").getAttribute("Alink");//声明一个数组存储A标签的文本值var AvalueArr = new Array();AvalueArr = Avalue.split(';');for(var i=0; i<AvalueArr.length; i++){console.log(AvalueArr[i]);    }//声明一个数组存储A标签的href值var AlinkArr = new Array();AlinkArr = Alink.split(';');//声明一个html字符串变量var htmlA = "";//循环拼接html a、li标签for(var i=0;i<AvalueArr.length;i++){htmlA  += '<a href="'+AlinkArr[i]+'"><li>'+AvalueArr[i]+'</li></a> \n' ;}console.log(htmlA)//获取组件容器IDvar _self = document.getElementById('nav');//写入html标签 即写入导航栏组件样式_self.innerHTML = '<!-- 导航栏 开始 -->'+'<div class="nav">'+'<!--导航栏左部分 开始-->'+'<div class="nav-left">'+'<ul>'+ htmlA +'</ul>'+'</div>'+'<!--导航栏左部分 结束-->'+'<!--导航栏右部分 开始-->'+'<div class="nav-right"></div>'+'<!--导航栏右部分 结束-->'+'</div>'+'<!-- 导航栏结束 -->';
}

Tip：代码中注释写的很清楚，其作用就是获取前端DIV的两个属性（Avalue、Alink ），对其进行分割存储到数组中，将其拼接到html的a标签里，最后用innerHTML 方法将所有的HTML写入到前端容器中。

3.css代码

*,body,html{padding: 0;margin: 0;
}
/*导航栏样式*/
.nav{width: 100%;height: 8vh;background: #005ead;
}
.nav-left{display: inline-block;width: 80%;/*background: red;*/padding-left: 15px;
}
/*.nav-active{background: #fff;color: #FF8929;
}*/
.nav-left ul li{display: inline-block;list-style: none;line-height: 8vh;padding: 0 5px;
}
.nav-left ul li:hover{background: #fff;color: #FF8929;
}
.nav-left ul a{text-decoration: none;color: #fff;
}
.nav-right{display: inline-block;width: 17%;height: 8vh;overflow: hidden;/*border: 1px solid black;*/background-image: url(../img/logo20200324.png);background-size: cover;margin-top: -5vh;
}/*轮播图样式*/
.slideshow{width: 80%;height: 25vh;background: #c1c1c1;margin: 10px auto;overflow: hidden;
}
.slideshow-module{width: 24.72%;height: 25vh;background: #005EAD;display: inline-block;
}/*主体内容样式*/
.container{width: 80%;height: 50vh;background: #C1C1C1;margin: auto;
}
/*头条样式*/
.headlines{width: 100%;height: 10vh;margin: auto;background: #005EAD;
}

Tip：css没啥好讲的

总结

封装组件是一劳永逸的事情，在日常工作中我们经常要反反复复写同样的代码，把时间花费了却没啥效率，因此以后大家可以尝试封装属于自己的组件库或框架。

手把手教你用js封装一个导航栏组件相关推荐

android底部导航栏下沉,【详细】手把手教你快速实现Android底部导航栏
1. 实现底部的Tab,自定义TabContainerView 继承 RelativeLayout,这是我们最终封装的View工具类.其内部主要由viewpager和底部的TabHost类组成. Vi ...
手把手教你用js写一个可以选择年月的动态日历组件
啥话不说,我们先上效果图,源码放在最后 1.实现的功能用年切换日历.用月切换日历, 可以显示用月显示,也可以用年显示,可以在日历中显示对应某天的时间 2.编写界面代码 <!DOCTYPE ht ...
纯js封装一个无缝轮播
下面的代码用纯js封装一个轮播组件.功能如下: 可上滑.下滑.左滑.右滑.无缝轮播. 移动端支持手势滑动. 可指定第一个显示的轮播图. 支持放置文字.图片和视频.带导航器. 导航器可自定义样式.若不想 ...
JS实现动画特效2（缓动函数封装、导航栏筋斗云效果）
JS实现的动画特效:手风琴特效展示图片.筋斗云动画一.小知识 1.浏览器的offsetLeft是就近取整,要实现向上取整或向下取整,可以调用Math.ceil()或Math.floor() 2.想要 ...
手把手教你使用nodejs编写一个【使用远程仓库模板，快速创建项目模块】的cli(命令行)
目录实现步骤初始化cli项目项目目录创建交互式命令拉取远程仓库代码,读取仓库中的模板拉取远程仓库代码 ora 终端 loading 读取仓库中的模板将选择的模板复制写入目标项目 Comm ...
python界面设计-手把手教你用Python设计一个简单的命令行界面
原标题:手把手教你用Python设计一个简单的命令行界面对 Python 程序来说,完备的命令行界面可以提升团队的工作效率,减少调用时可能碰到的困扰.今天,我们就来教大家如何设计功能完整的 Pyth ...
纯js封装一个多功能弹出框
不借助其它的css代码和图片资源,可直接调用. 原创内容,请勿转载. 注意,不要直接复制文章里的封装代码,因为编辑器的原因,无论怎么编辑,它还是给修改了代码.文末提供了封装代码的下载地址(无需积分) ...
手把手教你用C#写一个刷屏软件
手把手教你用C#写一个刷屏轰炸软件成品展示环境准备新建项目程序思路程序部分完整代码成品展示环境准备 VS2019 新建项目打开界面绘制打开工具箱开始放置按钮标签以及文本框最后设计 ...
IP门禁：手把手教你用PHP实现一个IP防火墙
最近我遇到一个需求,我的一台服务器总是遭到端口扫描和恶意登录攻击,对此可以怎么办呢?似乎除了内网隔离.增强密码认证.证书登录.设置防火墙iptables,网上找不到什么别的方案,对了,还用堡垒机的方案 ...

手把手教你用js封装一个导航栏组件

文章目录

前言