分享一个纯JS编写的分页工具

> 最近在阅读公司项目代码的时候, 发现分页部分看不懂了, 当时我就想

> 最近在工作中遇到一些分页相关的问题, 对于别人封装好的又不咋会用, 于是 , 就突发奇想, 想写一个属于自己专属的分页工具, 满足一下需求:

> * 用纯js编写

> * 无依赖, 方便嵌入项目

> * 最好能用到面向对象的知识

> 综上想法, 于是, 一个使用面向对象思想编写的纯s分页就出现了

> 如果有想用的朋友可以拿去用, 记得多多留下宝贵意见, 感激不尽, 对了 ,代码是纯js编写. 使用到了es6语法,所以不支持试es6语法的浏览器理论应该跑不起来

## 工具源码

```js

/**

* 分页参数配置对象,用于配置分页参数信息

class AttrConf{

/**

* 分页基本属性

curPage = 1;

limit = 10;

limits = [10,20,30,50,100];

dataTotal = 0;

pageTotal = 0;

pageBox = {

items:7,

pages:[],

}

rowNo = {

start:1,

end:1

}

/**

* 分页配置构造器

* @param {*} curPage 当前页

* @param {*} limit 每页显示条数

* @param {*} dataTotal 总数据条数

constructor(curPage,limit,dataTotal){

this.init({curPage,limit,dataTotal});

}

init(param){

if(param.curPage){

this.setCurPage(param.curPage);

}

if(param.limit){

this.setLimit(param.limit);

}

if(param.dataTotal){

this.setDataTotal(param.dataTotal);

}

this.initOthers();

}

/**

* 初始化分页配置项其他属性

initOthers(){

//初始化总页数

if(this.dataTotal>0){

this.pageTotal = parseInt(this.dataTotal / this.limit) + (this.dataTotal % this.limit == 0 ? 0 : 1);

//确保当前页始终在总页数限制范围内

if(this.curPage > this.pageTotal){

this.curPage = this.pageTotal;

}

//初始化当前页显示数据索引

if(this.dataTotal <= this.limit){

this.rowNo.start = 1;

this.rowNo.end = this.dataTotal;

}else if(this.curPage == this.pageTotal){

this.rowNo.start = (this.curPage - 1) * this.limit + 1;

this.rowNo.end = this.dataTotal;

}else{

this.rowNo.start = (this.curPage - 1) * this.limit + 1;

this.rowNo.end = this.rowNo.start + this.limit - 1;

}

//初始化页码总数

this.setPageCodes();

}

/**

* 设置当前页

* @param {Number} curPage 当前页

* @param {Boolean} reloadOthers 是否初始化其他属性默认不初始化

setCurPage(curPage,reloadOthers){

this.curPage = curPage;

if(reloadOthers == true){

this.initOthers();

}

/**

* 设置每页显示条数

* @param {Number} limit 每页条数

* @param {Boolean} reloadOthers 是否初始化其他属性默认不初始化

setLimit(limit,reloadOthers){

this.limit = limit;

if(reloadOthers == true){

this.initOthers();

}

/**

* 设置总数据条数

* @param {Number} dataTotal 总数据条数

* @param {Boolean} reloadOthers 是否初始化其他属性默认不初始化

setDataTotal(dataTotal,reloadOthers){

this.dataTotal = dataTotal;

if(reloadOthers == true){

this.initOthers();

}

/**

* 设置当前页显示的可快捷跳转的页码个数如 2,3,4,5,6

setPageCodes(){

this.pageBox.pages = [];

if(this.pageTotal <= this.pageBox.items){

for(let i = 1; i <= this.pageTotal; i++){

this.pageBox.pages.push(i);

}

return ;

}

//总页数大于配置的要显示的总页码数, 比如总页数是10 ,配置的是每页显示6个页码

//得到以当前页为中心向左右便宜的偏移量向下取整

let offset = Math.floor(this.pageBox.items / 2);

this.pageBox.pages.push(this.curPage);

let pagesLen = this.pageBox.pages.length;

let skipL = 0,skipR = 0;

for(let i = 1; i <= offset; i++){

let maxPage = this.curPage + i;

let minPage = this.curPage - i;

//每循环一次,检测一次当前总页码项数,只有总页码项数小于配置项才添加

if(pagesLen < this.pageBox.items){

//往右边添加页码

if(minPage >= 1){

this.pageBox.pages.unshift(minPage);

//从新计算总页码相熟方便下次循环参考

pagesLen += 1;

}else{

skipR += 1;

}

if(pagesLen < this.pageBox.items){

//往左边添加页码

if(maxPage <= this.pageTotal){

this.pageBox.pages.push(maxPage);

//从新计算总页码相熟方便下次循环参考

pagesLen += 1;

}else{

skipL += 1;

}

//处理总页码数不满足配置项的情况

if(skipL > 0 ){

//说明需要向左边补充skipL个盒子

for(let i = 1; i <= skipL; i++){

let startPage = this.pageBox.pages[0];

if(pagesLen < this.pageBox.items){

this.pageBox.pages.unshift(startPage - 1);

//从新计算总页码相熟方便下次循环参考

pagesLen += 1;

}

if(skipR > 0 ){

//说明需要向左边补充skipL个盒子

for(let i = 1; i <= skipR; i++){

let endPage = this.pageBox.pages[pagesLen-1];

if(pagesLen < this.pageBox.items){

this.pageBox.pages.push(endPage + 1);

//从新计算总页码相熟方便下次循环参考

pagesLen += 1;

}

/**

* 分页视图配置对象,用于根据分页参数创建dom元素

class ViewConf{

AttrConf;

/**

* 分页视图对象分为左右两大区域,当左侧隐藏,右侧自动填充

* 左侧区域可以显示或关闭

* 基本信息(base)

* 右侧区域以下视图模块可任意组合

* 上一页(prev),下一页(next),页码区(pages),每页显示条数(limits),快速跳转(jump)

layout = {

unit: '%',

main: null,

left:{

show: true,

width: 27,

ids: ['base'],

dom:null,

modules: {},

right:{

width: 100,

ids: ['prev','pages','next','limits','jump'],

dom:null,

modules:{}

}

};

modules = {

pages:[]

};

// 分页按钮颜色主题配置

theme = {

deault:{

pageBtn:{border:"#e1f5fe",boxShadow:"#c4d8e0"},

pageBtnCur:{border:"#e1f5fe",color:"#8BC34A",boxShadow:"#c4d8e0",backgroundColor:"#e1f5fe"},

pageBtnDisabled:{border:"#e1f5fe",color:"#636262",boxShadow:"#ddf2fb"},

}

//默认基本样式

cssMap = {

base:{//分页信息样式

fontSize: "13px",

color: "rgb(58, 63, 66)",

pageBtn:{ //按钮基本样式

border: "1px solid #ccc",

padding: "3px 5px",

borderRadius: "3px",

display: "inline-block",

fontSize: "13px",

margin: "0 2px",

boxShadow: "inset 0px 0px 3px 1px #c7c2c2",

height: "20px",

color: "rgb(58, 63, 66)",

lineHeight: "20px",

minWidth: "30px",

textAlign: "center",

cursor: "pointer",

textDecoration: "unset"

pageBtnHover:{//鼠标经过按钮样式

boxShadow: "inset 0px 0px 4px 2px #c7c2c2",

color:"unset"

pageBtnPressDown:{//按钮按下样式

color:"darkorange",

boxShadow: "inset 0px 0px 5px 3px #c7c2c2",

fontWeight: "bolder",

pageBtnCur:{ //当前页按钮样式

boxShadow: "#81D4FA 0px 0px 3px 1px inset",

color:"#009688",

fontWeight: "bolder",

cursor: "not-allowed",

border: "1px solid #E1F5FE",

backgroundColor:"#E1F5FE"

pageBtnDisabled:{//按钮禁用样式

border: "1px solid #efefef",

boxShadow: "#efefef 0px 0px 3px 1px inset",

color: "#efefef",

cursor: "not-allowed",

}

/**

* 分页视图对象构造器

* @param {AttrConf} AttrConf 对象

constructor(AttrConf,theme){

this.AttrConf = AttrConf;

this.initTheme(theme);

this.initLayout();

this.initModuls();

}

/**

* 设置主题样式

* @param {*} theme

initTheme(theme){

if(!theme)

theme = "default";

let themeConf = this.theme[theme];

if(!themeConf)

themeConf = this.theme.deault;

for(let key in this.cssMap){

switch(key){

case "pageBtn":

this.cssMap.pageBtn.border = "1px solid " + themeConf.pageBtn.border;

this.cssMap.pageBtn.boxShadow = "inset 0px 0px 3px 1px " + themeConf.pageBtn.boxShadow;

this.cssMap.pageBtnHover.boxShadow = "inset 0px 0px 5px 1px " + themeConf.pageBtn.boxShadow;

this.cssMap.pageBtnPressDown.boxShadow = "inset 0px 0px 7px 2px " + themeConf.pageBtn.boxShadow;

break;

case "pageBtnCur":

this.cssMap.pageBtnCur.border = "1px solid " + themeConf.pageBtnCur.border;

this.cssMap.pageBtnCur.boxShadow = "inset 0px 0px 3px 1px " + themeConf.pageBtnCur.boxShadow;

this.cssMap.pageBtnCur.color = themeConf.pageBtnCur.color;

this.cssMap.pageBtnCur.backgroundColor = themeConf.pageBtnCur.backgroundColor;

break;

case "pageBtnDisabled":

this.cssMap.pageBtnDisabled.border = "1px solid " + themeConf.pageBtnDisabled.border;

this.cssMap.pageBtnDisabled.boxShadow = "inset 0px 0px 3px 1px " + themeConf.pageBtnDisabled.boxShadow;

this.cssMap.pageBtnDisabled.color = themeConf.pageBtnDisabled.color;

break;

}

/**

* 初始化视图布局

initLayout(){

this.layout.main = this.createElem('div',{layout:'main'},null);

//重置右布局宽度

let ids = null;

let inst = this;

if(inst.layout.left.show){

inst.layout.right.width =- inst.layout.left.width;

//创建左布局容器

inst.layout.left.dom

= inst.createElem('div',{layout:'left'},{width: inst.layout.left.width+inst.layout.unit});

//添加模块

ids = inst.layout.left.ids;

ids.forEach(domId => inst.layout.left.modules[domId]

= inst.createElem('div',{module:domId},{}));

}

//创建右布局容器

inst.layout.right.dom

= inst.createElem('div',{layout:'right'},{width: inst.layout.right.width+inst.layout.unit});

//添加模块

ids = inst.layout.right.ids;

ids.forEach(domId => inst.layout.right.modules[domId]

= inst.createElem('span',{module:domId},{}));

}

setLayout(layout){

if(layout.left){

if(layout.left.show){

this.layout.left.show = layout.left.show;

}

if(layout.left.modules){

this.layout.left.ids = layout.left.modules;

}

if(layout.right){

if(layout.right.modules){

this.layout.right.ids = layout.right.modules;

}

this.initLayout();

this.initModuls();

}

/**

* 初始化模型,根据视图下的模型个数确定

initModuls(){

let modules = [];

let inst = this;

if(this.layout.left.show){

this.layout.left.ids.forEach(mode => modules.push(mode));

}

this.layout.right.ids.forEach(mode => modules.push(mode));

modules.forEach(module => {

let fnName = 'load' + module.substring(0,1).toUpperCase() + module.substring(1);

try{

inst[fnName](true);

}catch(e){

console.warn("模块错误,未知的模块名:"+module)

}

})

}

loadBase(){

if(!this.modules.base){

let baseDom = this.createElem('div',{module:"base"});

baseDom.innerHTML = `

