Strange structure, what does it mean?

Question

I'm a comer at JavaScript, and just learning some basic stuff (function, variable, etc) and I don't know so much about complex structure in JavaScript.

When I read the source code of one of the web applications, there is a big point that I cannot understand. Here's the code :

Helper.using('py.Figures' , function (ns) {
    ns.Point = function (params) {
        ns.Figure.call(this, params);
        this.setType('Point');

        this.visual(new Kinetic.Circle({
            radius:5, strokeWidth:2,
            fill:'red', stroke:'black',
            draggable:false
        }));

        this.getX = function () {
        };
        this.getY = function () {
        };
        this.getPosition = function () {
            return {
                x:this.getX(), y:this.getY()
            }
        }

        ns.Point.distance = function (p1, p2) { // some code }

        ns.MidPoint = function (params)  { // some code }       
};

1) First point that I don't know in above code is the first line declaration :

Helper.using('py.Figures' , function (ns) {... } );

Many files in this document use this structure. In this document, there is a file name Helper, but when I search in this document, I don't see some thing like py.Figures (by using Control + F). So, what does it really points to?

Above line looks something like a function, so what does function(ns) mean in this, it looks like parameter, but I don't think so.

2) The second point I don't know is :

ns.Point, ns.Point.distance, ns.MidPoint look like methoda. So, function(ns) is a class, right ? And if ns.Point is a method, why in this method, there are other methods like getX and getY and it makes me feel that those look like a class too.

Sorry if my question is silly, but this code looks strange to me, and I don't see anything familar with some language I have learnt (Java, C#), or another scripting language too (Python)

Thanks.

MaxArt · Accepted Answer · 2012-07-28T08:56:21.350

2

1) That function (ns) {... } is indeed an argument. The function is parsed, and the pointer to the function is passed to the function Helper.using. You won't see these thing in Java, but I think it's one of the awesome points of Javascript.

It's the usual way to define callbacks, and that argument function looks like a callback indeed.

2) No, ns is a class object, or better, is generically an Object. It doesn't need to be an instance of a class. Then the callback function defines the method Point on the object ns. In the body of the method, it defines (or maybe redefines) the methods getX, getY and getPosition, because this refers to the object ns.

On a second look, ns.Point is indeed a function, but it may serve as a class definition, so in other parts of the code you may notice something like new ns.Point(...). That's how "classes" work in Javascript.

edited Jul 28 '12 at 08:56

answered Jul 28 '12 at 08:50

MaxArt

22,200
10
82
81

The name `ns` suggests this is used as a *namespace*. This probably adds new methods `Point`, `Point.distance` and `MidPoint` to the object acting as the `'py.Figures'` namespace. – DCoder Jul 28 '12 at 09:20
@DCoder I guess so, but it can really be anything. `Helper.using` can be some kind of class/object extender, taking the first parameter into account and extending it (and that may suggest that `eval` is used somewhere... ugh). – MaxArt Jul 28 '12 at 09:27
@MaxArt Can you tell me difference between `ns.Point` and `this.getX()` because as you said, it both define method for object `ns` ? Thanks :) – hqt Jul 28 '12 at 09:28
@hqt As I said, `ns.Point` looks like a class constructor, so you can create object instances with `new ns.Point(...)`. The `this` keyword you see in the constructor then refers to the newly created object. Then the `getX` and other methods are defined _in that object_. I miss the point of defining them in the constructor, since the most common way is to extend the class `prototype`, but it's a common technique to define some kind of "private" members. – MaxArt Jul 28 '12 at 09:33
@MaxArt: there is no need to `eval` to get namespaces, see [this answer and the linked GitHub project](http://stackoverflow.com/a/3588712/1233508). – DCoder Jul 28 '12 at 09:35
@DCoder There's hardly the need of `eval`. But you have to provide some code to do the job anyway. As far as we know, it can use `eval` as a fallback. – MaxArt Jul 28 '12 at 09:50
@MaxArt Ah. so there are two ways of use.first is : `var point = new Point(params); point.getX();` (because `getX` and `getY` is the method of object Point) and second is : `ns.Point.distance(p1,p2)` or `ns.Point.midpoint(p1,p2)` ( `distance` and `midpoint` act like static method, right ?) Thanks :) – hqt Jul 28 '12 at 10:16
@hqt Yes indeed, but in the second case, _first_ you have to call `ns.Point()`, or else `ns.Point.distance` probably isn't defined. – MaxArt Jul 28 '12 at 10:33

score 0 · Answer 2 · answered Jul 28 '12 at 09:32

If you are a newbie and do not have an idea about complex structures and pattern. You have to learn the concept first before you go further so you will not be mixed up or confuse in case you encounter a weird expressions. Heres a very good and exact tutorial for you: http://www.youtube.com/watch?v=gLVmkhLnxwM

I may not explained to you your code but i am sure that the video i sent will really help.

Strange structure, what does it mean?

2 Answers2