• Javascript 进阶 面向对象编程 继承的一个例子

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

    /*
    field 领域 
    wapper 包装
    convert 转换
    */

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

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

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

    1、第一个效果图代码：

    [javascript] view plain copy
     
     在CODE上查看代码片派生到我的代码片
    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. ;  


    引入到页面代码：

    [html] view plain copy
     
     在CODE上查看代码片派生到我的代码片
    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.   
    21.     </script>  
    22.   
    23.     <style type="text/css">  
    24.         body  
    25.         {  
    26.             font-size: 12px;  
    27.             color: #333;;  
    28.         }  
    29.   
    30.         ul li  
    31.         {  
    32.             line-height: 30px;  
    33.         }  
    34.   
    35.     </style>  
    36. </head>  
    37. <body>  
    38.   
    39.   
    40. <ul>  
    41.     <li id="1">张三：</li>  
    42.     <li id="2">李四：</li>  
    43.     <li id="3">王二：</li>  
    44. </ul>  
    45.   
    46. </body>  
    47. </html>  

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

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

    [javascript] view plain copy
     
     在CODE上查看代码片派生到我的代码片
    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='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的方法，上一篇博客已经介绍过：

    [javascript] view plain copy
     
     在CODE上查看代码片派生到我的代码片
    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. }  

    最后页面代码：

    [html] view plain copy
     
     在CODE上查看代码片派生到我的代码片
      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.   
      41. <ul>  
      42.     <li id="1"><h3>我要改剧本，不让~~</h3>  
      43.         <div>  
      44.         </div>  
      45.     </li>  
      46.   
      47.     <li id="2"><h3>悬崖上有桥么，有？没有~ </h3>  
      48.         <div>  
      49.         </div>  
      50.     </li>  
      51.     <li id="3"><h3>你敢打坏我的灯？不租~   </h3>  
      52.         <div>  
      53.         </div>  
      54.     </li>  
      55. </ul>  
      56.   
      57. </body>  
      58. </html>  
  • 相关阅读:
    TCP/IP:IP的分片与重装
    TCP/IP：IP选项处理
    TCP/IP:IP多播选路
    TCP/IP:IGMP Internet组管理协议
    TCP/IP 插口选项
    TCP/IP： 插口I/O
    TCP/IP 插口层
    leetcode136只出现一次的数字
    leetcode268缺失数字
    letecode242有效字母的异位词
  • 原文地址：https://www.cnblogs.com/piaozhe116/p/5512629.html
Copyright © 2020-2023  润新知