Вложенные функции в Javascript

Question

Я хотел бы иметь блок JavaScript вроде этого, но это, похоже, недействительно.

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  
    } 

} 

Я тогда хотел бы вызывать функции startRecorder() и stopRecorder() из другого блока кода, как это.

MYAPP.recordingManager = { 

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

} 

Я ценю любую помощь, которую вы можете предоставить. Благодаря!

Answer 1

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  
     } 
    } 

})(); 

Answer 2

То, что вы пытаетесь определить, называется литералом объекта. Их синтаксис выглядит следующим образом:

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

И тогда вы можете вызвать

AudioRecording.method(); 

Answer 3

В Javascript создании объекта с помощью литерала объекта позволяет определить функцию только как методы объекта. Измените свой код, как показано ниже:

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  
    } 

}; 

Answer 4

Это возможно, если вы соблюдаете правила JSON.

Вы хотите создать объект буквальным, так абстрактно, это должно выглядеть следующим образом:

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(); 

Так что ваш код может выглядеть примерно так:

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(); 

Answer 5

Вы можете применить шаблон модуля с рыхлым увеличением:

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 || {}); 

Это очень подходящий шаблон для расширенный существующий модуль, который вы уже определили, что позволяет загружать асинхронно разные функции одного и того же модуля MYAPP.

¡Надеюсь, это поможет!