Javascript的难点就是面向对象编程，上一篇介绍了Javascript的两种继承方式：Javascript 进阶 继承，这篇使用一个例子来展示js如何面向对象编程，以及如何基于类实现继承。

1、利用面向对象的写法，实现下面这个功能，实时更新数据的一个例子：

2、使用对上面类的继承，完成下面的效果：

好了，不多说，js的训练全靠敲，所以如果觉得面向对象不是很扎实，可以照着敲一个，如果觉得很扎实了，提供了效果图，可以自己写试试。

1、第一个效果图代码：

/**

 * Created with JetBrains WebStorm.

 * User: zhy

 * Date: 14-6-7

 * Time: 下午4:55

 * To change this template use File | Settings | File Templates.

 */

/**

 * @param id

 * @param value

 * @param parentEle 父元素

 * @constructor

 */

function PlaceFieldEditor(id, value, parentEle)

{

    this.id = id;

    this.value = value;

    this.parentEle = parentEle;

    this.initValue = value ;

    this.initElements();

    this.initEvents();

}

PlaceFieldEditor.prototype = {

    constructor: PlaceFieldEditor,

    /**

     * 初始化所有元素

     */

    initElements: function ()

    {

        this.txtEle = $("<span/>");

        this.txtEle.text(this.value);

        this.textEle = $("<input type='text' />");

        this.textEle.val(this.value);

        this.btnWapper = $("<div style='display: inline;'/>");

        this.saveBtn = $("<input type='button' value='保存'/>");

        this.cancelBtn = $("<input type='button' value='取消'/>");

        this.btnWapper.append(this.saveBtn).append(this.cancelBtn);

        this.parentEle.append(this.txtEle).append(this.textEle).append(this.btnWapper);

        this.convertToReadable();

    },

    /**

     * 初始化所有事件

     */

    initEvents: function ()

    {

        var that = this;

        this.txtEle.on("click", function (event)

        {

            that.convertToEditable();

        });

        this.cancelBtn.on("click", function (event)

        {

            that.cancel();

        });

        this.saveBtn.on("click", function (event)

        {

            that.save();

        });

    },

    /**

     * 切换到编辑模式

     */

    convertToEditable: function ()

    {

        this.txtEle.hide();

        this.textEle.show();

        this.textEle.focus();

        if(this.getValue() == this.initValue )

        {

            this.textEle.val("");

        }

        this.btnWapper.show();

    },

    /**

     * 点击保存

     */

    save: function ()

    {

        this.setValue(this.textEle.val());

        this.txtEle.html(this.getValue().replace(/\n/g,"<br/>"));

        var url = "id=" + this.id + "&value=" + this.value;

//                alert(url);

        console.log(url);

        this.convertToReadable();

    },

    /**

     * 点击取消

     */

    cancel: function ()

    {

        this.textEle.val(this.getValue());

        this.convertToReadable();

    },

    /**

     * 切换到查看模式

     */

    convertToReadable: function ()

    {

        this.txtEle.show();

        this.textEle.hide();

        this.btnWapper.hide();

    },

    setValue: function (value)

    {

        this.value = value;

    },

    getValue: function ()

    {

        return this.value;

    }

}

;

引入到页面代码： 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

        "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

    <title></title>

    <script type="text/javascript" src="jquery-1.8.3.js"></script>

    <script type="text/javascript" src="PlaceFieldEditor.js"></script>

    <script type="text/javascript">

        $(function ()

        {

            $("ul li").each(function ()

            {

                new PlaceFieldEditor($(this).attr("id"), "请输出成绩...", $(this));

            });

        });

    </script>

    <style type="text/css">

        body

        {

            font-size: 12px;

            color: #333;;

        }

        ul li

        {

            line-height: 30px;

        }

    </style>

</head>

<body>

<ul>

    <li id="1">张三：</li>

    <li id="2">李四：</li>

    <li id="3">王二：</li>

</ul>

</body>

</html>

嗯，代码就不详细说了，都比较简单，使用了jQuery，如果不喜欢可以使用原生js，本人比较喜欢把jQuery当作js的工具使用。

2、第二个效果图的js代码：

/**

 * Created with JetBrains WebStorm.

 * User: zhy

 * Date: 14-6-7

 * Time: 下午5:34

 * To change this template use File | Settings | File Templates.

 */

