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

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 = $("");
        this.txtEle.text(this.value);

        this.textEle = $("");
        this.textEle.val(this.value);

        this.btnWapper = $("
"); this.saveBtn = $(""); this.cancelBtn = $(""); 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,"
")); 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; } } ;

引入到页面代码:



    
    
    

    

    




  • 张三:
  • 李四:
  • 王二:
嗯,代码就不详细说了,都比较简单,使用了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 = $("");
    this.txtEle.text(this.value);

    this.textEle = $("