Recently i asked to use eval() for a module function. Now i ended up doing a very weird function which does what i want. I like the idea i made it but im not so sure if this is state of the art, or more, good to build an application on.
index.html:
<script src="module.js"></script>
<script>
require('alert');
bam(); // 9
</script>
module.js:
(function () {
var require = window.require = function (fnName) {
var dependencies = fnName.split(' '); // load multiple dependencies etc. (not nessecairy now)
// REAL CASE WOULD BE, TO LOAD A .JS FILE INTO A STRING VAR
var code = 'var bam = function() { var x = 1; var y = 2; var z = (x+y)*3; alert(z); }';
return (function () {
window.eval(code);
})();
}
})();
So is this a good solution for a require function like in php if i only load and eval() files made by me?
EDIT: I modified my code and finished it now:
(function () {
"use strict"
// include function
var include = window.include = function (fnName, callback) {// var defining
var dep = fnName.split(' '),
depLen = dep.length,
code = '',
ajax = function (url, method, async, callback) { // ajax call to load scripts
if (window.XMLHttpRequest) {
var xmlhttp = new XMLHttpRequest(); // code for IE7+, Firefox, Chrome, Opera, Safari
}
else {
var xmlhttp = new ActiveXObject( "Microsoft.XMLHTTP" ); // code for IE6, IE5
}
xmlhttp.open(method, url, async);
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { // if scripts are loaded fire callback
callback( xmlhttp.responseText );
}
}
xmlhttp.send(null);
}
// If productionMode is set to false, use standard script tags instead of include.js
if (include.conf.productionMode === false) {
for (var i=0;i<depLen;i++) {
var script = document.createElement("script");
var path = include.conf.scriptPath + dep[i] + '.' + include.conf.scriptExtension;
script.setAttribute("type", "text/javascript");
script.setAttribute("src", path);
document.getElementsByTagName('head')[0].appendChild(script);
}
// function looping to only fire the callback if scripts are ready
var fn = function () {
var state = 0;
for (var i=0;i<depLen;i++) {
var objName = dep[i];
if ( typeof window[objName] === 'object' ) {
state++;
}
}
// scripts ready
if (state === depLen) {
clearInterval(t);
callback();
return;
}
}
// setInterval for function looping
var t = setInterval(fn,100);
}
// callback is not set, so use the one liner function call as a synchronous loader
if (typeof callback === 'undefined') {
// function looping to only fire the callback if scripts are ready (production mode)
for (var i=0;i<=depLen-1;i++) {
ajax(include.conf.scriptPath + dep[i] + '.' + include.conf.scriptExtension, 'GET', false, function(response) {
code += response + ';';
});
}
window.eval(code);
return;
}
// function looping to only fire the callback if scripts are ready (production mode)
for (var i=0;i<depLen;i++) {
ajax(include.conf.scriptPath + dep[i] + '.' + include.conf.scriptExtension, 'GET', true, function(response) {
code = code.replace(';;;;','');
code += response + ';;;;';
});
}
// function to only fire the callback if scripts are ready
var fn = function() {
// scripts ready
if (code.slice(-2) === ';;;;') {
clearInterval(t);
console.log(code);
window.eval(code);
callback();
}
}
// setInterval for function looping
var t = setInterval(function() { fn(); },0);
}
// include.js configuration
include.conf = {
productionMode : false, // set to false for debugging
scriptPath : 'js/', // path to your scripts
scriptExtension : 'js' // script extension
}
})();