Javascript Code Structure

Question

So I'm making this app about a prison and prisoners etc, and I'm using the Observer Pattern. Ideally I would like to have only 1 global variable named App, and I would like to use the provided Observer Pattern code (in the link above) as a helper in my App.

For example

function App() {
    this.helpers = {
        prisoners: function ObserverList() {
            this.observerList = [];

            ObserverList.prototype.Add = function( obj ){
                return this.observerList.push( obj );
            };
           //more stuff
        },

        prison: function Subject() {
            this.observers = new ObserverList();

            Subject.prototype.AddObserver = function(observer){
                this.observers.Add(observer);
            }; 
            //more stuff
       },
    ...
   };
   this.alcatraz = new this.helpers.prison();

My question is, does this make sense in terms of maintainability, best practices etc? It certainly looks better than just dumping the Observer code as a bunch of inner functions inside App.

With this restructuring there's an issue in prison. Since all the observer pattern functions are now key/value pairs inside this.helpers I should change this.observers = new ObserverList(); to something like new this.helpers.prisoners(); but the value of this has changed, and I have no idea how to call/apply with the new operator. (IF that even makes any sense).

Also I would appreciate any source (book/blog/video) that has real world friendly examples, instead of code snippets. Nothing against Addy Osmani and his work, he is an amazing guy for all these free resources, but for a newcomer making everything click together sometime is harder than a pro-javascripter would think (specially given the freedom that Javascript allows)

Apologies in advance if my question sounds 'too generic' or 'non-constructive', but I would appreciate some advice.

Answer 1

I haven't used the observer pattern but here are my thoughts:

1. Calling apply on new just make sense. In JS, the new operator effectively creates a blank object and assigns it to this. I'm would say that its equivalent to ctor.apply({}) except that it won't return the newly constructed object (you'd have to save the object before hand)

2. you could define the ctor before hand and just instantiate helpers:

   function App() {
   function helpers() {
       var self = this;
       this.prisoners = function ObserverList() {
           this.observerList = [];
           ObserverList.prototype.Add = function (obj) {
               return this.observerList.push(obj);
           };
           //more stuff
       };
       this.prison = function Subject() {
           this.observers = new self.prisoners();
           Subject.prototype.AddObserver = function (observer) {
               this.observers.Add(observer);
           };
           //more stuff
       };
   };
   this.helpers = new helpers();
   this.alcatraz = new this.helpers.prison();
   }
   

But personally if you just want to create types, I'd just declare them as functions in the appropriate scope. Something like:

function App() {
    function prisoners() {
        this.observerList = [];
        ObserverList.prototype.Add = function (obj) {
            return this.observerList.push(obj);
        };
        //more stuff
    };
    function prison() {
        this.observers = new prisoners();
        Subject.prototype.AddObserver = function (observer) {
            this.observers.Add(observer);
        };
        //more stuff
    };
    this.alcatraz = new this.prison();
}