Reason for transferring function to self-executing function
I got the js code from a project company but I don't understand the reason for passing the function to the self-executing function.
Here is a diagram of the code.
(function(core) {
if (typeof define === "function" && define.amd) {
define("abc", function() {
var abc;
abc = window.Abc || core(window, window.jQuery, window.document);
abc.load = function(res, req, onload, config) {
var base, i, load, resource, resources;
resources = res.split(",");
load = [];
base = (config.config && config.config.abc && config.config.abc.base ? config.config.abc.base : "").replace(/\/+$/g, "");
if (!base) {
throw new Error("Please define base path to Abc in the requirejs config.");
}
i = 0;
while (i < resources.length) {
resource = resources[i].replace(/\./g, "/");
load.push(base + "/components/" + resource);
i += 1;
}
req(load, function() {
onload(abc);
});
};
return abc;
});
}
if (!window.jQuery) {
throw new Error("Abc requires jQuery");
}
if (window && window.jQuery) {
core(window, window.jQuery, window.document);
}
})(function(global, $, doc) {
var _c = {};
...
return _c;
});
Does it make sense to write code this way over something like below?
(function( core, $, undefined) {
...
} (window.core= window.core|| {}, jQuery )};
source to share
Is this some kind of advanced method?
Basically .... kinda.
In Javascript, functions are treated as first class objects. This means you can pass them in variables and whatnot. The first part (function(core) { ... })
creates an anonymous function with one argument core
. The parentheses around the function are mostly just allow function
. The second part (function(global, $, doc) { ... })
creates another function, which is immediately passed to the first function call as a value core
.
Trust in here, that's what's going on.
// Define the first function (the one that takes core)
var firstFunc = function (core) { /* ... */ };
// Define the second function (the one that takes global, $, and doc)
var secondFunc = function (global, $, doc) {
var _c = {};
/* ... */
return _c;
};
// Call the first, passing in the second.
firstFunc(secondFunc);
The above code and the code you posted do the same thing. One goal of writing something like this would be to isolate the second function so that the first can specify its own local versions of the variables global
, $
and doc
thus avoid conflicts with, for example, active versions of jQuery (which usually declares its own variable $
with global scope).
EDIT . Now that the code for the first function is complete, we can safely say that the reason for this is to resolve the dependencies and ensure that they are present before manually passing them to the second function. In terms of the code presented, it looks like it enforces the presence abc
(which I assume is some kind of dependency) via require.js as well as enforces the presence of jQuery. Also, it looks like the values in _c
returned by the function are being used as part of this dependency enforcement process, although I can't tell you exactly how to look at this.
source to share