Where to put Helper Functions

Aqueum · August 10, 2019, 3:02pm

Hi, where is the best place to put helper functions in Hype?

I’d love to keep them in the Resource Library, but when I ‘Add JavaScript Function’ there, I can’t seem to add parameters in addition to the required ‘hypeDocument, element, event’.

In the attached, Arithmetic.hype.zip (19.6 KB) a simple helper function in the Head HTML returns the value of an input or its placeholder if nothing has been input.

Is putting helper functions in the Head HTML best practice?

MaxZieb · August 10, 2019, 6:47pm

You can put them into the global window scope or into the local hypeDocument scope.

window.myFunction = function(a,b){return a+b;}

or

hypeDocument.myFunction = function(a,b){return a+b;}

Aqueum · August 10, 2019, 10:22pm

Thanks @MaxZieb, not knowing where I should put these, I tried creating a function called helperFunctions() in the Resources library and used your hypeDocument.myFunction to define the helper function that was working in the Head HTML within that. That didn't work so I tried then calling helperFunctions() 'On Scene Load', but it still doesn't seem to work - see attached Arithmetic.hype.zip (19.5 KB) .

Where should I enter these through the Hype interface?

MaxZieb · August 10, 2019, 10:38pm

Hope this helps to make things clearer…

Arithmetic_MaxV1.hype.zip (22,3 KB)

Hope the document answers that question…

About the why…

Javascript is all about scope… specially the modern versions. So being able to compartmentalize your code is key. Putting stuff into a global scope is one way to go but has the risk of interfering with other things on a multifaceted page environment. Defining things in the hypeDocument scope limits the added functions to the scope of that specific hype widget instance and gives you access to the hypeDocument API. Also it is passed into every Hype function scope you create in the app so you get a handle to trigger it.