Last active
September 27, 2017 05:26
-
-
Save 0bie/fa7c28f1a463cccb08b68dc3f89eedf2 to your computer and use it in GitHub Desktop.
JS Module Patterns
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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