Skip to content

Instantly share code, notes, and snippets.

@0bie
Last active September 27, 2017 05:26
Show Gist options
  • Save 0bie/fa7c28f1a463cccb08b68dc3f89eedf2 to your computer and use it in GitHub Desktop.
Save 0bie/fa7c28f1a463cccb08b68dc3f89eedf2 to your computer and use it in GitHub Desktop.
JS Module Patterns
// Anonymous function:
// Ex.1
(function() {
// We keep these variables private inside this closure scope
var myGrades = [93, 95, 88, 0, 55, 91];
var average = function() {
var total = myGrades.reduce(function(accumulator, item) {
return accumulator + item;
}, 0);
return 'Your average grade is ' + total / myGrades.length + '.';
}
var failing = function() {
var failingGrades = myGrades.filter(function(item) {
return item < 70;
});
return 'You failed ' + failingGrades.length + ' times.';
}
console.log(failing());
})();
// Ex.2
var global = 'Hello, I\'m a global variable :)';
(function() {
// We keep these variables private inside this closure scope
var myGrades = [93, 95, 88, 0, 55, 91];
var average = function() {
var total = myGrades.reduce(function(accumulator, item) {
return accumulator + item;
}, 0);
return 'Your average grade is ' + total / myGrades.length + '.';
}
var failing = function() {
var failingGrades = myGrades.filter(function(item) {
return item < 70;
});
return 'You failed ' + failingGrades.length + ' times.';
}
console.log(failing());
console.log(global);
})();
// Global import
(function(globalVariable) {
// Keep these variables private inside this closure scope
var privateFunction = function() {
console.log('Shhh, this is private');
}
// Expose the below methods via the `globalVariable` interface while hiding the implementation of the method within the `function()` block
globalVariable.each = function(collection, iterator) {
if (Array.isArray(collection)) {
for (var i = 0; i < collection.length; i++) {
iterator(collection[i], i, collection);
}
} else {
for (var key in collection) {
iterator(collection[key], key, collection);
}
}
};
globalVariable.filter = function(collection, test) {
var filtered = [];
globalVariable.each(collection, function(item) {
if (test(item)) {
filtered.push(item);
}
});
return filtered;
};
globalVariable.map = function(collection, iterator) {
var mapped = [];
globalUtils.each(collection, function(value, key, collection) {
mapped.push(iterator(value));
});
return mapped;
};
globalVariable.reduce = function(collection, iterator, accumulator) {
var startingValueMissing = accumulator === undefined;
globalVariable.each(collection, function(item) {
if (startingValueMissing) {
accumulator = item;
startingValueMissing = false;
} else {
accumulator = iterator(accumulator, item);
}
});
return accumulator;
};
})(globalVariable);
// Object interface
var myGradesCalculate = (function() {
// Keep this variable private inside this closure scope
var myGrades = [93, 95, 88, 0, 55, 91];
// Expose these functions via an interface while hiding the implementation of the module within the `function()` block
return {
average: function() {
var total = myGrades.reduce(function(accumulator, item) {
return accumulator + item;
}, 0);
return 'Your average grade is ' + total / myGrades.length + '.';
},
failing: function() {
var failingGrades = myGrades.filter(function(item) {
return item < 70;
});
return 'You failed ' + failingGrades.length + ' times.';
}
};
})();
// Revealing Module Pattern
var myGradesCalculate = (function() {
// Keep this variable private inside this closure scope
var myGrades = [93, 95, 88, 0, 55, 91];
var average = function() {
var total = myGrades.reduce(function(accumulator, item) {
return accumulator + item;
}, 0);
return 'Your average grade is ' + total / myGrades.length + '.';
};
var failing = function() {
var failingGrades = myGrades.filter(function(item) {
return item < 70;
});
return 'You failed ' + failingGrades.length + ' times.';
}
// Explicitly reveal public pointers to the private functions that we want to reveal publicly
return {
average: average,
failing: failing
};
})();
// CommonJS
// myModule.js
function myModule() {
this.hello = function() {
console.log('hello');
}
this.goodbye = function() {
console.log('goodbye');
}
}
module.exports = myModule;
// app.js
var myModule = require('path/to/myModule');
var myModuleInstance = new myModule();
myModuleInstance.hello(); // => 'hello'
myModuleInstance.goodbye(); // => 'goodbye'
// AMD
define(['array', 'of', 'dependencies'], function callback('array', 'of', 'dependecies') {
console.log('the callback function takes the dependencies as args');
});
define(['myModule', 'myOtherModule'], function(myModule, myOtherModule) {
console.log(myModule.hello());
});
// dependencies must also be defined using the `define` keyword E.g
define([], function() {
return {
hello: function() {
console.log('hello');
},
goodbye: function() {
console.log('goodbye');
}
};
});
// https://medium.freecodecamp.org/javascript-modules-a-beginner-s-guide-783f7d7a5fcc
// https://medium.freecodecamp.org/lets-learn-javascript-closures-66feb44f6a44
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment