I'm creating a wrapper for an API that will be used in a couple different applications.
I'm using a global object and placing the various functions into that object as different keys. So I'll have:
window.globalContainer = {
APIEndpoint1: function(){
make API call and resolve result
},
APIEndpoint2: function(){},
...
}
All the meat of the API calls are directly in the functions. That is, you could go to window.globalContainer.APIEndpoint1 from the console and see the entire function.
Is this generally bad practice for something that's used across multiple applications and acts as a helper library? Or is this acceptable? I looked at jQuery in the console and it seemed to do much of the same. If it is frowned upon, how do I implement private functions within the global object?
A good place to start is anonymous closures:
(function (global) {
var foo = global.foo || {};
//accessible
foo.publicVar = 5;
foo.publicFcn = function (a, b) {
privateFcn(a, b);
...
};
//not accessible
var privateVar = 5;
function privateFcn(a, b) {
...
}
global.foo = foo;
})(window)
With these you can pretty intuitively build a library and not pollute the namespace.
You explicitly say which variables and functions you want to be made accessible.
You can use an IIFE to implement private functions/properties.
window.globalContainer = function () {
//what ever you define here is not accessible outside. Only the API in
//the returned object is accessible outside
function private1() {
make API call and resolve result
}
return {
APIEndpoint1: function(){
private1();
},
APIEndpoint2: function(){},
...
}
}();
Related
Background:
Building on this question about how to expose a library for unit testing with Jest. I would now like to create a class of functions that can be called with dot notation inside of dot notation (this may not even be possible). First a bit of methodology that I'm currently using:
Here's an example of how I've been modifying the JavaScript Math functions:
Math.mean = function(numericArray){
if(Math.isNumericArray(numericArray)){
return math.mean(numericArray);
}
return false;
}
FYI, The lowercase math.mean() call is to the math library: https://mathjs.org/, and isNumericArray is just a validator to make sure what's passed in is a numeric array.
And then I export it like this:
module.exports.mean = exports = Math.mean;
So Jest can see it for my unit tests.
My actual question:
What I want to do is create an upper level "class" called Math.acs, so you'd make the call into it with Math.acs. Then it would have sub-functions (EG: foo() & bar()) so you'd call them like this: Math.acs.foo(data); or Math.acs.bar(data);
I've tried to encapsulate them into an IIFE:
Math.acs = (function(data) {
function foo(data){
console.log('hi mom');
};
function bar(data){
console.log("hi dad");
}
return bar;
})();
Which didn't work (the CLI can't see anything below Math.acs), I've also tried straight functions inside of functions which also didn't work.
I'm not going to die if this isn't possible, but it would make the half dozen or so functions required in the acs module centralized and easier to maintain. If it's not possible, I can write the individual math modules the same way I've shown above.
You need to take a function with properties and return this function.
Math.acs = (function(data) {
function f() {};
f.foo = function (data) { console.log('hi mom'); };
f.bar = function (data) { console.log("hi dad"); };
return f;
})();
I am learning JavaScript and have come across of the structure below:
var Test = (function () {
function func1() {
//do something.....
}
function func2() {
//do something.....
}
function func3() {
//do something.....
}
return {
func1: func1,
func2: func2,
func3: func3
};
})();
I am wondering what the return block is doing. Is this a very commonly used JavaScript structure? Please let me know where can I get more information about this.
This is the Revealing Module Pattern.
The returned object contains references to the functions defined inside the IIFE. So the functions defined inside are private to the anonymous function.
But if you want to use the inner functions outside, you can use the returned object.
The value of Test will be
var Test = {
func1: func1,
func2: func2,
func3: func3
};
And you can call func1 from outside as
Test.func1();
This is the way Javascript emulate class. As there is no visibility specifiers using Module pattern, variables/methods can be make public/private.
The revealing module pattern is inspired from Module pattern. In revealing module pattern, only reference to the private variables/methods is returned in an object.
The main idea behind the pattern is avoiding evil global variables. This looks similar to IIFE except an object is returned instead of function. The variables/methods defined inside the IIFE are private to the function. To access any variable/method inside the IIFE, it needs to be added in the returned object and then it can be accessed from outside of IIFE. This pattern takes advantage of closures, so the variables/methods defined inside the IIFE are accessible even after the object is returned.
From Addy Osmani's book Learning Javascript Design patterns
The Revealing Module pattern came about as Heilmann was frustrated with the fact that he had to repeat the name of the main object when we wanted to call one public method from another or access public variables. He also disliked the Module pattern’s requirement for having to switch to object literal notation for the things he wished to make public.
The result of his efforts was an updated pattern where we would simply define all of our functions and variables in the private scope and return an anonymous object with pointers to the private functionality we wished to reveal as public.
Advantages:
Encapsulation. The code inside the IIFE is encapsulated from outside world
Clean, organized and reusable code
Privacy. It allows to create private variables/methods. The private variables/methods cannot be touched from outside of the IIFE.
Disadvantages:
If a private function refers to a public function, that public function can't be overridden
Further Reading:
https://en.wikipedia.org/wiki/Module_pattern
https://carldanley.com/js-revealing-module-pattern/
How to use Revealing module pattern in JavaScript
EDIT
From comment from #Mike
It's of note that it's common to create an object (eg, var me = {};) and then declare the would-be public members on it (me.func1 = function() { /* ... */ };), returning that object at the end (return me;). This avoids the repetition that we see in the return statement of OP's code (where all the public stuff is repeated).
It's a literal object in the return statement. It's like creating an object and then returning it:
var obj = {
func1: func1,
func2: func2,
func3: func3
};
return obj;
The literal object syntax creates an object and sets its properties, just like:
var obj = new Object();
obj.func1 = func1;
obj.func2 = func2;
obj.func3 = func3;
return obj;
The purpose of returning the object is to reveal the functions inside the function to the code outside, while creating a scope for private variables that the functions can use.
When not using private variables, the code does the same thing as:
var Test = {
func1: function() {
//do something.....
},
func2: function() {
//do something.....
},
func3: function() {
//do something.....
}
};
Private variables are declared inside the function scope, and are only reachable by the functions inside it. Example:
var Test = (function () {
var name;
function setName(str) {
name = str;
}
function getName() {
return name;
}
return {
setName: setName,
getName: getName
};
})();
Test.setName("John Doe");
var name = Test.getName();
That works like a class in other programming languages. Therefore, you can access the public func1 member using Test.func1 and call it like a normal function using Test.func1().
I was just looking at the code of a simple demonstration of modular pattern, have a look :
// Global module
var myModule = (function ( jQ, _ ) {
function privateMethod1(){
jQ(".container").html("test");
}
function privateMethod2(){
console.log( _.min([10, 5, 100, 2, 1000]) );
}
return{
publicMethod: function(){
privateMethod1();
}
};
// Pull in jQuery and Underscore
})( jQuery, _ );
myModule.publicMethod();
The code is pretty straightforward, what I don't understand is what's the need for a publicMethod? Why are privateMethod1 and privateMethod2 inaccessible? I understand that privateMethod1 and privateMethod2 are classic js functions and publicMethod is more of a variable assigned to hold a function.
privateMethod1() and privateMethod2() are local functions declared inside the module function wrapper. As such, they are only visible and callable from within that function wrapper. They can't be reached from outside the module wrapper.
This is the same as a local variable inside a function.
function someFunc() {
// a function declared inside another function is ONLY available
// inside that function
function localFunc() {
// do something
}
// this is just like a local variable which is only available within
// the scope of the function itself
var myVariable = 2;
}
// can't call localFunc here - this will be an error
// because it is defined in a different scope and not available here
localFunc();
Private methods can be useful when you want to create functions or methods that the public methods can use, but you do not want outside callers to be able to also call or use those functions/methods.
Private variables can be used to store state that the public methods or private methods want to reference, but you don't want the outside callers to have access to or be able to mess with.
I have a bunch of functions in my script which resides in a .js file.
How can avoid conflicts with the names of my functions within the same page if some other script written by some other guys use the same function names as in my script ?
Is there a way to do this?
If you don't need access to those functions outside of your script you can wrap the whole script in an immediately invoked function expression:
(function () {
// Your code here
}());
This introduces a new scope, so any declarations within it are not visible outside of it.
If you do need access outside of that scope, expose your functions as methods of a "namespace":
var YourStuff = (function () {
// Private functions etc...
// Expose public methods
return {
someMethod: function () {}
};
}());
By taking this approach you only introduce a single global identifier, reducing the chances of a conflict. You can call the method as follows:
YourStuff.someMethod();
Use namespaces..
var company = {};
company.doSomething = function() {
};
company.project = {};
company.project.submodule = {};
company.project.submodule.doSomething = function() {};
function validateHistoryId(input) {
$.getJSON('request.php', {"action": "historyExists", "history_id" : input.value},
function(data) {
console.log(input.value);
}
);
}
i use jQuery ajax call from javascript function. I tried the above code and it works, but I don't know will it cause any problems in the future.
I want to know, can ajax callback function see variables of it's parent function? and is it a bad practice to do so?
This is the JavaScript functional way to doing things. It's called closure: functions carry variable pointers from their current scope and from any other parent scope.
So it's not only good practice, but this is the pattern you should normally follow instead of pushing around parameter objects, etc.
Please notice that the "this" reference is special, it is never closured (as opposed to any other references) and thus always point the global object in anonymous functions.
In fact a developer needs some time to fully employ the power of the closure feature - this is a basic example you just written. In more advanced (and not solely async) scenarios closure helps you to create "fire and forget" behavior, or can provide you with "private" variables that are not accessible from client code (useful for library development). Closure also help you isolate your code so that it will not mess with the global scope.
1) Example: how to create protected variables with closures. You are able to acccess two methods that can access "protectedVariable" but you are not able to access it yourself - so the control is guaranteed.
function protectedScope(initData) {
var protectedVariable = initData;
return {
getter: function() { return protectedVariable; }
setter: function(v) { protectedVariable = v; }
}
}
var methods = protectedScope(10);
console.log(methods.getter());
2) isolation: the following code will not garbage the global scope even with "global" function definitions
var API = (function() {
var protectedVariable = 0;
var myNotGlobalFunction() {
return protectedVariable;
}
return myNotGlobalFunction;
})();