CODEWITHSUNDEEP
javascript
learning_to_swim
learning_to_swim

Reputation: 361

Nested functions in Javascript

I would like to have a block of JavaScript like this but this does not seem to be valid. 

MYAPP.audioRecording = {

  var navigator = window.navigator;
  var Context = window.AudioContext || window.webkitAudioContext;
  var context = new Context();

  navigator.getUserMedia = (
    navigator.getUserMedia ||
    navigator.webkitGetUserMedia ||
    navigator.mozGetUserMedia ||
    navigator.msGetUserMedia
  );

  function startRecorder() {
     //start recording code
  }

  function stopRecorder() {
     //recorder stop    
  }

}

I then would like to call the startRecorder() and stopRecorder() functions from another block of code like this.

MYAPP.recordingManager = {

  MYAPP.audioRecording.startRecorder();
  MYAPP.audioRecording.stopRecorder();

}

I appreciate any help you can provide. Thanks!

Upvotes: 1

Views: 99

Answers (5)

wilsotobianco
wilsotobianco

Reputation: 1558

You can apply the module pattern with loose augmentation like this:

var MYAPP = (function(appModule) {

    // Here you are augmenting your existing MYAPP object 
    // adding a new object returned by this IIFE
    appModule.audioRecording = (function() {

        navigator.getUserMedia = (
            navigator.getUserMedia ||
                navigator.webkitGetUserMedia ||
                navigator.mozGetUserMedia ||
                navigator.msGetUserMedia);

        return {
            startRecorder: function() {
                //start recording code
            },
            stopRecorder: function() {
                //recorder stop    
            }
        };
    })();

    return appModule;

// Notice how the main IIFE is receiving the already defined MYAPP
// object. If this object hasn't been defined, it passes an empty object literal
})(MYAPP || {});

This is a very appropiate pattern to augment an existing module you already have defined, allowing you to load asynchronously different features of the same MYAPP module.

¡Hope it helps!

Upvotes: 0

Sebastian G. Marinescu
Sebastian G. Marinescu

Reputation: 2394

This is possible, if you abide by the rules of JSON.

You want to create an object literal, so in abstract this should look like this: 

myNameSpace = {

  STATICPROPERTY: 'test',

  method: function() {
    var variable = 'thisVarIsPrivateToMethod';
    this.variable = 'dynamic';
  },

  init: function() {
    this.method();

    console.log(this.STATICPROPERTY);  // will log "test"
    console.log(this.variable);        // will log "dynamic"
  }
}

myNameSpace.init();

So your code could look something like this:

MYAPP.audioRecording = {

  startRecorder: function() {
    //start recording code
    var myContext = this.context,
        myMedia = this.getUserMedia;
  }

    stopRecorder: function() {
    //recorder stop
  },

  init: function() {
    var Navigator = window.navigator,
        Context = window.AudioContext || window.webkitAudioContext;

    Navigator.getUserMedia = (
      Navigator.getUserMedia ||
      Navigator.webkitGetUserMedia ||
      Navigator.mozGetUserMedia ||
      Navigator.msGetUserMedia
    );

    this.context = new Context();
    this.getUserMedia = Navigator.getUserMedia;

    return this;
  }

}

MYAPP.audioRecording.init().startRecorder();

Upvotes: 1

RomanPerekhrest
RomanPerekhrest

Reputation: 92854

In Javascript creating object via object literal allows function definition only as object methods. Change your code as shown below:

var MYAPP = MYAPP || {};
MYAPP.audioRecording = {
  navigator : window.navigator,
  Context : window.AudioContext || window.webkitAudioContext,
  getUserMedia: (
    this.navigator.getUserMedia ||
    this.navigator.webkitGetUserMedia ||
    this.navigator.mozGetUserMedia ||
    this.navigator.msGetUserMedia
  ),
  startRecorder : function () {
     //start recording code
  },
  stopRecorder : function() {
     //recorder stop    
  }

};

Upvotes: 2

StAlex
StAlex

Reputation: 91

MYAPP.audioRecording = (function() {

    var navigator = window.navigator;
    var Context = window.AudioContext || window.webkitAudioContext;
    var context = new Context();

    navigator.getUserMedia = (
        navigator.getUserMedia ||
        navigator.webkitGetUserMedia ||
        navigator.mozGetUserMedia ||
        navigator.msGetUserMedia
    );

    return {
        startRecorder: function() {
            //start recording code
        },
        stopRecorder: function() {
            //recorder stop    
        }
    }

})();

Upvotes: 2

GMchris
GMchris

Reputation: 5648

What you're trying to define is called an object literal. Their syntax is as follows:

AudioRecording = {
    property: 'SomeProp',
    method: function() {
       console.log(this.property); // Will log 'SomeProp'
    }
}

And you can then call

AudioRecording.method();

Upvotes: 1

Related Questions