Managing Globally Needed Services in Web Applications
I am struggling to find a workable solution for how to expose service instances whose methods should be available across multiple parts of my applications.
Situation
First of all, by "service" I mean a function instance that contains properties and methods that are exposed through the API.
Consider a REST service that aims to provide convenient methods for accessing REST points on a server. I would make the following assumptions regarding this service:
-
It must be available throughout the application. It is likely that as the application grows, there will be new components that need access.
-
There is no need for multiple instances of this service. We can think of it as a solitary one.
My solutions
I can think of two possible solutions:
Concatenating scripts and using the global object
I could combine all of my files script (eg rest.service.js
, app.js
) into one file and create an object property to the global object (for example, App
). Then I could attach instances of the service to this object. This allows me to do something like this throughout the application:
App.restService.get()
However, even if I wrap each service in an IIFE, I still need to add some variables to window
in order to retrieve the instances.
Using commonJS / AMD modules
I could have require()
my service instances everywhere using require.js / browsify
Problems
Now I have a headache because on the one hand people are telling me that polluting a global object is bad practice . Singletons are bad practice.
On the other hand, we put in a lot of effort to "remove" scripts, every byte that has been saved is considered improved. Using a browser will result in the same script injected in multiple files though (I'm using web components, so I have a lot of isolated scripts). Not to mention, I have no idea how to provide a user-safe service using a browser.
So how should I approach this problem?
How can I provide standard services that may or may not be created multiple times? How can I implement safe for security?
source to share
Just a starting point (but too long to be a comment). I really like the strategy used by AngularJs where you always create services inside the container - and every time you create something, you also specify which modules should be injected into it
angular.module('myApp.services', []); // the second argument are the dependencies (an empty array
At any time, you can get your modules and add functionality:
var services = angular.module('myApp.services');
services.factory('yourServiceName', //
['other', 'service', 'dependencies'],
function(other, service, dependencies){
other.doStuff();
service.doStuff();
dependencies.doStuff();
[..]
});
Then you can inject your module into other modules
var myApp = angular.module('na', ['yourServiceName'])
In angular, the application is created by the framework itself, but I think you can create an entry point for your application so that you can use your services.
.. Unfortunately, I don't know exactly how this pattern is implemented - perhaps all modules are stored in the application instance, so the global namespace is not polluted.
source to share
This issue also confuses me, I think there are two points that I can figure out: 1) There must be an entry point for every service globally, otherwise it is impossible to get the one you need globally. It's not nice to add a lot of things to the global, but I think the customer service deserves attention. 2) Configure a service object other than initialization, for example they can only be one ajax service object with different configuration to do different things. There are objects, so they can be combined and expanded.
This is an interesting topic, I would like to see more opinions, not just service management, but also other resources like templates, objects, files, etc.
source to share