javascript 面向对象的简单应用

最新推荐文章于 2025-07-22 15:31:58 发布

原创最新推荐文章于 2025-07-22 15:31:58 发布 · 723 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #面向对象 #前端 #构造方法 #构造函数

面向对象编程专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一个使用JavaScript面向对象技术在前端展示数据的例子。通过构建成员对象，并利用jQuery将对象属性值填充到HTML表格中，实现了数据的有效展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在学习了JSON数据格式和Javascript面向对象的知识点后，自己也想试一试，用Javascript中面向对象的技术如何在web应用开发方面提升代码的效率。

简单的思路：

在页面上做一个表格，除了表头外，每一行都是一个Javascript的对象，这些对象有着相同的属性名，但是属性值不同。每一行表格显示一个对象的所有属性值。

开始构建：

index.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-2.1.3.min.js"></script>
    <script src="myJS.js"></script>
    <style type="text/css">
        * {
            font-family: 微软雅黑;
            margin: 0px auto;
        }

        h1 {
            margin: 20px auto;
            width: 500px;
        }

        table {
            width: 80%;
            /*border: 1px solid #ff0000;*/
        }

        table thead {
            text-align: center;
            background-color: orangered;
            color: #ffffff;
        }

        table thead td {
            padding: 10px 0px;
            font-size: 20px;
        }

        tbody td {
            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类的构造方法
    function Member(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 = new Array();
            //遍历这个类的所有属性，包括这个函数属性（函数在Javascript类中也被看做了属性），在for的参数中，用了this，表示将来调用这个构造函数的对象自己
            for (var x in this) {
                //把一个个的属性名称连接起来，并在每个属性名后添加一个竖线，这样做是方便进行字符串的分割，分割成数组后好统计数组的长度
                propertyString += x + "|";
            }
            //用竖线分割这个字符串，返回一个数组
            propertyArray = propertyString.split("|");
            //这里计算完数组的长度后，为什么减去2呢？
            //这里只想统计这个类中的属性的个数，但是不想包括这个函数（函数在Javascript类中也被看做了属性），所以要减去1
            //在分割字符串的时候，最后一个属性名的后面还有一个竖线，程序把最后一个属性名后面的竖线去掉后，误认为这最后一个属性名还有一个空的字符，也被算进了数组的长度中了，所以还要减去1
            //最终，我们要减去2
            return 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 = new Array(m1, m2, m3, m4);
    var num = m1.getPropertyNum();

    //通过循环向<tbody>标签中插入<tr>标签和<td>标签
    //外层循环是按照实例化出来的对象的个数来想<tbody>标签中添加<tr>标签
    for (var i = 0; i < countInstance; i++) {
        var newTr = $("<tr></tr>");//新建一个<tr>标签
        var instanceName = "m" + (i + 1);//拼接好对象的名称
        $("tbody").append(newTr);//给<tbody>标签插入一个<tr>子节点
        for (var x in instanceArray[i]) {//进入到<tbody> --> <tr> 内部
            if (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代码中以对象的方式来处理这些数据，最终反映到前端页面上。

一次小小的尝试，还有很多不够完美的地方，请大家多指教！