本篇文章主要介绍了"javascript 面向对象的简单应用"，主要涉及到方面的内容，对于Javascriptjrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播感兴趣的同学可以参考一下：
在学习了JSON数据格式和Javascript面向对象的知识点后，自己也想试一试，用Javascript中面向对象的技术如何在web应用开发方面提升代码的效率。...
在学习了JSON数据格式和Javascript面向对象的知识点后，自己也想试一试，用Javascript中面向对象的技术如何在web应用开发方面提升代码的效率。
简单的思路：
在页面上做一个表格，除了表头外，每一行都是一个Javascript的对象，这些对象有着相同的属性名，但是属性值不同。每一行表格显示一个对象的所有属性值。
开始构建：
index.html
<html><headlang="en"><metacharset="UTF-8"><title>title><scriptsrc="jquery-2.1.3.min.js">script><scriptsrc="myJS.js">script><styletype="text/css">
* {
font-family: 微软雅黑;
margin:0px auto;
}h1{
margin:20px auto;
width:500px;
}table{
width:80%;
/*border: 1px solid #ff0000;*/}tablethead{
text-align: center;
background-color: orangered;
color:#ffffff;
}tabletheadtd{
padding:10px 0px;
font-size:20px;
}tbodytd{
border-bottom:1px solid #141aff;
margin:0px;
padding:5px;
text-align: center;
}style>head><body><h1>Javascript 面向对象练习h1><table><thead><td>序号td><td>姓名td><td>年龄td><td>性别td><td>简介td><td>课程td>thead><tbody>tbody>table>div>body>html>
前端页面的代码很简单，用CSS把页面的版式修整了一下。
这就是前端HTML代码的截图
myJS.js
/**
* Created by 鹏 on 2015/2/13.
*/
$(function() {//创建一个全局变量，用于统计这个Member类一共实例化了多少个对象var countInstance = 0;
//定义了Member类的构造方法functionMember(index, name, age, sex, introduction, courses) {this.index = index;
this.name = name;
this.age = age;
this.sex = sex;
this.introduction = introduction;
this.courses = courses;
//这个方法用于统计类或者对象中属性的个数this.getPropertyNum = function() {//创建一个空字符串，用于将来存放类的所有属性名var propertyString = "";
//创建一个数组，存放将来被分割好的类的属性名称var propertyArray = newArray();
//遍历这个类的所有属性，包括这个函数属性（函数在Javascript类中也被看做了属性），在for的参数中，用了this，表示将来调用这个构造函数的对象自己for (var x inthis) {
//把一个个的属性名称连接起来，并在每个属性名后添加一个竖线，这样做是方便进行字符串的分割，分割成数组后好统计数组的长度
propertyString += x + "|";
}
//用竖线分割这个字符串，返回一个数组
propertyArray = propertyString.split("|");
//这里计算完数组的长度后，为什么减去2呢？//这里只想统计这个类中的属性的个数，但是不想包括这个函数（函数在Javascript类中也被看做了属性），所以要减去1//在分割字符串的时候，最后一个属性名的后面还有一个竖线，程序把最后一个属性名后面的竖线去掉后，误认为这最后一个属性名还有一个空的字符，也被算进了数组的长度中了，所以还要减去1//最终，我们要减去2return propertyArray.length - 2;
}
//每调用一次这个构造方法来创建类的对象时，都会给这个统计对象个数的全局变量增加1
countInstance += 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 = newArray(m1, m2, m3, m4);
var num = m1.getPropertyNum();
//通过循环向标签中插入标签和| 标签 |
//外层循环是按照实例化出来的对象的个数来想标签中添加标签
for (var i = 0; i < countInstance; i++) {
var newTr = $("|
");//新建一个标签
var instanceName = "m" + (i + 1);//拼接好对象的名称
$("tbody").append(newTr);//给标签插入一个子节点
for (var x in instanceArray[i]) {//进入到 --> 内部
if (x == "getPropertyNum") {
continue;
} else {
var newTd = $(" | ");//新建一个标签，并给这个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代码中以对象的方式来处理这些数据，最终反映到前端页面上。
一次小小的尝试，还有很多不够完美的地方，请大家多指教！
以上就介绍了javascript 面向对象的简单应用，包括了方面的内容，希望对Javascriptjrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播有兴趣的朋友有所帮助。
本文网址链接：http://www.codes51.com/article/detail_113419.html
