We Keep Coding

Module definition and usage in separate module

I am quite new at SAPUI5 and JS. There is something I do not understand well concerning the module definition and usage. Here is my context:
I want to create a Component my.test.comp that uses an external module object my.test.comp.Service.
So following the best practices, I have the following code:
Service.js:
sap.ui.define([
"sap/ui/base/Object"
], function(BaseObject) {
"use strict";
var modulePath = jQuery.sap.getModulePath("my.test.comp");
var SERVICE_ROOT_PATH = modulePath.lastIndexOf("/") > 0
? modulePath.substring(0, modulePath.lastIndexOf("/"))
: "/test";
var Service = BaseObject.extend("my.test.comp.Service", {
getServiceRootPath: function () {
return SERVICE_ROOT_PATH;
}
});
return Service;
});
And I use this in the Component.js:
sap.ui.define([
"sap/ui/core/Component",
"./Service"
], function(Component, Service) {
"use strict";
return Component.extend("my.test.comp.Component", {
init: function() {
var serviceRootPath = Service.getServiceRootPath();
jQuery.sap.log.error("ServicePathInfo : " + serviceRootPath);
}
});
});
When I run this, I get an error saying that getServiceRootPath is undefined, and throws an error.
So I changed the Service.js as follow:
sap.ui.define([
"sap/ui/base/Object"
], function(BaseObject) {
"use strict";
var modulePath = jQuery.sap.getModulePath("my.test.comp");
var SERVICE_ROOT_PATH = modulePath.lastIndexOf("/") > 0
? modulePath.substring(0, modulePath.lastIndexOf("/"))
: "/test";
var Service = BaseObject.extend("my.test.comp.Service");
Service.getServiceRootPath = function () {
return SERVICE_ROOT_PATH;
};
return Service;
});
And now it is working well. I do not understand what are the differences.
Could someone explain me why?

In JS, there are no classes. There are either plain objects ({}) or functions with constructor that can be called with new.
Accordingly, calling .extend("...") in UI5 returns a function, again, with its constructor as any other functions, ready to be used with new. Your module members (methods, properties, etc.) will be added to the prototype and not to the parent function (Service) itself.
BaseObject.extend("my.test.comp.Service", {
// methods in prototype ...
});
The required Service module (i.e. function) consists of only a constructor function (Service.constructor) and a prototype object (Service.prototype). That is why Service.getServiceRootPath was undefined in your first case. You'll need to call the constructor function with new first:
return Component.extend("my.test.comp.Component", {
init: function() {
const service1 = new Service(); /* returns an object with ..
* __proto__: {
* getServiceRootPath: f ()
* }
*/
const serviceRootPath = service1.getServiceRootPath();
// ...
},
});
(You could also directly access the method with Service.prototype.getServiceRootPath without new)
This also explains why Service.getServiceRootPath worked in the second case. You can add pretty much anything you like to an existing function since functions are ultimately objects too 🙂
It looks like your intention was not to create multiple "services" but a simple object with methods in it. In that case, just return a simple object with methods in your module definition.
sap.ui.define([
// Without "sap/ui/base/Object"
], function() {
"use strict";
//...
return {
getServiceRootPath: function () {
// ...
},
};
});
sap.ui.define([
"sap/ui/core/Component",
"./Service",
], function(Component, Service) {
"use strict";
return Component.extend("my.test.comp.Component", {
init: function() {
const serviceRootPath = Service.getServiceRootPath();
// ...
},
});
});
This will work too.

In your component.js you should import
"my/test/comp/Service"
instead of
"./Service"

What is the best way to deal with this Namespace JavaScript Structure?

i have an object as namespace with three main-objects. I call this object one time and after this it is working for itself.
My Code is structured like this:
var Application = Application || {};
Application.Module1 = {
//Code with some functions
}
Application.Module2 = {
//Code with some functions
}
Application.Module3 = {
//Code with some functions
}
(function(){
Application.Module1.Start();
})();
Primarily the modules working among themselves. I would like to call for example when i'm in Module1 a function in Module2 like:
Module2.randomFunction();
and not:
Application.Module2.randomFunction();
But i think it is a bad idea to go
Application.Module1.Start.call(Application)
because i'm using also other objects like jQuery.
What do you think would be the right way?

