Academic query on the scripting approach taken (javascripts)
Hi Sean
I've noticed that the scripting mostly uses var = function and init approach.
Because I'm self-taught from years back, I've never used this approach. So I've been researching it online.
The var function approach seems to result in single use functions, whereas calling a function fname(params){} allows for more flexibility in multi-purposing the script.
I'm finding that I'm repurposing some of your scripts into a function fname(){} form instead of keeping the approach you have used, and weighing up if this is a bad idea or not.
> Could you explain why you've gone with the approach of var x = function() as opposed to function fname(){}?
(eg. Is there a core engine script that I haven't noticed in the src folders and these var functions are api into those?)
Cheers
Replies (7)
ohhhhh that's actually pretty freaking cool now that I understand.
There are definitely some functions I'd like to make (or keep) global, especially as I'm finessing some of your scripts to be dynamic. For example, I'm using uri location to update the page and variables to ensure I only need 1 version of the dataTable API for all my tables, instead of 10 copies of table function for 10 different tables.
Nice nice nice.. noice.
Best if you keep these scripts global so I can pick and choose, easy to convert later, and helps with test-break-learning on your black box.
Thanks 
Yea . You are right. If we can help with anything else please let us know.
Your Support Matters!
Hi Sean - just revisiting this issue before I start to re-structure more code.
Apologies in advance if the confusion is my lack of knowledge..
Can you please clarify, with your approach of using globally accessible Var Functions, is it possible to parse elementIds to the Var Functions to apply the functions in multiple instances via an API / other method.
To illustrate, an example: the Metronic "Datatable Var Function" located in "custom\apps\user-management\users\list\table.js"
var KTUsersList = function ( ) {
var initUserTable = function () { /*some stuff*/ }
/*some stuff*/
}
KTUtil.onDOMContentLoaded(function () {
KTUsersList.init();
});For this type of Var Function, if I want to re-apply it multiple times on the same page but parsing different DOM elementIds and calling separate instances, it appears in Metronic Demo that KeenThemes approach has been to copy paste the same script multiple times. (eg. user-management\roles\view\view.js, user-management\permissions\list.js, custom\apps\inbox\listing.js, etc)
Am I misunderstanding that there's no way to re-use the Metronic Var Function multiple times? are there any API methods like that I'm not seeing...
eg. "new KTUsersList()"?, or "new KTUsersList().targetTableId"?
I suspect not, so I've re-jigged the VarFunction to a regular function to take vars on callback eg. function KTUsersList(a, b, c){}.
Just need a sanity check.. Thanks heaps.
Hi,
You can use the following approach:
var KTUsersList = function ( ) {
var initUserTable = function () { /*some stuff*/ }
/*some stuff*/
}
var Instance1 = KTUsersList;
var Instance2 = KTUsersList;
KTUtil.onDOMContentLoaded(function () {
const element1 = document.querySelector("#some_id");
const element2 = document.querySelector("#some_id_2");
Instance1.init(element1);
Instance2.init(element2);
});I hope that helps.
Regards.
Hi Sean! you freakin legend of an epic legend! That's just what I was looking for!! :-D
Sorry I wasn't able to figure this out myself, but I've not used Var Functions and generally I'd try learn new techniques from dissecting other people's work.
Was wondering maybe... if .. you could use this re-usable approach in your future releases instead of copy-paste? Although I understand why you might not do this to minimise effort on KT side of things - but wondering if you could also reduce the codebase using this approach?
Many thanks!!
Hi ,
Glad that it worked for you.
Sure thing, we will consider your suggestion in a future update.
Have a great weekend!
Regards.
Hi,
This is to make sure that all functions are globally accessible.
We will be rewriting our core components with ES6 standards and we will revise this as well.
At the moment we keep it simple and make all functions in the global scope.
Regards.
