How to treat object classes which does not conflict with jQuery

Question

I am writing classes of JavaScript in this way.

var Dialog = function () {
this.dlg = $('<div>', { id: 'dlg' });
};
Dialog.prototype.show = function () {
this.dlg.animate({ opacity: 1.0 }, "fast");
};
Dialog.prototype.close = function () {
this.dlg.animate({ opacity: 0.0 }, "fast", function () { $(this).remove(); });
};

However, depending on the calling source of a function, 'this' of 'this.dlg' points not Classes itself but the element of jQuery. They were buried in advices about css's classes and I was not able to find a solution by Google. How should I define those Classes?

Thanks. I'm going to refer to this answer. – Tank2005 Jun 15 '13 at 02:48 — Tank2005, Jun 15 '13 at 02:48

Stiger · Accepted Answer · 2013-06-15T03:22:12.310

0

you should try this: (use self for this function itself)

function DialogWrapper () {
    var self;
    var Dialog = function () {
        self = this;
        self.dlg = $('<div>', { id: 'dlg' });
    };
    Dialog.prototype.show = function () {
        self.dlg.animate({ opacity: 1.0 }, "fast");
    };
    Dialog.prototype.close = function () {
        self.dlg.animate({ opacity: 0.0 }, "fast", function () { $(this).remove(); });
    };

    return new Dialog();
}

UPDATE

I use a wrapper outside Dialog to prevent self become global. With this wrapper, you also can manage your class (Dialog) become singleton or multiton

edited Jun 15 '13 at 03:22

answered Jun 15 '13 at 02:29

Stiger

1,189
2
14
29

If 'self' is a global variable, I think that it will not work well if multiple objects are made to a concurrent. – Tank2005 Jun 15 '13 at 02:51
No, it should not be a global. You must have a wrapper of it. I changed my code. Hope it help :) – Stiger Jun 15 '13 at 03:20
Thank you for the full explanation. – Tank2005 Jun 15 '13 at 09:01
@Stiger : We created a function called `DialogWrapper`. and have some variable called `Dialog` or `Dialog.prototype.show`. These variables are not accessible outside the wrapper. So hwta is the significance of using these variables inside the wrapper? Am i missing something ? – wuhcwdc Jun 15 '13 at 14:40
@Pankaj Garg: I create a new simple fiddle, include some comment, I hope it can explain to you about the wrapper. http://jsfiddle.net/mEa2X/ – Stiger Jun 16 '13 at 12:53
@Stiger : Instead of doing `self = this;` this. Why it should not be like this `self = new Object();` . I know default message will be null in this case. – wuhcwdc Jun 16 '13 at 14:13
@Pankaj Garg: `self` use to fix the inconsistent of `this`. – Stiger Jun 16 '13 at 14:24
@Stiger : You created a variable and assigned a function like this `var MyAlert = function () { dlg = this; dlg.Message = "Hello"; };` as you mentioned in you `JS-Fiddle`. Now, When you type `MyAlert.Message`, it shows the default message. How is this happening ? – wuhcwdc Jun 16 '13 at 14:31
@Pankaj Garg: as you see in my code `alert(message || self.Message);` this mean if it have parameter, it show the parameter, if not, it show `self.Message`. when I call `myAlert.Show()`, it should show `self.Message`. – Stiger Jun 16 '13 at 14:38
@Stiger - Understood that point, My question is - how the `MyAlert` is `Encapsulating` the Message value? My confusion is it `Encapsulates` only the `function`. right ? – wuhcwdc Jun 16 '13 at 14:39
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/31828/discussion-between-stiger-and-pankaj-garg) – Stiger Jun 16 '13 at 14:53
@Stiger - Are u there ? – wuhcwdc Jun 16 '13 at 15:40
@Pankaj Garg: yes, can we discuss in chat room? – Stiger Jun 17 '13 at 15:35
@Stiger - I am short of votes. Just wait 8 hours. and u will get +1 – wuhcwdc Jun 17 '13 at 15:59
It seems that there is also a method of changing the reference place of 'this' using '$.proxy()'. – Tank2005 Jun 18 '13 at 04:53

How to treat object classes which does not conflict with jQuery

1 Answers1