If I want to share some JavaScript function between different files under app/assets/javascript what would be the best way to I organise the directory structure?

Let's say I have shared.js.coffee

sharedFunction = ->
  'Hello '

Now, how can I use it in some other place? Like here, in wele.js.coffee

wele = (name) ->
  sharedFunction() + name

How can I make shared.js.cofee always be loaded first?

I tried to put it in the very beginning of application.js, but it doesn't change anything. Seems shared file loading too long, and wele manages to start executing and notice that sharedFunction is not defined.

If I want to share some JavaScript function between different files under app/assets/javascript what would be the best way to I organise the directory structure?

Let's say I have shared.js.coffee

sharedFunction = ->
  'Hello '

Now, how can I use it in some other place? Like here, in wele.js.coffee

wele = (name) ->
  sharedFunction() + name

How can I make shared.js.cofee always be loaded first?

I tried to put it in the very beginning of application.js, but it doesn't change anything. Seems shared file loading too long, and wele manages to start executing and notice that sharedFunction is not defined.

• javascript
• ruby-on-rails
• coffeescript
• ruby-on-rails-4

4 Answers 4

I do it in this way:

• Ensure you require the file in application.js before anything else, expecially before require_tree
• Export the functions (in my case a class, so it's namespaced)

Example: (Suppose we have application.js and shared.js.coffee at same level)

application.js

//= require ./shared
//= require_tree .

shared.js.coffee

class MyNamespace
  @mySharedFunc: () ->
    doSomething()

root             = exports ? this
root.MyNamespace = MyNamespace

You can now easily access in your other coffeescript files the function by referencing it in this way MyNamespace.mySharedFunc()

P.S.

The misterious thing about exports is explained very well in this stackoverflow question: How do I define global variables in CoffeeScript?

In application.js, load shared first:

//= require shared
//rest of code

and in shared, if its that necessary, make your variable accessible globally:

@sharedFunction = ->
  'Hello '

Notice its a bad practice too have such global variables, at least try to keep them in namespaces.

Basically functions loaded earlier can be used later. But in this case the reason your function not working is very simple: You forget to execute it.

Simply replace

sharedFunction + name

With

sharedFunction() + name

And it's done.

Best would be to only ever include one JS file. You can split it between different assets if your asset pipeline knows how to paste them together, but it is inferior to send different JavaScript to different pages. It seems counterintuitive to send a bigger file, especially for every page, but caching turns this on its head: your JS file should only be loaded once. This also automatically means you will have access to all your functions from any of your pages.