EcmaScript: import all methods to local scope
Is there a way to import all methods into scope without having to define them? Other languages (like Elm ) allow this.
The ES6 specification allows you to:
import {map, where} from 'underscore'; //unqualified imports by name only
import * as _ from 'underscore'; //with qualifier
but not this:
import * from 'underscore';
source to share
I couldn't think of how to do this without destroying the global namespace. However, if the object window
is smashed, it can also do so with a stranger.
It's someone else iframe
. I think this is an interesting approach and if there are any potential pitfalls please leave a comment and I will try to address them.
Basically what happens is the iframe will be created. It will have a script element whose content will be passed by the anonymous function. Its scope will be completely isolated, apart from any globals passed in (and their correlation setters if values are to be returned).
with buttons
Function
Type: Function ({settings))
Allows you to use the localized environment
Settings
Type: PlainObject
A set of key / value pairs that customize the environment. There is currently no error handling.
-
Lib
Type: PlainObject
This argument must be a library used in the localized global environment. -
n
Type: Function
This will be an anonymous function that runs locally. -
global
Type: PlainObject The
global argument will provide a link, if necessary, between the localized environment and the external context. Using a key value pair, the key will be the name available in the localized environment. The value will either be used (in this case, the external environment value must be used), or the value will be the setter (in this case, the external environment value will be updated at the end of the function execution). This is a freely developed implementation and can be adapted to more situations as needed.
defining the function to use
function using(args){
var lib = args.lib;
var callback = args.fn;
var global = args.global;
var iframe = document.createElement('iframe');
document.body.appendChild(iframe);
iframe.contentWindow.exec = function() {
for(var fn in lib){
this[fn] = lib[fn];
}
for(var val in global){
this[val] = global[val];
}
var scr = document.createElement("script");
scr.innerHTML = "("+callback+")()";
iframe.contentWindow.document.body.appendChild(scr);
};
iframe.contentWindow.exec();
for(var val in global){
if(global[val] instanceof Function)
global[val](iframe.contentWindow[val]);
}
iframe.parentNode.removeChild(iframe);
}
the code used in the demo
var stooges;
var list = document.querySelectorAll(".hello");//just a set of 5 divs classed as hello with w,o,r,l,d in them respectively
using({
lib: _,
global: {
"stooges":function(val){ stooges = val; },
"list":list
},
fn: function(){
function toUpperCase(x){
return x.toUpperCase();
}
function minSize(len){
return function(str){
return str.length >= len;
}
}
stooges = map(filter(["Larry", "Curly", "Moe"], minSize(4)), toUpperCase);
each(list,function(el){console.log(el.innerHTML);});
}
});
console.log(stooges);
source to share