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

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

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

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

1、第一个效果图代码：

  1. /**
  2.  * Created with JetBrains WebStorm.
  3.  * User: zhy
  4.  * Date: 14-6-7
  5.  * Time: 下午4:55
  6.  * To change this template use File | Settings | File Templates.
  7.  */
  8. /**
  9.  * @param id
  10.  * @param value
  11.  * @param parentEle 父元素
  12.  * @constructor
  13.  */
  14. function PlaceFieldEditor(id, value, parentEle)
  15. {
  16.     this.id = id;
  17.     this.value = value;
  18.     this.parentEle = parentEle;
  19.     this.initValue = value ;
  20.  
  21.     this.initElements();
  22.     this.initEvents();
  23. }
  24.  
  25. PlaceFieldEditor.prototype = {
  26.     constructor: PlaceFieldEditor,
  27.     /**
  28.      * 初始化所有元素
  29.      */
  30.     initElements: function ()
  31.     {
  32.         this.txtEle = $("<span/>");
  33.         this.txtEle.text(this.value);
  34.  
  35.         this.textEle = $("<input type='text' />");
  36.         this.textEle.val(this.value);
  37.  
  38.         this.btnWapper = $("<div style='display: inline;'/>");
  39.         this.saveBtn = $("<input type='button' value='保存'/>");
  40.         this.cancelBtn = $("<input type='button' value='取消'/>");
  41.         this.btnWapper.append(this.saveBtn).append(this.cancelBtn);
  42.  
  43.         this.parentEle.append(this.txtEle).append(this.textEle).append(this.btnWapper);
  44.  
  45.         this.convertToReadable();
  46.     },
  47.     /**
  48.      * 初始化所有事件
  49.      */
  50.     initEvents: function ()
  51.     {
  52.         var that = this;
  53.         this.txtEle.on("click", function (event)
  54.         {
  55.             that.convertToEditable();
  56.         });
  57.  
  58.         this.cancelBtn.on("click", function (event)
  59.         {
  60.             that.cancel();
  61.         });
  62.  
  63.         this.saveBtn.on("click", function (event)
  64.         {
  65.             that.save();
  66.         });
  67.  
  68.     },
  69.     /**
  70.      * 切换到编辑模式
  71.      */
  72.     convertToEditable: function ()
  73.     {
  74.         this.txtEle.hide();
  75.         this.textEle.show();
  76.         this.textEle.focus();
  77.  
  78.         if(this.getValue() == this.initValue )
  79.         {
  80.             this.textEle.val("");
  81.         }
  82.  
  83.         this.btnWapper.show();
  84.     },
  85.     /**
  86.      * 点击保存
  87.      */
  88.     save: function ()
  89.     {
  90.         this.setValue(this.textEle.val());
  91.         this.txtEle.html(this.getValue().replace(/\n/g,"<br/>"));
  92.  
  93.         var url = "id=" + this.id + "&value=" + this.value;
  94. //                alert(url);
  95.         console.log(url);
  96.         this.convertToReadable();
  97.     },
  98.     /**
  99.      * 点击取消
  100.      */
  101.     cancel: function ()
  102.     {
  103.         this.textEle.val(this.getValue());
  104.         this.convertToReadable();
  105.     },
  106.     /**
  107.      * 切换到查看模式
  108.      */
  109.     convertToReadable: function ()
  110.     {
  111.         this.txtEle.show();
  112.         this.textEle.hide();
  113.         this.btnWapper.hide();
  114.     },
  115.     setValue: function (value)
  116.     {
  117.         this.value = value;
  118.     },
  119.     getValue: function ()
  120.     {
  121.         return this.value;
  122.     }
  123. }
  124. ;

引入到页面代码： 

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  2.         "http://www.w3.org/TR/html4/loose.dtd">
  3. <html>
  4. <head>
  5.     <title></title>
  6.     <script type="text/javascript" src="jquery-1.8.3.js"></script>
  7.     <script type="text/javascript" src="PlaceFieldEditor.js"></script>
  8.  
  9.     <script type="text/javascript">
  10.         $(function ()
  11.         {
  12.  
  13.             $("ul li").each(function ()
  14.             {
  15.                 new PlaceFieldEditor($(this).attr("id"), "请输出成绩...", $(this));
  16.             });
  17.  
  18.         });
  19.  
  20.     </script>
  21.  
  22.     <style type="text/css">
  23.         body
  24.         {
  25.             font-size: 12px;
  26.             color: #333;;
  27.         }
  28.  
  29.         ul li
  30.         {
  31.             line-height: 30px;
  32.         }
  33.  
  34.     </style>
  35. </head>
  36. <body>
  37.  
  38. <ul>
  39.     <li id="1">张三：</li>
  40.     <li id="2">李四：</li>
  41.     <li id="3">王二：</li>
  42. </ul>
  43.  
  44. </body>
  45. </html>

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

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

  1. /**
  2.  * Created with JetBrains WebStorm.
  3.  * User: zhy
  4.  * Date: 14-6-7
  5.  * Time: 下午5:34
  6.  * To change this template use File | Settings | File Templates.
  7.  */
  8. function PlaceAreaEditor(id, value, parentEle)
  9. {
  10.     PlaceAreaEditor.superClass.constructor.call(this, id, value, parentEle);
  11. }
  12.  
  13. extend(PlaceAreaEditor, PlaceFieldEditor);
  14.  
  15. PlaceAreaEditor.prototype.initElements = function ()
  16. {
  17.     this.txtEle = $("<span/>");
  18.     this.txtEle.text(this.value);
  19.  
  20.     this.textEle = $("<textarea style='width:315px;height:70px;' />");
  21.     this.textEle.text(this.value);
  22.  
  23.     this.btnWapper = $("<div style='display: block;'/>");
  24.     this.saveBtn = $("<input type='button' value='保存'/>");
  25.     this.cancelBtn = $("<input type='button' value='取消'/>");
  26.     this.btnWapper.append(this.saveBtn).append(this.cancelBtn);
  27.  
  28.     this.parentEle.append(this.txtEle).append(this.textEle).append(this.btnWapper);
  29.  
  30.     this.convertToReadable();
  31.  
  32. };

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

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

  1. /**
  2.  * @param subClass  子类
  3.  * @param superClass   父类
  4.  */
  5. function extend(subClass, superClass)
  6. {
  7.     var F = function ()
  8.     {
  9.     };
  10.     F.prototype = superClass.prototype;
  11.     //子类的prototype指向F的_proto_ ， _proto_又指向父类的prototype
  12.     subClass.prototype = new F();
  13.     //在子类上存储一个指向父类的prototype的属性，便于子类的构造方法中与父类的名称解耦 使用subClass.superClass.constructor.call代替superClass.call
  14.     subClass.superClass = superClass.prototype;
  15. }

