2
\$\begingroup\$

I'm working on a small custom backend app in PHP for personal use (and practice MVC) and I thought it was a nice opportunity to try (and learn) requirejs to 'organize' my scripts and load just what the page needs.

I wrote some lines just to test its functionality, and works pretty well... but I've been wondering if this is a correct approach. Keep in mind I'm completely new to it.

Step by step, this is what I've done so far...

main.js: just basic settings

requirejs.config({
    'baseUrl': url + 'js',
    'paths': {
        'custom': 'custom/back',
        'jquery': 'libs/jquery-2.1.3.min',
        'jquery-ui': 'libs/jquery-ui.min'
    }
});

require(['custom/app'], function(app) {
    app.start();
});

app.js: the app 'starts' and checks if there're forms in the page. If so, it requires form related scripts

define(['jquery'], function() {
    var start = function(){
        //check if there're forms and if so, requires form related scripts
        if($("form").length>0){
            require(['custom/forms/forms'], function() {});
        }

        //do something else...
    };
    return {
        start: start
    };
});

forms.js: Here, I load common scripts for all forms (for example, inline validation) and specific scripts for certain fields...

define([], function() {
    //it requires a script that contains regex and validation stuff
    require(['custom/forms/validations'], function() {validations});
    //if there's a 'special input' field (just an example) it requires some script to bind stuff
    if($(".special-input").length>0){
        require(['custom/forms/special-input'], function(specialInput) {
            specialInput.bind();
        });
    }
});

special-input.js: This file bind actions for those 'special' fields and loads jquery UI to use, in this case, the draggable features... I also wrote some internal methods that doesn't export

define(['jquery-ui'], function() {
    var inputs= $(".special-input");
    //bind function: binds interactive elements
    var bind = function(){
        inputs.draggable();
        someFunctionOne(input);
    };

    var someFunctionOne= function(elem){
        //do something...
    };

    var someFunctionTwo= function(elem){
        //do something...
    };



    return {
        bind: bind
    };
});

This works OK so far, but is this approach (module separation) a good idea? I can see this helps to keep my js scripts small and well organized, but maybe I'm missing something, or not taking full advantage of requirejs' features.

\$\endgroup\$

closed as off-topic by Sᴀᴍ Onᴇᴌᴀ, vnp, Ludisposed, IEatBagels, Mast Feb 8 at 17:52

This question appears to be off-topic. The users who voted to close gave this specific reason:

  • "Lacks concrete context: Code Review requires concrete code from a project, with sufficient context for reviewers to understand how that code is used. Pseudocode, stub code, hypothetical code, obfuscated code, and generic best practices are outside the scope of this site." – Sᴀᴍ Onᴇᴌᴀ, vnp, Ludisposed, IEatBagels, Mast
If this question can be reworded to fit the rules in the help center, please edit the question.

  • \$\begingroup\$ I'm voting to close this as off-topic because the code in special-input.js appears to have stub code and an undefined variable input... \$\endgroup\$ – Sᴀᴍ Onᴇᴌᴀ Feb 7 at 20:34