This and That, and Javascript

WP_000276

Recently, I saw this in a class room and it remind me on how I use it at Javascript.

To overcome some of the requirements, we have to create client side scripting in an object oriented way. For an example, client side scripting for a custom server control. Anyways, I’m not going to show on how to create a custom server control now. Perhaps, at the other day. Smile

I has created a demo page for this topic. I design a Javascript class for this page with 3 public functions(Container, Push and Pop) and 1 public property(SequenceId).

function Demo() {
    var that = this;
    this.SequenceId = 1;

    Demo.prototype.Container = function () {
        return $(".Container");
    };

    Demo.prototype.Push = function () {
        this.Container().append("<div class='Item'>" + this.SequenceId + "</>");
        this.SequenceId += 1;
    };

    Demo.prototype.Pop = function () {
        if (this.Container().children().length > 0) {
            this.Container().children().first().remove();
        }
    };

    function AddHandler() {
        $("#Add").click(function (s, e) {
            that.Push();
        });

        $("#Remove").click(function (s, e) {
            that.Pop();
        });
    }

    AddHandler();
}

You can see I created a variable that and assigned it with this object. (At Javascript, this represent the current instant of the object.) This is because I’m going to re-use the functions of current instant at function body.

Let me explain this Javascript class.

  • function AddHandler()  : I use this private method to register all event handler of controls so that I can have no Javascript at my page. At this function body, I’m going to use Push and Pop functions which were created as public function. I cannot use this.Push or this.Pop because they will actually point to nothing since the this object is actually represent the button control.ThisnThat
  • this.SequenceId : This is a property of this class object. I use it to store the current running number. It will print on every item.
  • Demo.prototype.Push : This is a public function so the this object in this function body is actually represent the instant of the class.ThisnThat2

To know more about this, you can refer to Douglas Crockford’s Private Members in JavaScript.

Download Attachment


2 comments


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s