Require.js and reusable UI functions

Question

I'm working on a project written using Require.js. There are a number of reused functions that are currently being called from the global scope. These functions involve ui transitions, hide/show, and general on hover events. I want to organize these functions right into require, but not quite sure where/how to include them.

For example let's say in the app there are multiple spots that may call a common function of showDropdown(). And let's say it requires jQuery for the animation. Where or how would be the best place to store the showDropdown function?

Say a simple function like:

function showDropdown(id) {
    var thisdropdown = $(id).find('.dropdown');
    $(thisdropdown).slideDown();
}

I could create a UI folder, with the different js functions all being their own file. Then simply require them on any other files that are dependent on them. But regardless, those files will need to export their function to the global scope to be accessible correct?

I feel there is an obvious answer/setup as this must be fairly common item.

_{In addition, I am writing this in a backbone app, but I don't believe that has any direct impact, more of a require.js question.}

glortho · Accepted Answer · 2013-09-13 21:22:53Z

3

Create a util library or something like that:

// util.js

define({
    showDropdown: function(id) {
        var thisdropdown = $(id).find('.dropdown');
        thisdropdown.slideDown();
    }    
});

Then use it elsewhere:

require(['util'], function(util) {

    util.showDropdown('my-id');

});

answered Sep 13, 2013 at 21:22

glortho

13.2k8 gold badges51 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sir.Nathan Stassen Over a year ago

Brilliant, thanks. I knew it must be straight forward. Naturally in addition you would be able to define dependencies define(['jquery'],{ just like I'm needing.

Collectives™ on Stack Overflow

Require.js and reusable UI functions

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related