在学习了JSON数据格式和Javascript面向对象的知识点后，自己也想试一试，用Javascript中面向对象的技术如何在web应用开发方面提升代码的效率。
简单的思路：
在页面上做一个表格，除了表头外，每一行都是一个Javascript的对象，这些对象有着相同的属性名，但是属性值不同。每一行表格显示一个对象的所有属性值。
开始构建：
index.html
==>>><style type=”text/css”>* {font-family: 微软雅黑;margin: 0px auto;}h1 {margin: 20px auto;width: 500px;}table {width: 80%;{text-align: center;background-color: orangered;color: #ffffff;{padding: 10px 0px;font-size: 20px;{border-bottom: 1px solid #141aff;margin: 0px;padding: 5px;text-align: center;}>>>年龄>简介>>>
前端页面的代码很简单，用CSS把页面的版式修整了一下。
这就是前端HTML代码的截图
myJS.js
/** * Created by 鹏 on 2015/2/13. */$(countInstance = 0;{this.index = index;this.name = name;this.age = age;this.sex = sex;this.introduction = introduction;this.courses = courses;{//创建一个空字符串，用于将来存放类的所有属性名var propertyString = “”;();) {//把一个个的属性名称连接起来，并在每个属性名后添加一个竖线，这样做是方便进行字符串的分割，，分割成数组后好统计数组的长度propertyString += x + “|”;}//用竖线分割这个字符串，返回一个数组propertyArray = propertyString.split(“|”);propertyArray.length – 2;}//每调用一次这个构造方法来创建类的对象时，都会给这个统计对象个数的全局变量增加1countInstance += 1;}//调用构造方法实例化对象var m1 = new Member(“2015001”, “frank”, 30, “male”, “我是一名教师”, “Java,PHP,Node.js,Bootstrap,Javascript”);var m2 = new Member(“2014004”, “cherry”, 28, “female”, “我是一名作家”, “文学鉴赏,古文观止,上下五千年”);var m3 = new Member(“2012044”, “mark”, 29, “male”, “我是一名CEO”, “PHP,Bootstrap,Javascript,iOS”);var m4 = new Member(“2013025”, “学员”, 25, “female”, “我想学编程技术”, “HTML5 CSS Javascript jQuery Less”);var instanceArray = new Array(m1, m2, m3, m4);var num = m1.getPropertyNum();(var i = 0; i < countInstance; i++) {var newTr = $(“<tr></tr>”);//新建一个<tr>标签var instanceName = “m” + (i + 1);//拼接好对象的名称$((x == “getPropertyNum”) {continue;} else {var newTd = $(“<td></td>”);//新建一个<td>标签，并给这个td标签内部赋值newTd.text(instanceArray[i][x]);//$(“tbody tr”).eq(i).append(newTd);newTd.appendTo($(“tbody tr”).eq(i));}}}});//ready()
最终的页面截图如下：
结语
我在之前做网站制作开发的时候，遇到表格也是用循环，但一般都是从数据库中取出来一个结果集，然后通过Java的iterator进行遍历，再通过while循环结合jsp页面，在页面循环显示出类似 <%= 遍历结果集 %> 这样的代码。
如今学习了Javascript的面向对象技术，就可以在前端用原生的HTML代码，结合Javascript程序，把数据都放在一个个的对象的属性里，然后通过jQuery的遍历，把这些属性值放在页面的标签里。
那么可以再发挥一些想象。我们可以这样来处理页面的数据流。当页面加载完成后，我们可以借助jQuery的Ajax方法去访问一个php文件或者Java文件，这个文件的后端程序主要作用就是连接数据库，同时也可以接收前端用户输入的表单信息（比如模糊查询，关键字查询，修改数据，添加一行记录或者人员信息等），而后端代码把数据库返回的数据可以拼接成JSON格式的文本并返回给客户端。在客户端的Ajax的回调函数中可以通过eval（服务端返回的JSON文本），直接把JSON文本转换成Javascript对象。我们可以在前端的js文件中建立好一个与数据库表结构相对应的对象的构造方法，在js代码中以对象的方式来处理这些数据，最终反映到前端页面上。
一次小小的尝试，还有很多不够完美的地方，请大家多指教！
天上永远不会掉馅饼，不要因为贪图一时的快乐而付出惨痛的代价，
