Reputation: 876
I'm totally new to modular JS and never used any of the pattern before. I'm writing a project where it got up to 400+ lines of code and I want to manage it better by separating things in different modules. I chose to use commonJS modules because I already use webpack. Now I putted my first function in a different module and exported it like this:
//init.js file
var initt = function () {
octaveNumber = document.getElementById("octaveNum");
audioCtx = new (window.AudioContext || window.webkitAudioContext);
osc = audioCtx.createOscillator();
volume = audioCtx.createGain();
filter = audioCtx.createBiquadFilter();
osc.connect(filter);
volume.connect(audioCtx.destination);
booleanVal = false;
osc.frequency.value = dial.value
osc.start();
gainDisplay.innerHTML = gainSlider.value;
noteSetOscFreq()
octaveUpClick()
octaveDownClick()
waveFormSelector()
}
module.exports = initt;
in my main JS file I required it
var messages = require('./init');
and finally called the function in an If statement where it belongs:
if (!localStorage.getItem("presetsArr") {
messages.initt;
Unfortunately, I'm getting Cannot read property 'gain' of undefined
in the console which means that Init module is not initialising variables and other things as it supposed. When I put that whole function back without using commonJS modules, it works just fine. I know it might be something with returning the values, but I can't put my hands on it. Nothing is working.
Upvotes: 0
Views: 776