JS CSS HTML 的代码如何快速封装

htmledit_views">

我们为什么要封装代码，是因为封装后的代码，会显得非常美观，减少代码的复用，方便我们更好的去维护代码，不用一个一个页面的去找去改，直接封装好的代码里面去改就可以了

html%E4%BB%A3%E7%A0%81%E5%B0%81%E8%A3%85-toc" style="margin-left:0px;">1.html代码封装

2.CSS代码封装

3.JS代码封装

html%E4%BB%A3%E7%A0%81%E5%B0%81%E8%A3%85">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/html" title=javascript>javascript">$(function(){$('#public-head').load('public.html');})</script>
</html>

2.CSS代码封装

html" title=css>css的样式在一个页面有多个一样的html" title=css>css样式，不需要去声明多个class或者id名字，只需要使用的元素声明一个class名字就可以了，在html" title=css>css里也只需要使用这个class，写一遍就可以了

一些在好几个html" title=css>css常用的html" title=css>css样式，就可以在使用一个html" title=css>css文件封装起来，比如页面背景色，弹出窗的样式，分页的样式，这些都可以通过一个通用的html" title=css>css文件封装起来方便使用

下面的是封装的html" title=css>css通用的代码，这里面封装了背景色和弹出窗的样式

具体怎么在页面使用，可以通过link标签引入这些html" title=css>css样式，方便我们的html里面使用

下面是引用的方法

<link rel="stylesheet" href="./html" title=css>css/tooltip.html" title=css>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执行elseif (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小于总页数-1if (page_index < total_page - 1) {//每次点击加1page_index++;}//调用渲染函数applys(res);
}//上一页
function back_page() {//k大于0if (page_index > 0) {//每次点击-1page_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>