<div>

<small>当前显示第 <b><start>`+this.AttrConf.rowNo.start+`</start><i>~</i><end>`+this.AttrConf.rowNo.end+`</end></b> 条</small>

</div>

<div>

<small>第 <b><cur-page>`+this.AttrConf.curPage+`</cur-page><i>/</i><total-page>`+this.AttrConf.pageTotal+`</total-page></b> 页</small>

<small>共 <b><total-data>`+this.AttrConf.dataTotal+`</total-data></b> 条记录</small>

</div>`;

this.modules.base = baseDom;

}

let baseDom = this.modules.base;

baseDom.querySelector("start").innerHTML = this.AttrConf.rowNo.start;

baseDom.querySelector("end").innerHTML = this.AttrConf.rowNo.end;

baseDom.querySelector("cur-page").innerHTML = this.AttrConf.curPage;

baseDom.querySelector("total-page").innerHTML = this.AttrConf.pageTotal;

baseDom.querySelector("total-data").innerHTML = this.AttrConf.dataTotal;

}

/**

* 加载分页页码

loadPages(isInit){

if(isInit == true){

//初始化

this.modules.pages = [];

for(let i = 0;i < this.AttrConf.pageBox.pages.length; i++){

this.modules.pages.push(this.createElem('a',{href:"#",btn:"code",module:"pages"},this.cssMap.pageBtn));

}

//修改属性

for(let i = 0;i < this.AttrConf.pageBox.items; i++){

let code = this.AttrConf.pageBox.pages[i];

let page = this.modules.pages[i];

page.innerHTML = code;

let attrMap = {

pagecode: code,

};

if(code == this.AttrConf.curPage){

attrMap.active = "";

attrMap.disabled = "";

}

this.attr(page,attrMap);

}

let offset = Math.floor(this.AttrConf.pageBox.items / 2);

if((this.AttrConf.curPage - offset) > 1){

let first = this.createElemBase('a',1);

this.attr(first,{

pagecode: 1,

href:"#",

btn:"code"

});

let lblL = this.createElemBase('a','...');

this.attr(lblL,{

disabled : "",

href:"#",

btn:""

});

this.css(first,this.cssMap.pageBtn);

this.css(lblL,this.cssMap.pageBtn);

this.modules.pages.unshift(lblL);

this.modules.pages.unshift(first);

}

if((this.AttrConf.curPage + offset) < this.AttrConf.pageTotal){

let last = this.createElemBase('a',this.AttrConf.pageTotal);

this.attr(last,{

pagecode: this.AttrConf.pageTotal,

href:"#",

btn:"code"

});

let lblR = this.createElemBase('a','...');

this.attr(lblR,{

disabled : "",

href:"#",

btn:""

});

this.css(last,this.cssMap.pageBtn);

this.css(lblR,this.cssMap.pageBtn);

this.modules.pages.push(lblR);

this.modules.pages.push(last);

}

/**

* 加载上一页

* @param {Boolean} isInit

loadPrev(isInit){

if(isInit){

this.modules.prev = this.createElem('a',{href:"#",btn:"code",module:"prev"},this.cssMap.pageBtn,'上一页');

}

// 设置按钮状态

let attrMap = {

pagecode: this.AttrConf.curPage - 1

}

if(this.AttrConf.curPage <= 1){

attrMap.disabled = ""

}

this.attr(this.modules.prev,attrMap);

}

/**

* 加载下一页

* @param {Boolean} isInit

loadNext(isInit){

if(isInit){

this.modules.next = this.createElem('a',{href:"#",btn:"code",module:"next"},this.cssMap.pageBtn,'下一页');

}

// 设置按钮状态

let attrMap = {

pagecode: this.AttrConf.curPage + 1

}

if(this.AttrConf.curPage >= this.AttrConf.pageTotal){

attrMap.disabled = ""

}

this.attr(this.modules.next,attrMap);

}

/**

* 加载快捷跳页

* @param {Boolean} isInit

loadJump(isInit){

if(isInit){

let jump = this.createElem("span",{module:"jump"},this.cssMap.pageBtn,null);

let jumpInput = this.createElem('input',{

type: "text",

maxlength: (this.AttrConf.pageTotal+"").length,

value: this.AttrConf.curPage

},{

width: ((this.AttrConf.pageTotal+"").length * 11) + "px",

textAlign: 'center',

fontWeight: 'bolder',

fontSize: '14px',

border: "unset",

},null);

let jumpGo = this.createElem("a",{href:"#"},{},'Go');

jump.appendChild(this.createElemBase("span","到第"));

jump.appendChild(jumpInput);

jump.appendChild(this.createElemBase("span","<b>/ "+this.AttrConf.pageTotal+"</b>页 "));

jump.appendChild(jumpGo);

this.modules.jump = jump;

}

/**

* 加载每页显示控制

* @param {Boolean} isInit

loadLimits(isInit){

if(isInit){

let limits = this.createElem("span",{module:"limits"},this.cssMap.pageBtn,null);

let limitsSelect = this.createElem('select',{},{border:"unset"},null);

for(let i in this.AttrConf.limits){

let limit = this.AttrConf.limits[i];

let attr = {

value: limit

}

if(this.AttrConf.limit == limit){

attr.selected = true;

}

limitsSelect.appendChild(this.createElem('option',attr,{},limit+"条/页"));

}

limits.appendChild(limitsSelect);

this.modules.limits = limits;

}

attr(dom,attrMap){

Object.keys(attrMap).forEach(attr => dom.setAttribute(attr,attrMap[attr]));

}

css(dom,cssMap){

Object.keys(cssMap).forEach(css => dom.style[css] = cssMap[css]);

}

createElemBase(elemTag,elemName){

let elem = document.createElement(elemTag);

if(elemName){

elem.innerHTML = elemName;

}

return elem;

}

createElem(elemTag,attrMap,cssMap,elemName){

let elem = this.createElemBase(elemTag,elemName);

if(attrMap){

this.attr(elem,attrMap);

}

if(cssMap){

this.css(elem,cssMap);

}

return elem;

}

/**

* 分页工具对象负责和调用方打交道, 同时协调AttrConf,ViewConf的属性和相关监听方法

class PageUtil{

AttrConf;

ViewConf;

config = {

left:{

show: true,

modules: ['base'],

right:{

modules:[,'prev','pages','next','limits','jump'],

}

action: {

toPage(index,limit){

//实际使用的使用可以通过该方法获取到当前分页参数信息

error(info){

console.log(info);

}

};

constructor(elem){

this.elem = elem;

if(typeof(elem) == "string"){

this.elem = document.querySelector(elem);

}

render(param){

if(param){

//首次使用的时候需要先初始化 AttrConf对象

this.AttrConf = param.AttrConf;

this.ViewConf = new ViewConf(this.AttrConf);

if(param.action){

let action = param.action;

if(action.toPage){

this.config.action.toPage = action.toPage;

}

/* 初始化布局配置 */

if(param.layout){

let layout = param.layout;

if(layout.left){

if(layout.left.show != undefined){

this.config.layout.left.show = layout.left.show;

}

if(layout.left.modules){

this.config.layout.left.modules = layout.left.modules;

}

if(layout.right){

if(layout.right.modules){

this.config.layout.left.modules = layout.left.modules;

}

//从新渲染下布局

this.ViewConf.setLayout(this.config.layout);

}

//从视图配置中把视图加载到页面, 完成按钮状态,事件的渲染

this.loadPageViewToDom();

this.renderPageBtnStyle();

this.renderPageBtnAction();

}

loadPageViewToDom(){

let inst = this;

let layout = inst.config.layout;

//初始化左容器视图

if(layout.left.show){

inst.elem.appendChild(this.ViewConf.layout.left.dom);

inst.ViewConf.layout.left.ids.forEach(modeName => {

inst.elem.querySelector("[layout=left]").appendChild(inst.ViewConf.modules[modeName]);

})

}

inst.elem.appendChild(this.ViewConf.layout.right.dom);

inst.ViewConf.layout.right.ids.forEach(modeName => {

if(modeName == 'pages'){

for(let i in inst.ViewConf.modules.pages){

let codeDom = inst.ViewConf.modules.pages[i];

inst.elem.querySelector("[layout=right]").appendChild(codeDom);

}

}else{

inst.elem.querySelector("[layout=right]").appendChild(inst.ViewConf.modules[modeName]);

}

})

}

/**

* 渲染分页按钮状态样式

renderPageBtnStyle(){

let inst = this;

//渲染按钮经过 -- 按下 -- 离开样式

let pressDowCss = inst.ViewConf.cssMap.pageBtnPressDown;

let hoverCss = inst.ViewConf.cssMap.pageBtnHover;

let baseCss = inst.ViewConf.cssMap.pageBtn;

this.elem.querySelectorAll('[btn]:not([active]):not([disabled])').forEach(dom => {

dom.addEventListener('mouseenter',

() => inst.ViewConf.css(dom,hoverCss));

dom.addEventListener('mousedown',

() => inst.ViewConf.css(dom,pressDowCss));

dom.addEventListener('mouseup',

() => inst.ViewConf.css(dom,hoverCss));

dom.addEventListener('mouseleave',

() => inst.ViewConf.css(dom,baseCss));

});

//渲染禁用按钮样式

let disabledCss = inst.ViewConf.cssMap.pageBtnDisabled;

this.elem.querySelectorAll('[disabled]:not([active])').forEach(dom => {

inst.ViewConf.css(dom,disabledCss);

});

//渲染当前选中按钮样式

let activeCss = inst.ViewConf.cssMap.pageBtnCur;

this.elem.querySelectorAll('[active]').forEach(dom => {

inst.ViewConf.css(dom,activeCss);

});

if(inst.ViewConf.layout.left.show == true){

let left = this.elem.querySelector('[layout=left]');

inst.ViewConf.css(left,{

display: 'table-cell'

});

left.setAttribute("algin","left");

}

let right = this.elem.querySelector('[layout=right]');

inst.ViewConf.css(right,{

display: 'table-cell',

verticalAlign: 'middle',

});

right.setAttribute("align","right");

this.ViewConf.css(this.elem,{

display: "inline-table",

width: "100%",

});

this.ViewConf.css(this.elem.querySelector("[module=base]"),this.ViewConf.cssMap.base);

}

/**

* 渲染分页按钮事件

renderPageBtnAction(){

let inst = this;

inst.elem.querySelectorAll("[btn]:not([active]):not([disabled])")

.forEach(dom => dom.addEventListener('click',toPage));

function toPage(e){

let curPage = this.getAttribute("pagecode");

inst.toPage(parseInt(curPage));

}

//跳转到指定页事件

inst.elem.querySelector("[module=jump]>input").addEventListener('blur',(e)=>{

let val = parseInt(e.target.value);

if(isNaN(val)){

inst.config.action.error({module:'jump',ele:e.target,type:'页码转换异常',msg:"页码错误,只能输入数字,实际输入值为:"+e.target.value});

return;

}

val = val < 1 ? 1 : (val > inst.AttrConf.pageTotal ? inst.AttrConf.pageTotal : val);

inst.toPage(val);

});

inst.elem.querySelector("[module=jump]>input").addEventListener('focus',(e)=>e.target.select());

//每页显示配置事件

inst.elem.querySelector("[module=limits]>select").addEventListener('change',(e)=>{

let ele = e.target;

let curIndex = ele.selectedIndex;

let val = parseInt(ele.options[curIndex].value);

inst.AttrConf.init({limit:val});

inst.toPage(1);

console.log(inst.AttrConf);

});

}

/**

* 跳转到指定页

* @param {Number} pageCode

toPage(pageCode){

//设置新页码

this.AttrConf.setCurPage(pageCode);

//暴露给需要分页对象的方法, 执行后会重新初始化总数据条数

this.config.action.toPage(pageCode,this.AttrConf.limit);

this.AttrConf.initOthers();

//重新初始化视图模型

this.ViewConf.initModuls();

//删除之前的旧页码

this.elem.querySelector("[layout=right]").innerHTML = "";

this.render();

}

```

