面向对象方式编写前端页面（1）
Hi，大家好，我是编程小6，很荣幸遇见你，我把这些年在开发过程中遇到的问题或想法写出来，今天说一说面向对象方式编写前端页面（1）,希望能够帮助你!!!。
你是不是觉得这篇文章的标题太扯蛋了，前端页面还用得着面向对象方式编写？自从学习网站开发以来，从相关书籍或代码看到的都是将php（或者c#或者其它）代码、js代码、html标签写在一个页面里。浏览器获取页面时，服务器先将php代码跑一遍再把结果传回浏览器，粗看这么做好像没毛病，而且自己最开始开发网站也是这么做的。但随着网站规模越来越大，功能越来越复杂，这么做会导致页面太过繁杂，扩展、维护相当麻烦，访问量一大的话会导致后端忙不过来，页面卡死用户体验感直线下降。最重要的一点是代码很难重用，开发新的网站话，差不多所有页面都要重写。
不说废话了，下面举个例子，假如要实现一个从数据库读取公司用户数据并显示出来的页面，类似下面的前端页面，考虑一下该如何实现（大家先想一下）。
下面说说我的实现方法（不一定最好，你有更好的方法请留言）
一、功能分析
简单来说，这个页面就三大功能，1、从数据库读取数据；2、显示数据；3、在不同的页面切换。那么可以将这三个功能抽象为三个对象——Dataset对象、List对象和Pagecode对象，关系如下图所示：
二、对象功能实现
1、Dataset对象，如其名，主要实现以ajax方式从数据库中读取数据；一旦读取数据以通用格式返回，如下：
res:{
rows:12,
data:[
{Col1:"值",Col2:"值"……,Coln:"值"},
……,
{Col1:"值",Col2:"值"……,Coln:"值"}
]
}
2、List对象，负责数据以列表方式显示；显示之前会将数据格式化为页面所需形式（即将数据分行、分列），Dataset返回的通用数据已直接包含总数据行数，那么当前页面有多少行数据、每行数据有多少列呢？大家开动小脑筋想一想。
3、PageCode对象负责翻页。用户可以点击前后页按钮或者直接在页码列表框选择相应页面。一旦改变当前页面，Dataset对象重新读取数据（起止数据编号根据PageCode对象相应值计算，传给SELECT语句LIMIT）
三、动手撸代码
将相关功能对象化后，前端页面代码立刻清爽了许多，不信？请看代码
请注意这一行代码：
<body onload="pccmain()">
所有的初始化、实现逻辑都在那个pccmain()函数里，下面我们来看一看此函数的代码
只有5行代码，创建了3个对象，页面所有的功能都靠这3个对象实现！你也许迫不急待想看看这3个对象详细的实现代码，你越想看就越不给你看（先卖个关子），以后会详细讲解相关代码的。
也许你觉得管它页面代码如何编写，只要功能实现就行了，复制、粘贴一下，以前的代码又不是不可以用……没错，虽然实现功能的方法不止一种，但尽量要选让用户体验感佳、维护者爽的那种。
未完待续，请继续关注后续文章。
今天的分享到此就结束了，感谢您的阅读，如果确实帮到您，您可以动动手指转发给其他人。
