JS CSS HTML 的代码如何快速封装
我们为什么要封装代码，是因为封装后的代码，会显得非常美观，减少代码的复用，方便我们更好的去维护代码，不用一个一个页面的去找去改，直接封装好的代码里面去改就可以了
目录
1.html代码封装
2.CSS代码封装
3.JS代码封装
1.html代码封装
如果每个页面或者多个页面都有一样的结构，可以再设置一个html文件，用来写这些结构，然后再要所有的html文件里面引用jqurey文件，然后给要使用这个html结构的元素一个id，通过id使用jqurey的 load（）这个方法运行封装的html文件，如果一个div或元素就可以完成的事情，就不要去嵌套多个div或元素
具体操作
<!-- 公共布局 public.html -->
<div class="public-head">
<p><a href="">首页</a></p>
<p><a href="">数字中国</a></p>
<p><a href="">云服务</a></p>
<p><a href="">企业营销</a></p>
<p><a href="">企业办公</a></p>
<p><a href="">知识产权</a></p>
<p><a href="">招商加盟</a></p>
</div>
<!-- 使用布局界面 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="public-head"></div>
</body>
<!-- 引入在线jq -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<!-- 嵌入公共布局 public.html -->
<script type="text/javascript">
$(function(){
$('#public-head').load('public.html');
})
</script>
</html>
2.CSS代码封装
css的样式在一个页面有多个一样的css样式，不需要去声明多个class或者id名字，只需要使用的元素声明一个class名字就可以了，在css里也只需要使用这个class，写一遍就可以了
一些在好几个css常用的css样式，就可以在使用一个css文件封装起来，比如页面背景色，弹出窗的样式，分页的样式，这些都可以通过一个通用的css文件封装起来方便使用
下面的是封装的css通用的代码，这里面封装了背景色和弹出窗的样式
具体怎么在页面使用，可以通过link标签引入这些css样式，方便我们的html里面使用
下面是引用的方法
<link rel="stylesheet" href="./css/tooltip.css" />3.JS代码封装
3.1函数的封装
3.1.1函数也是一个对象
3.1.2函数中可以封装一些功能，在需要的使用可以执行这些功能
3.1.3函数中也可以保存一些代码在需要的时候调用
3.1.14使用typeof检查一个函数对象时，回返回function
3.2使用js文件封装同样的js代码，比如下面分页功能的代码
//一页有多少条数据
let num = 10;
//页码下标
let page_index = 0;
//总页数
let total_page;
// 页数渲染
function pagenumber(data) {
let pagination = ``;
pagination += `<div class="data-count">共 ${data.length} 条</div>`;
pagination += `<select id="show" value="${num}" onchange="selects()">
<option ${num == 10 ? 'selected' : ''} class="option" value="10">10条/页</option>
<option ${num == 20 ? 'selected' : ''} class="option" value="20">20条/页</option>
<option ${num == 50 ? 'selected' : ''} class="option" value="50">50条/页</option>
</select>
<div class="paging_Previous" id="up" onclick="back_page()">
<img src="./img/lefte.png" alt="" />
</div>`;
// 获取总页数
total_page = Math.ceil(data.length / num);
// 总页数小于6，执行if的内容，大于6执行else
if (total_page < 6) {
for (let j = 0; j < total_page; j++) {
pagination +=
`<div class="paging_num" onclick="sort(${j})" ${page_index == j ? 'style="color:#0c66ff;"' : '""'}>${j + 1}</div>`;
}
} else {
// 判断显示哪几页的页数
if (page_index > total_page - 4) {
pagination +=
`<div class="paging_num" onclick="sort(${0})" ${page_index == 0 ? 'style="color:#0c66ff;"' : '""'}>1</div>...`;
} else if (page_index >=3){
page_num = page_index - 2;
pagination +=
`<div class="paging_num" onclick="sort(${0})" ${page_index == 0 ? 'style="color:#0c66ff;"' : '""'}>1</div>...`;
}
// 循环页数
for (let j = page_index - 2 < 0 ? 0 : (page_index + 2 > total_page - 1 ? page_index = total_page - 3 :
page_index - 2); j < page_index + 2; j++) {
pagination +=
`<div class="paging_num" onclick="sort(${j})" ${page_index == j ? 'style="color:#0c66ff;"' : '""'}>${j + 1}</div>`;
}
// 用来判断是否添加省略号
if (page_index < 3) {
sti +=
`...<div class="paging_num" onclick="sort(${total_page - 1})" ${page_index == total_page - 1 ? 'style="color:#0c66ff;";' : '"'}>${total_page}</div>`;
} else if (page_index <= total_page - 4) {
sti +=
`...<div class="paging_num" onclick="sort(${total_page - 1})" ${page_index == total_page - 1 ? 'style="color:#0c66ff;";' : '"'}>${total_page}</div>`;
}
}
pagination += `<div class="paging_Previous" id="bottom" onclick="next_page()">
<img src="./img/righte.png" alt="" />
</div>`;
pagination +=
`<div>前往<input type="text" class="inputs" placeholder="请输入页码" onkeyup="if(event.keyCode==13){search()}">页</div>`;
$('#paging').html(pagination);
}
// 分页内容搜索
function search() {
// 获取输入框的值
let input = document.querySelector('.inputs').value;
// 转换输入值为整数
let pageNumber = parseInt(input, 10);
// 验证输入值
if (isNaN(pageNumber) || pageNumber < 1 || pageNumber > total_page) {
// 弹出警告提示
// 显示超出限制的提示
tooltip.innerHTML = `超出页面范围`;
//修改弹出窗的样式
tooltip.style = "display:block;";
$('.inputs').val('');
setTimeout(function() {
tooltip.style = "display:none";
}, 2000);
} else {
// 更新当前页码
page_index = pageNumber - 1;
// 调用 apply 函数更新分页内容
applys(res);
}
}
//下一页
function next_page() {
//k小于总页数-1
if (page_index < total_page - 1) {
//每次点击加1
page_index++;
}
//调用渲染函数
applys(res);
}
//上一页
function back_page() {
//k大于0
if (page_index > 0) {
//每次点击-1
page_index--;
//调用渲染
applys(res);
}
}
// 改变每页渲染的数据条数
function selects() {
// 获取下拉框的value
let value = $('#show').val();
// 选中大家下拉框的选项
$("#mySelect").val(value);
// 让每页的数据等于下拉框的value值
num = value;
// 重新计算总页数
total_page = Math.ceil(res.length / num);
if (page_index > total_page - 1) {
page_index = total_page - 1;
}
// 调用渲染函数
applys(datas);
}
// 点击切换页面数据事件
function sort(j) {
// 让页数调用点击的页数
page_index = j;
// 调用渲染函数
applys(datas);
}
它是通过重新封装一个js代码在页面中使用
比如分页的功能，加减功能都可以封装起来，获取接口域名，一些判断，也方便如果代码出问题了，好修改，然后再html里面直接引入js就可以使用了
通过下面的这个方法引入到页面中使用
<script src="./js/pagination.js"></script>