Skip to content

Instantly share code, notes, and snippets.

@mariusGundersen
Last active December 19, 2015 02:38
Show Gist options
  • Save mariusGundersen/5884450 to your computer and use it in GitHub Desktop.
Save mariusGundersen/5884450 to your computer and use it in GitHub Desktop.
An alternative to AMD modules, using default parameters in ES6
/*
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));
}
});
/*
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 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 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