最后页面代码：

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  2.         "http://www.w3.org/TR/html4/loose.dtd">
  3. <html>
  4. <head>
  5.     <title></title>
  6.     <script type="text/javascript" src="jquery-1.8.3.js"></script>
  7.     <script type="text/javascript" src="PlaceFieldEditor.js"></script>
  8.     <script type="text/javascript" src="com.zhy.extend.utils.js"></script>
  9.     <script type="text/javascript" src="PlaceAreaEditor.js"></script>
  10.  
  11.     <script type="text/javascript">
  12.  
  13.         $(function ()
  14.         {
  15.             $("ul li div").each(function ()
  16.             {
  17.                 new PlaceAreaEditor($(this).attr("id"), "请留言...", $(this));
  18.             });
  19.         });
  20.  
  21.     </script>
  22.  
  23.     <style type="text/css">
  24.  
  25.         body
  26.         {
  27.             font-size: 12px;
  28.             color: #333;;
  29.         }
  30.  
  31.         ul li
  32.         {
  33.             padding: 5px 0 8px 0 ;
  34.         }
  35.  
  36.     </style>
  37. </head>
  38. <body>
  39.  
  40. <ul>
  41.     <li id="1"><h3>我要改剧本，不让~~</h3>
  42.         <div>
  43.         </div>
  44.     </li>
  45.  
  46.     <li id="2"><h3>悬崖上有桥么，有？没有~ </h3>
  47.         <div>
  48.         </div>
  49.     </li>
  50.     <li id="3"><h3>你敢打坏我的灯？不租~   </h3>
  51.         <div>
  52.         </div>
  53.     </li>
  54. </ul>
  55.  
  56. </body>
  57. </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. 坚持自己的追求，迎来 “中国系统开发网” （CSDN）的专访

    坚持自己的追求,迎来 "中国系统开发网" (CSDN)的专访: 专访马根峰:海量数据处理与分析大师的中国本土程序员" http://www.csdn.net/articl ...

  2. rails将类常量重构到数据库对应的表中之三

    经过博文之一和之二的重构,貌似代码表现的还不错,正常运行和test都通过鸟,但是,感觉告诉我们还是有什么地方不对劲啊!究竟是哪里不对劲呢?我们再来好好看一下. 我们把数据库表中的支付方式集合直接放在实 ...

  3. ionic1 下拉刷新 上拉加载 功能

    html页面如下 <ion-content> <ion-refresher pulling-text="刷新" on-refresh="search() ...

  4. js正则表达式中test,exec,match方法的区别说明

    js正则表达式中test,exec,match方法的区别说明 test test 返回 Boolean,查找对应的字符串中是否存在模式.var str = "1a1b1c";var ...

  5. 数据库面试题目- ORACLE

    Posted on 2009-06-08 17:38 漠北的天空 阅读(110) 评论(0)  编辑 收藏 1.       列举几种表连接方式 Answer:等连接(内连接).非等连接.自连接.外连 ...

  6. Mysql系列-数据库

    一 .数据库管理软件的由来 基于我们之前所学,数据要想永久保存,都是保存于文件中,毫无疑问,一个文件仅仅只能存在于某一台机器上. 如果我们暂且忽略直接基于文件来存取数据的效率问题,并且假设程序所有的组 ...

  7. 无效类字符串:ProgID: Excel.Application

    网上发现的方案是改注册表,其实用不着那么麻烦,找2种excel文件:xlsx和xls,把默认打开方式都换成你机器上有的程序就行,比如WPS Office的WPS 表格

  8. Web开发相关工具收集

    FireFox相关: FireBug/GreaseMonkey/Yslow/WebDeveloperSelenium:Web应用程序测试的工具--  http://seleniumhq.org/  h ...

  9. 中文字体名称对照表(unicode码)及20个web安全字体

    在Web编码中,CSS默认应用的Web字体是有限的,虽然在新版本的CSS3,我们可以通过新增的@font-face属性来引入特殊的浏览器加载字体.但多数情况下,考虑各个因素的影响我们还是在尽量充分利用 ...

  10. Ubuntu下定时任务和自启动任务的部署

    1.定时任务的部署,最简单的方法是执行 crontab -e 然后在下面加上世间周期配置和要执行的命令,一般情况下,可以把要执行的任务用bash脚本封装一下,格式如下所示: minute   hour ...