关闭

js

标签: js
78人阅读 评论(0) 收藏 举报
分类:

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相关视频,有兴趣的可以去他网站学习!


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





0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:2234次
    • 积分:78
    • 等级:
    • 排名:千里之外
    • 原创:4篇
    • 转载:12篇
    • 译文:0篇
    • 评论:0条
    文章分类