So, the point here is: If we are going to use that approach, you should group the functions in a different .js with a clear reference of which .html file it depends on. The global variables would be declared in that .html file.

Passing the values as parameters would be simpler and that way it would not be necessary to do the former option.

e.g.
<script>my_javascript_function("{{ my_template_variable_value }}")</script>

I would probably prefer the second unless there is a strong point to do the former.