You can use a pattern like this -
var Application = (function() {
var Module1 = {
function1 : function() {
console.log("function1");
Module2.function2();
}
};
var Module2 = {
function2 : function() {
console.log("function2");
}
};
var Module3 = {
function3 : function() {
console.log("function3");
}
};
return {
Module1: Module1,
Module2: Module2,
Module3: Module3
}
})();
Application.Module1.function1();

Where to insert an internal (utility) object with a compatible RequireJS/AMD JavaScript library

Maybe the title is not quite useful to understand what is the problem but I'll try to explain in a clear way what I would achieve.
Following Jeremy Kahn template (you can found it at GitHub) I'm creating a library that is compatible with RequireJS and AMD.
The library looks like the following (skipped code for brevity).
;(function(global, undefined) {
var Fn = Function, GLOBAL = new Fn('return this')();
function initLSKitCore(context, _) {
'use strict';
// private vars here...
var LSKit = context.LSKit = function(options) {
this.groups = [];
return this;
};
/**
* Add a new Group
*/
LSKit.prototype.addGroup = function(groupId) {
// implementation here...
};
// other prototype methods...
}
var initLSKit = function(context, deps) {
var context = deps ? {} : global;
var _ = (deps && deps.underscore) ? deps.underscore : context._;
initLSKitCore(context, _);
// other modules here...
return context.LSKit;
};
if (typeof define === 'function' && define.amd) {
define(["underscore"], function (Underscore) {
var underscoreSupportsAMD = (Underscore != null);
// Some versions of Underscore.js support AMD, others don't.
// If not, use the `_` global.
var deps = { underscore: underscoreSupportsAMD ? Underscore : _ };
var SLKit = initLSKit({}, deps);
return SLKit;
});
} else {
initLSKit(this);
}
}(this));
The groups array enables to store, retrieve or get Group objects defined like this.
function Group(identifier, name){
this.identifier = identifier;
this.name = name;
this.internalList = [];
};
Based on that my actual requirement is the following. I would like to use Group as an internal class (I know the term is not correct since it's actually an internal object). So, where is the right place to insert the second snippet (i.e. Group constructor) in my library?

Following your template, you'd just need to inject it in the initLSkit method
if (typeof define === 'function' && define.amd) {
define(["underscore", "lib/group"], function (Underscore, Group) {
var underscoreSupportsAMD = (Underscore != null);
// Some versions of Underscore.js support AMD, others don't.
// If not, use the `_` global.
var deps = { underscore: underscoreSupportsAMD ? Underscore : _, Group: Group };
var SLKit = initLSKit({}, deps);
return SLKit;
});
} else {
initLSKit(this, { Group: global.Group });
}
I believe it is always better to inject your dependencies. So I'd inject underscore too when using the global context. Adding dependency resolution logic inside the initLSKit is just noise inside your business logic (Concerns separation FTW).
Without AMD loading, you can also declare it locally to your module like this:
;(function(global, undefined) {
var Fn = Function, GLOBAL = new Fn('return this')();
// Just create it here, it'll be available inside your module
// and won't be reachable from outside the module (private).
var Group = function() {};
// etc...

How to combine prototypes from closed functions?

Having a project where I have speed coded up some core functionality I would like to split it up into modules. My struggle now is how to combine prototypes from one to the next. My idea is something like this:
(function (window) {
/* Code for base module with core functions. */
function CORE () {
}
window.CORE = CORE; /* I use different naming in real code ... */
})(window);
(function (CORE) {
/* Code for module with extending functionality. */
function MODULE1 () {
}
CORE.MODULE1 = MODULE1;
})(window.CORE);
I use an approach for creation as something like:
(function (window) {
var Core = function (options) {
return new Core.prototype.init(options);
}
Core.prototype = {
init : function (options) {
this.a = options.a;
return this;
}
}
Core.prototype.init.prototype = Core.prototype;
Core.prototype.init.prototype.fun1 = function () { }
Core.prototype.init.prototype.fun2 = function () { }
...
window.Core = Core; /* Optionally = Core.init */
})(window);
And then a module like:
(function (Core) {
var Module1 = Core.Module1 = function (options) {
return new Module1.prototype.build(options);
}
Module1.prototype = {
build : function (options) {
this.a = options.a;
return this;
}
}
Module1.prototype.build.prototype = Module1.prototype;
Module1.prototype.build.prototype.fun1 = function () { }
Module1.prototype.build.prototype.fun2 = function () { }
...
Core.Module1 = Module1;
Core.Module1_XO = Module1.prototype.build;
})(window.Core);
Now a print of toString() of Core, Core.Module1 and Core.Module1_XO all yield their respective code. But there is no binding as in:
If I say:
var obj = Core({...}); , OK.
obj.Module1({...}), Fail. Object #<Object> has no method Module1
new obj.Module1_XO({...}), Fail. undefined is not a function
Core.Module1({...}), OK, but looses prototypes from Core.
new Core.Module1_XO({...}), OK, but looses prototypes from Core.
...
One way that seem to work is by updating Core by a bind function as in:
var obj = Core({...});
var mod1 = Core.Module1({...}, obj); <-- pass obj
// In Module1 constructor:
build : function (options, ref) {
this.a = options.a;
ref.bind("Module1", this);
}
// And In Core:
Core.prototype.bind(which, what) {
this[which] = what;
}
Question is how I can update Core with Module without this hack. Why doesn't Core become updated by:
window.Core.Module1 = Module1;
Is it hidden from Core?
I have also tried to bind in outer scope of module as in:
(function (Core) {
/* ... code ... for Mudule1 */
Core.bind("Module1", Module1);
}(window.Core);
But this fails as well. Core does not get updated with methods from Module.
Here is a scramble of a fiddle I have messed with, (Note that the printed text is in reverse (prepended) not appended such as newest on top.). It is not the most tidy code, and It is in midts of edits. (I try new approaches frequently.)

What you're doing right now is problematic for several reasons:
You're adding a module to the constructor (type) and not the objects.
Global state here - everyone gets one Module1.
My suggestion would be using a generic version of the builder pattern (or even a mediator).
Here is what it might look like.
Core = (function Core(){
var modules = [];
return {
setModule : function(name,value){
modules.push({name:name,value:value});
},
build : function(options){
this.a = options.a;
// now let's add all modules
modules.forEach(function(module){
this[module.name] = new module.value();
});
}
};
});
Usage would be something like:
var app = new Core.build({a:"foo"});
app.a;//"foo"
If you want to add a module it'd be something like
function Module1(){
this.name = "Zimbalabim";
}
Core.setModule("Module1",Module1);
var app = new Core.build({a:"Bar"});
app.Module1.name;//"Zimbalabim"
app.a;//"Bar"
Or course, a more generic architecture would allow creating different apps with different architectures (with dependency injection containers probably) but let's not go that far yet :)

How do I create a namespace in JavaScript?

I want to access variables by using
MyNamespace.variable1
that are globally accessible. I believe Drupal does something similar, no?

var MyNamespace = {};
MyNamespace.variable1 = value1;
It's just an object really.

What Drupal does is using the following code:
var Drupal = Drupal || { 'settings': {}, 'behaviors': {}, 'locale': {} };
Drupal.attachBehaviors = function (context, settings) {
context = context || document;
settings = settings || Drupal.settings;
// Execute all of them.
$.each(Drupal.behaviors, function () {
if ($.isFunction(this.attach)) {
this.attach(context, settings);
}
});
};
Drupal.detachBehaviors = function (context, settings, trigger) {
context = context || document;
settings = settings || Drupal.settings;
trigger = trigger || 'unload';
// Execute all of them.
$.each(Drupal.behaviors, function () {
if ($.isFunction(this.detach)) {
this.detach(context, settings, trigger);
}
});
};
// …
Using similar code, you can emulate namespaces using JavaScript.

Also, if you have many JS files that each add a "namespace" or Object into a top level package you can do stuff like this:
ModuleA.js
// if Modules is null, create a new object, else use the currently defined instance
var Modules = Modules || {};
Modules.A = {};
// sample instance variable
Modules.A.instanceVar;
// sample function
Modules.A.myFunc = function(param1, param2) {
// do something
}
ModuleB.js
// if Modules is null, create a new object, else use the currently defined instance
var Modules = Modules || {};
Modules.B = {};
// sample instance variable
Modules.B.instanceVar;
// sample function
Modules.B.myFunc = function(param1, param2) {
// do something
}
Then you can of course just call them as you need them Modules.A.myFunc() or Modules.B.myFunc() or Modules.B.instnaceVar = 20;. So you can encapsulate functions as well as variables.
For my code I like to have a root Object, (i.e ) and then added "classes" (objects) to it so that everything has a nice "package like", "OOP" structure to it.

Just create an object. E.g.:
var MyNamespace = {};
MyNamespace.variable1 = ...