function PlaceAreaEditor(id, value, parentEle)

{

    PlaceAreaEditor.superClass.constructor.call(this, id, value, parentEle);

}

extend(PlaceAreaEditor, PlaceFieldEditor);

PlaceAreaEditor.prototype.initElements = function ()

{

    this.txtEle = $("<span/>");

    this.txtEle.text(this.value);

    this.textEle = $("<textarea style='width:315px;height:70px;' />");

    this.textEle.text(this.value);

    this.btnWapper = $("<div style='display: block;'/>");

    this.saveBtn = $("<input type='button' value='保存'/>");

    this.cancelBtn = $("<input type='button' value='取消'/>");

    this.btnWapper.append(this.saveBtn).append(this.cancelBtn);

    this.parentEle.append(this.txtEle).append(this.textEle).append(this.btnWapper);

    this.convertToReadable();

};

写了PlaceAreaEditor继承了PlaceFieldEditor，然后复写了initElements方法，改变了text为textarea。

extend的方法，上一篇博客已经介绍过：

/**

 * @param subClass  子类

 * @param superClass   父类

 */

function extend(subClass, superClass)

{

    var F = function ()

    {

    };

    F.prototype = superClass.prototype;

    //子类的prototype指向F的_proto_ ， _proto_又指向父类的prototype

    subClass.prototype = new F();

    //在子类上存储一个指向父类的prototype的属性，便于子类的构造方法中与父类的名称解耦 使用subClass.superClass.constructor.call代替superClass.call

    subClass.superClass = superClass.prototype;

}

最后页面代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

        "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

    <title></title>

    <script type="text/javascript" src="jquery-1.8.3.js"></script>

    <script type="text/javascript" src="PlaceFieldEditor.js"></script>

    <script type="text/javascript" src="com.zhy.extend.utils.js"></script>

    <script type="text/javascript" src="PlaceAreaEditor.js"></script>

    <script type="text/javascript">

        $(function ()

        {

            $("ul li div").each(function ()

            {

                new PlaceAreaEditor($(this).attr("id"), "请留言...", $(this));

            });

        });

    </script>

    <style type="text/css">

        body

        {

            font-size: 12px;

            color: #333;;

        }

        ul li

        {

            padding: 5px 0 8px 0 ;

        }

    </style>

</head>

<body>

<ul>

    <li id="1"><h3>我要改剧本，不让~~</h3>

        <div>

        </div>

    </li>

    <li id="2"><h3>悬崖上有桥么，有？没有~ </h3>

        <div>

        </div>

    </li>

    <li id="3"><h3>你敢打坏我的灯？不租~   </h3>

        <div>

        </div>

    </li>

</ul>

</body>

</html>

好了，结束~~ 上面的例子是根据孔浩老师的例子修改的，感谢孔浩老师，孔老师地址：www.konghao.org。孔老师录制了很多Java相关视频，有兴趣的可以去他网站学习！

代码或者讲解有任何问题，欢迎留言指出。

版权声明：本文为博主原创文章，未经博主允许不得转载。

