组件效果如下：技术亮点：1.封装分页组件，无需在外部页面维护公共数据，只需要在公共数据部分维护pager实例本身2.所有数据计算，stored，内部有多个每个pager实例都是一个新的singleton（工厂模式），独立存在，所以不用担心pager之间的数据粘连。开发思路：主要使用settergetter和事件监听和抛出机制实现数据的及时传递视图双向通信对外使用示例：注意点：1.方法外写属性是ES7的方式，并且webpack打包时，必须安装babel插件进行打包，否则会报错。所以这里临时的解决办法是在构造函数和init函数2中创建类中需要调用的属性，如果有其他需求，可以在外部更改pageSize、total、currentPage这三个属性。组件代码如下：exportdefaultclasspaginationsextendsEventTarget{constructor(_eventType){//初始化时需要声明自定义事件类型，并指定数据抛出的指向对象super();this.elem=this.createElem();//放置分页的容器this.elem.className="paganitionCon"this.elem.addEventListener("click",(e)=>this.clickHandler(e));this.eventType=_eventType;this.init();//初始化风格，无数据this.render();这个。亮点（）；}init(){this._pageSize=3;//每页显示的项目数this._total=0;//项目总数this._currentPage=1;//当前页数this.pageCount=Math.ceil(this.total/this.pageSize);//要渲染的页数}createElem(){if(this.elem)returnthis.elem;让div=文档ent.createElement("div");返回分区；}appendTo(parent){if(typeofparent==="string")parent=document.querySelector(parent);parent.appendChild(this.elem);}settotal(value){//当总条数修改时,total修改this._total=value;this.pageCount=Math.ceil(this.total/this.pageSize);这个。渲染（）；这个。亮点（）；}gettotal(){returnthis._total;}setpageSize(value){//每页显示条目数修改时，触发修改this._pageSize=value;this.pageCount=Math.ceil(this.total/this.pageSize);这个。渲染（）；这个。亮点（）；}getpageSize(){returnthis._pageSize;}setcurrentPage(value){this._currentPage=value;这个。渲染（）；这个。亮点（）；}getcurrentPage(){returnthis._currentPage;}render(){this.elem.innerHTML="";this.elem.innerHTML=`
