Last active
December 19, 2015 02:38
-
-
Save mariusGundersen/5884450 to your computer and use it in GitHub Desktop.
An alternative to AMD modules, using default parameters in ES6
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
/* | |
This is how 3 dependencies are defined using AMD. | |
Notice how when the number of dependencies grows the | |
distance between the path to the dependency and the | |
variable it is stored in grows. It quickly becomes | |
difficult to see which variable corresponds to which | |
module name. | |
*/ | |
define(["jQuery", "an/other/module", "knockout"], function($, dep, ko){ | |
return function MyVM(){ | |
var self = this; | |
this.field = ko.observable(""), | |
this.method = function(elm){ | |
var value = dep.calculate(elm); | |
$.get("url", {value: value}, result => self.field(result)); | |
} | |
}); |
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
/* | |
By using the default argument value as the path to the | |
module, the variable and the path stay together. The | |
variable is accessible in the factory method because it | |
is in an outer scope. Object destructuring can be used | |
to get only one of the methods in another module. | |
*/ | |
module(( | |
$ = "jQuery", | |
{calculate} = "an/other/module", | |
ko = "knockout" | |
) => function MyVM(){ | |
var self = this; | |
this.field = ko.observable(""), | |
this.method = function(elm){ | |
var value = calculate(elm); | |
$.get("url", {value: value}, result => self.field(result)); | |
} | |
}); |
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
/* | |
This function can be used in place of the AMD define method. | |
The demo.js file above shows how it is used. | |
*/ | |
function module(factory){ | |
var f = factory.toString(); | |
let start= f.indexOf("(") + 1; | |
let end = f.indexOf(")"); | |
let dependencies = f | |
.substring(start, end) | |
.split(",") | |
.map(a => a.trim()) | |
.map(a => { | |
let start = a.indexOf('"') + 1; | |
let end = a.lastIndexOf('"'); | |
return a.substring(start, end); | |
}); | |
//console.log(dependencies); | |
define(dependencies, factory); | |
}; |
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
/* | |
This is the equivilant done in node. Notice how the | |
require() method has to be called multiple times. One | |
advantage of the node/commonJS way of doing it is that | |
you don't have to wrap the module in an anonymous function. | |
*/ | |
$ = require("jQuery"); | |
{calculate} = require("an/other/module"); | |
ko = require("knockout"]); | |
function MyVM(){ | |
var self = this; | |
this.field = ko.observable(""), | |
this.method = function(elm){ | |
var value = calculate(elm); | |
$.get("url", {value: value}, result => self.field(result)); | |
} | |
} | |
exports = MyVM; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment