How to avoid large "script.js" file, organizing js/jquery code (requirejs)

Question

I always end with huge "script.js" or "main.js" file in my project with one document.ready function and always feel bad about it, but dont know how to organize js/jquery code well on my own. Im familiar with concepts of modules but again dont know how to do it.

So for example, im working on project where i have a many resources(e.g. organisations, users, etc). I will do my best to show minimum of code of what i need to do with every resource:

function deleteResource(url, $that) {
    $.ajax({
        url: url,
        type: "DELETE"
    }).done(function() {
        $that.closest('tr').remove();
    });
}

function emptyHelper(element) {
    if(typeof element === "undefined")
        return "/";

    return element;
}

function createHtml(data) {
    var $that = $('.organisations-table tbody');
    $that.find("tr").remove();

    for(var i=0; i<data.length; i++) {
        var element = "<tr>";
        element += "<td>" + emptyHelper(data[i].telephone) + "</td>";   
        element += "<td><a href='#' class='delete-organisation' data-id=" + data[i].organisationId + "></a></td>" 

        element += "</tr>";
        $that.append(element);
    }
}

$("tbody").on('click', 'a.delete-organisation', function() {
    deleteResource(/*some_url_for_deleting_resource */, $(this));
});

$('#organisation-search').submit(function(event) {
    event.preventDefault();

    $.ajax({
        url: $(this).attr("action"),
        type: "GET",
        data: $(this).serialize()
    }).done(function(data) {
        createHtml(data);
    });
});

Now imagine that i need to do similar things with 10 resources and to put that code in the same script, how to fight against that, how to encapsulate and organize this example in modules code well?

EDIT 1: After doing some research i can guess that i need to go with requirejs (multipage), like: https://github.com/requirejs/example-multipage. So basically for every resource (organisations, users, blabla1, blabla2, etc) i need to have main.js file? Can someone provide example-basic concept of code, how to do this using requirejs?

Mike Thomsen · Accepted Answer · 2014-02-25 12:04:39Z

1

Without requirejs or something similar, you'd have to implement your own module system. What I use when not using requirejs is proper namespacing and then Maven plugins to manually merge all of the JS in the right order. That's more or less how you have to do it when not using requirejs or a competitor.

answered Feb 25, 2014 at 12:04

Mike Thomsen

37.7k11 gold badges63 silver badges86 bronze badges

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

1 Comment

Srle Over a year ago

Can you please provide example-basic concept of code, how to do this using requirejs (using my example)?

Tiberiu C. · Accepted Answer · 2014-02-25 12:08:33Z

0

This is done in two steps

you have to split your big script in smaller pieces.
then use a third party or you're custom implementation to load those files into your html.

require.js is a good one otherwise you may use the plain old <script>, would work just fine.

answered Feb 25, 2014 at 12:08

Tiberiu C.

3,5231 gold badge34 silver badges41 bronze badges

Collectives™ on Stack Overflow

How to avoid large "script.js" file, organizing js/jquery code (requirejs)

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related