An example of Javascript advanced object-oriented programming inheritance __ algorithm

The difficulty of JavaScript is object-oriented programming, which describes two ways to inherit javascript: JavaScript advanced inheritance, which uses an example to show how JS object-oriented programming and how to implement inheritance based on classes.

1, the use of object-oriented writing, to achieve the following function, real-time update data An example:

2, the use of the above class inheritance, complete the following effect:

Well, not much to say, JS training by knocking, so if you think the object-oriented is not very solid, you can tap a, if you feel very solid, provide an effect map, you can write a try.

1, the first effect chart code:

/** * Created with JetBrains webstorm. * User:zhy * date:14-6-7 * Time: PM 4:55 * To change this template use File | Settings |
 File Templates. * */** * @param ID * @param value * @param parentele Parent element * @constructor/function Placefieldeditor (ID, value, paren
    TEle) {this.id = ID;
    This.value = value;
    This.parentele = Parentele;

    This.initvalue = value;
    This.initelements ();
This.initevents (); } Placefieldeditor.prototype = {constructor:placefieldeditor,/** * Initialize all elements */Initelements:func
        tion () {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= ' Save '/>");
        THIS.CANCELBTN = $ ("<input type= ' button ' value= ' Cancel '/>"); This.btnWapper.append (THIS.SAVEBTN). APpend (THIS.CANCELBTN);

        This.parentEle.append (This.txtele). Append (This.textele). Append (This.btnwapper);
    This.converttoreadable ();
        /** * Initializes all events/Initevents:function () {var = 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 ();

    });
        /** * Switch to edit mode */Converttoeditable:function () {this.txtEle.hide ();
        This.textEle.show ();

        This.textEle.focus ();
        if (this.getvalue () = = This.initvalue) {this.textEle.val ("");
    } this.btnWapper.show ();
        /** * Click Save * * * 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 ();
        /** * Click Cancel * * Cancel:function () {This.textEle.val (This.getvalue ());
    This.converttoreadable ();
        /** * Switch to view mode/Converttoreadable:function () {this.txtEle.show ();
        This.textEle.hide ();
    This.btnWapper.hide ();
    }, Setvalue:function (value) {this.value = value;
    }, Getvalue:function () {return this.value; }
}
;

Introduced to the page code:

<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "Http://www.w3.org/TR/html4/loose.dtd" > &LT;HTML&G
T Well, the code is not detailed, are relatively simple, using jquery, if you do not like the use of native JS, I prefer to use jquery as a tool for JS.



2, the second effect diagram of the JS code:


/**
 * Created with JetBrains webstorm.
 * User:zhy
 * date:14-6-7 * Time
 : PM 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= ' Save '/>");
    THIS.CANCELBTN = $ ("<input type= ' button ' value= ' Cancel '/>");
    This.btnWapper.append (THIS.SAVEBTN). Append (this.cancelbtn);

    This.parentEle.append (This.txtele). Append (This.textele). Append (this.btnwapper);

    This.converttoreadable ();

};
 

Wrote Placeareaeditor inherited Placefieldeditor, then made a copy of the Initelements method, changed the text to textarea.

Extend's approach, the previous blog has been introduced:


/**
 * @param subclass  Subclass
 * @param superclass   parent
/function Extend (subclass, superclass)
{
    var F = function ()
    {
    };
    F.prototype = Superclass.prototype;
    The prototype of the subclass points to the _proto_ of F, _proto_ to the prototype
    Subclass.prototype = new F ()
    of the parent class. Stores a prototype property on a subclass that points to the parent class, making it easier to decouple the name of the parent class from the subclass's constructor using SubClass.superClass.constructor.call instead of Superclass.call
    Subclass.superclass = Superclass.prototype;
}
Last page code:


<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "Http://www.w3.org/TR/html4/loose.dtd" > &LT;HTML&G
T  

 

 

OK, end ~ ~ The above example is according to Konghao Teacher's example modifies, thanks Konghao teacher, the hole teacher address: www.konghao.org. Hole teacher recorded a lot of Java related video, interested can go to his website to learn.



There are any problems with the code or explanation, please note.