计算机系统应用教程网站

网站首页 > 技术文章 正文

面向对象方式编写前端页面(1) web面向对象

btikc 2024-10-24 09:19:55 技术文章 8 ℃ 0 评论

　　你是不是觉得这篇文章的标题太扯蛋了，前端页面还用得着面向对象方式编写？自从学习网站开发以来，从相关书籍或代码看到的都是将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个对象详细的实现代码，你越想看就越不给你看（先卖个关子），以后会详细讲解相关代码的。

　　也许你觉得管它页面代码如何编写，只要功能实现就行了，复制、粘贴一下，以前的代码又不是不可以用……没错，虽然实现功能的方法不止一种，但尽量要选让用户体验感佳、维护者爽的那种。

　　未完待续，请继续关注后续文章。

Tags：

猜你喜欢

本文暂时没有评论，来添加一个吧(●'◡'●)

欢迎 你 发表评论:

最近发表
标签列表