js

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

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



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


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

1、第一个效果图代码:

[javascript] view plain copy
print?在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><span class="string">"&lt;span/&gt;"</span><span>);&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="keyword">this</span><span>.txtEle.text(</span><span class="keyword">this</span><span>.value);&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;</span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="keyword">this</span><span>.textEle&nbsp;=&nbsp;(“<input type=’text’ />”);  
  33.         this.textEle.val(this.value);  
  34.   
  35.         this.btnWapper = (</span><span class="string">"&lt;div&nbsp;style='display:&nbsp;inline;'/&gt;"</span><span>);&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="keyword">this</span><span>.saveBtn&nbsp;=&nbsp;(“<input type=’button’ value=’保存’/>”);  
  36.         this.cancelBtn = $(“<input type=’button’ value=’取消’/>”);  
  37.         this.btnWapper.append(this.saveBtn).append(this.cancelBtn);  
  38.   
  39.         this.parentEle.append(this.txtEle).append(this.textEle).append(this.btnWapper);  
  40.   
  41.         this.convertToReadable();  
  42.     },  
  43.     /** 
  44.      * 初始化所有事件 
  45.      */  
  46.     initEvents: function ()  
  47.     {  
  48.         var that = this;  
  49.         this.txtEle.on(“click”function (event)  
  50.         {  
  51.             that.convertToEditable();  
  52.         });  
  53.   
  54.         this.cancelBtn.on(“click”function (event)  
  55.         {  
  56.             that.cancel();  
  57.         });  
  58.   
  59.         this.saveBtn.on(“click”function (event)  
  60.         {  
  61.             that.save();  
  62.         });  
  63.   
  64.     },  
  65.     /** 
  66.      * 切换到编辑模式 
  67.      */  
  68.     convertToEditable: function ()  
  69.     {  
  70.         this.txtEle.hide();  
  71.         this.textEle.show();  
  72.         this.textEle.focus();  
  73.   
  74.         if(this.getValue() == this.initValue )  
  75.         {  
  76.             this.textEle.val(“”);  
  77.         }  
  78.   
  79.         this.btnWapper.show();  
  80.     },  
  81.     /** 
  82.      * 点击保存 
  83.      */  
  84.     save: function ()  
  85.     {  
  86.         this.setValue(this.textEle.val());  
  87.         this.txtEle.html(this.getValue().replace(/\n/g,“<br/>”));  
  88.   
  89.         var url = “id=” + this.id + “&value=” + this.value;  
  90. //                alert(url);  
  91.         console.log(url);  
  92.         this.convertToReadable();  
  93.     },  
  94.     /** 
  95.      * 点击取消 
  96.      */  
  97.     cancel: function ()  
  98.     {  
  99.         this.textEle.val(this.getValue());  
  100.         this.convertToReadable();  
  101.     },  
  102.     /** 
  103.      * 切换到查看模式 
  104.      */  
  105.     convertToReadable: function ()  
  106.     {  
  107.         this.txtEle.show();  
  108.         this.textEle.hide();  
  109.         this.btnWapper.hide();  
  110.     },  
  111.     setValue: function (value)  
  112.     {  
  113.         this.value = value;  
  114.     },  
  115.     getValue: function ()  
  116.     {  
  117.         return this.value;  
  118.     }  
  119. }  
  120. ;  