Javascript 进阶 面向对象编程 继承的一个例子的更多相关文章

  1. Javascript 进阶 面向对象编程 继承的一个样例

    Javascript的难点就是面向对象编程,上一篇介绍了Javascript的两种继承方式:Javascript 进阶 继承.这篇使用一个样例来展示js怎样面向对象编程.以及怎样基于类实现继承. 1. ...

  2. JavaScript的面向对象编程（OOP）（一）——类

    在学习JavaScript面向对象的编程之前,需要知道,并了解面向对象的一些基本的常识.初学者中大多数都以为面向对象中,面向对象的编程是很重要和占据很大一部分精力.笔者在之前也是认为OOP是面向对象的 ...

  3. C++ Primer 学习笔记_69_面向对象编程 --继承情况下的类作用域

    面向对象编程 --继承情况下的类作用域 引言: 在继承情况下,派生类的作用域嵌套在基类作用域中:假设不能在派生类作用域中确定名字,就在外围基类作用域中查找该名字的定义. 正是这样的类作用域的层次嵌套使 ...

  4. Python 面向对象编程 继承 和多态

    Python 面向对象编程 继承 和多态 一:多继承性 对于java我们熟悉的是一个类只能继承一个父类:但是对于C++ 一个子类可以有多个父亲,同样对于 Python一个类也可以有多个父亲 格式: c ...

  5. Python面向对象编程——继承与派生

    Python面向对象编程--继承与派生 一.初始继承 1.什么是继承 继承指的是类与类之间的关系,是一种什么"是"什么的关系,继承的功能之一就是用来解决代码重用问题. 继承是一种创 ...

  6. 【前端学习】javascript面向对象编程(继承和复用)

    前言       继承,代码复用的一种模式.和其它高级程序语言相比,javascript有点点不一样,它是一门纯面向对象的语言,在JS中,没有类的概念,但也可以通过原型(prototype)来模拟对象 ...

  7. Javascript 面向对象编程—继承和封装

      前  言 Javascript是一种基于对象(object-based)的语言,你遇到的所有东西几乎都是对象.但是,它又不是一种真正的面向对象编程(OOP)语言,因为它的语法中没有class(类) ...

  8. javascript进阶——面向对象特性

    面向对象的javascript是这门语言被设计出来时就考虑的问题,熟悉OOP编程的概念后,学习不同的语言都会发现不同语言的实现是不同的,javascript的面向对象特性与其他具有面向对象特性的语言的 ...

  9. javascript的面向对象编程

    面象对象编程技术的核心理念:封装.继承.多态:在一些主流的高级编程语言中,比如:C#,VB.NET,JAVA,PHP等都是很容易实现的,而如果要在javascript中实现面象对象编程,可就不那么直接 ...

随机推荐

  1. 苹果新的编程语言 Swift 语言进阶（七）－－枚举、结构、类

    Swift语言中,具有类特征的类型包括三种,即枚举类型.结构类型(包括基本类型,基本类型实际都是结构类型的特例).类.其中枚举类型.结构类型是属于值类型,类属于引用类型.三种类型都可以添加属性.方法. ...

  2. Leetcode_263_Ugly Number

    本文是在学习中的总结,欢迎转载但请注明出处:http://blog.csdn.net/pistolove/article/details/49431329 Write a program to che ...

  3. Android的Context Manager（服务管理器）源码剖析-android学习之旅（99）

    Context Manager介绍 Context Manager对应的进程是servicemanager进程,它先于Service Server和服务客户端运行,进入接收IPC数据的待机状态,处理来 ...

  4. OpenNMS安装手册

    一. 系统需求Windows Server 2008 R2 SP1 64位JDK 8 update 5 for Windows 64位PostgreSQL 9.3.5 for Windows 64位O ...

  5. Memocache 详细的工作机制

    memcached集群 2013-04-26 13:56:37|  分类: memcached |  标签:集群  memcached  |举报|字号 订阅     集群架构方面的问题 memcach ...

  6. spring3.1文档目录翻译

    整理google共享磁盘找到了2014年翻译的spring官方文档的目录,分享出来可能会对英语不好的同学有些帮助吧. spring3.1官方文档目录-中文 spring3.1官方文档-英文 关于作者

  7. Mac 电脑前端环境配置

    恍惚间,好久没有在外面写过随笔了.在阿里的那两年,学到了许多,也成长了许多,认识了很多可爱的人,也明白了很多社会的事.最后种种艰难抉择,我来到了美团成都,一个贫穷落后但更自由开放弹性的地方.已经误以为 ...

  8. js 逻辑运算符优化

    运算符的代码优化,可以精简代码,提高代码可读性 下面主要讨论下逻辑运算符与 &&, 或||. 示例: 假设对成长速度显示规定如下: 成长速度为5显示1个箭头: 成长速度为10显示2个箭 ...

  9. ZAB协议(Zookeeper atomic Broadcast)

    一.简语: ZAB协议是Paxos算法的经典实现 二.ZAB协议的两种模式: 崩溃恢复: 1.每个server都有一张选票(myid,zxid),选票投给自己 2.收集所有server的投票 3.比较 ...

  10. Scala编程入门---面向对象编程之Trait高级知识

    trait调用链 Scala中支持让类继承多个Trait后,依次调用多个Trait中的同一个方法,只要让多个trait的同一个方法中,在最后都执行super.方法即可 类中调用多个trait中都有这个 ...