## 如何使用

* 在html中引入js代码

* 以下是可以直接运行的html演示代码, 可以直接coyp, 注意引用就行

```

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

.box{

padding: 30px;

width:80% !important;

border: 1px solid #ccc;

}

</style>

</head>

<body>

// 创建分页对象, #page是需要放分页的容器选择器, 也可以是一个HTMLdom对象

var pageUtil = new PageUtil("#page");

var pageUtil1 = new PageUtil("#page1");

var pageUtil2 = new PageUtil("#page2");

var pageUtil3 = new PageUtil("#page3");

// 第一次加载的时候,需要这样写

pageUtil.render({

AttrConf: new AttrConf(1,10,2020)

});

pageUtil1.render({

AttrConf: new AttrConf(1,20,1668),

left:{

show: true,

modules: ['base'],

right:{

modules:['prev','pages','next','limits','jump'],

}

});

pageUtil2.render({

AttrConf: new AttrConf(1,10,128),

action: {

toPage(index,limit){

//实际使用的使用可以通过该方法获取到当前分页参数信息

error(info){

console.log(info);

}

});

pageUtil3.render({

AttrConf: new AttrConf(1,10,123),

left:{

show: true,

modules: ['base'],

right:{

modules:['prev','next','limits','jump'],

}

});

// 后续高级用法等有时间整理好了文档在补充

</script>

</body>

</html>

```

## 效果预览

如有不足之情, 恳请大佬们能在评论区留下意见谢谢大家

分享一个纯JS编写的分页工具

推荐阅读更多精彩内容