/**
 * 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;
    }
}
;

引入到页面代码:
  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&nbsp;()&nbsp;&nbsp;</span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{&nbsp;&nbsp;</span></li><li class=""><span>&nbsp;&nbsp;</span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;("ul&nbsp;li").each(function&nbsp;()&nbsp;&nbsp;</span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{&nbsp;&nbsp;</span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;new&nbsp;PlaceFieldEditor((this).attr("id"),&nbsp;"请输出成绩...",&nbsp;(this));  
  11.             });  
  12.   
  13.   
  14.         });  
  15.   
  16.     </script>  
  17.   
  18.     <style type=“text/css”>  
  19.         body  
  20.         {  
  21.             font-size: 12px;  
  22.             color: #333;;  
  23.         }  
  24.   
  25.         ul li  
  26.         {  
  27.             line-height: 30px;  
  28.         }  
  29.   
  30.     </style>  
  31. </head>  
  32. <body>  
  33.   
  34.   
  35. <ul>  
  36.     <li id=“1”>张三:</li>  
  37.     <li id=“2”>李四:</li>  
  38.     <li id=“3”>王二:</li>  
  39. </ul>  
  40.   
  41. </body>  
  42. </html>  
<!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代码:

[javascript] view plain copy
print?在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><span class="string">"&lt;span/&gt;"</span><span>);&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="keyword">this</span><span>.txtEle.text(</span><span class="keyword">this</span><span>.value);&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;</span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="keyword">this</span><span>.textEle&nbsp;=&nbsp;(“<textarea style=’width:315px;height:70px;’ />”);  
  18.     this.textEle.text(this.value);  
  19.   
  20.     this.btnWapper = (</span><span class="string">"&lt;div&nbsp;style='display:&nbsp;block;'/&gt;"</span><span>);&nbsp;&nbsp;</span></span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="keyword">this</span><span>.saveBtn&nbsp;=&nbsp;(“<input type=’button’ value=’保存’/>”);  
  21.     this.cancelBtn = $(“<input type=’button’ value=’取消’/>”);  
  22.     this.btnWapper.append(this.saveBtn).append(this.cancelBtn);  
  23.   
  24.     this.parentEle.append(this.txtEle).append(this.textEle).append(this.btnWapper);  
  25.   
  26.     this.convertToReadable();  
  27.   
  28. };  
/**
 * 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的方法,上一篇博客已经介绍过:

[javascript] view plain copy
print?在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. }  
/**
 * @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;
}
最后页面代码:

  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&nbsp;()&nbsp;&nbsp;</span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{&nbsp;&nbsp;</span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;("ul&nbsp;li&nbsp;div").each(function&nbsp;()&nbsp;&nbsp;</span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{&nbsp;&nbsp;</span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;new&nbsp;PlaceAreaEditor((this).attr("id"),&nbsp;"请留言...",&nbsp;(this));  
  14.             });  
  15.         });  
  16.   
  17.     </script>  
  18.   
  19.     <style type=“text/css”>  
  20.   
  21.         body  
  22.         {  
  23.             font-size: 12px;  
  24.             color: #333;;  
  25.         }  
  26.   
  27.         ul li  
  28.         {  
  29.             padding: 5px 0 8px 0 ;  
  30.         }  
  31.   
  32.     </style>  
  33. </head>  
  34. <body>  
  35.   
  36.   
  37. <ul>  
  38.     <li id=“1”><h3>我要改剧本,不让~~</h3>  
  39.         <div>  
  40.         </div>  
  41.     </li>  
  42.   
  43.     <li id=“2”><h3>悬崖上有桥么,有?没有~ </h3>  
  44.         <div>  
  45.         </div>  
  46.     </li>  
  47.     <li id=“3”><h3>你敢打坏我的灯?不租~   </h3>  
  48.         <div>  
  49.         </div>  
  50.     </li>  
  51. </ul>  
  52.   
  53. </body>  
  54. </html>  
<!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相关视频,有兴趣的可以去他网站学习!


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





阅读更多
文章标签: js
个人分类: js
想对作者说点什么? 我来说一句

javascript手册

2010年05月18日 525KB 下载

JS流程图JS流程图

2017年12月21日 909KB 下载

JavaScript实用技巧

2009年04月02日 58KB 下载

梅花雨日历下载(共3种)

2009年12月05日 29KB 下载

js大全 javascrip 下载吧

2011年07月18日 70KB 下载

js 验证js 验证js 验证

2009年12月08日 16KB 下载

js树形控件js树形控件

2008年12月12日 90KB 下载

javascript合并单元格

2010年11月26日 1KB 下载

没有更多推荐了,返回首页

不良信息举报

js

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