event listeners in browserify modules

[gnoe93]

Ik heb een PHP/jquery project waarbij ik het jquery gedeelte aan het refactoren ben. Wat eerst een soep was in een gigantisch bestand, heb in ondertussen onderverdeeld in CommonJS modules met Browserify. Een groot deel van deze modules bevatten event listeners die vrijwel direct bij het laden van de pagina beschikbaar moeten zijn. Sommige van deze modules bevatten ook functies die exported worden zodat andere modules ze kunnen gebruiken.

Het probleem bij de modules met beiden event listeners en exports, is dat ik niet weet in mijn mail.js bestand of deze reeds ergens anders required zijn:

code:

// --------------------------------------------------
// module.js
// --------------------------------------------------

'use strict';

$(document).on('click', '#some-button', function(event) {
    // handle event
});

function someFunction() {
    // some code
}

module.exports = {
    someFunction: someFunction
};

// --------------------------------------------------
// other-module.js
// --------------------------------------------------

'use strict';

var module = require('./module.js');

module.someFunction();

// --------------------------------------------------
// main.js
// --------------------------------------------------

var otherModule = require('./other-module.js');

// Ik weet niet in mail.js of "module.js" reeds ergens anders required is.
// var module = require('./module.js'); ?

Ik zou natuurlijk ook gewoon in mail.js alle modules kunnen requiren om dit probleem te vermijden maar dit is extra overhead aangezien de module mogelijks meerdere keren required wordt.

[NMe]

Lijkt een beetje een inherent probleem te zijn van Browserify, zie het accepted answer hier, en dan met name de update: https://stackoverflow.com...on-multiple-require-calls

[ Voor 6% gewijzigd door NMe op 04-08-2017 17:38 ]

[gnoe93]

NMe schreef op vrijdag 4 augustus 2017 @ 17:36:
Lijkt een beetje een inherent probleem te zijn van Browserify, zie het accepted answer hier, en dan met name de update: https://stackoverflow.com...on-multiple-require-calls

Ik heb even wat tests uitgevoerd en blijkbaar worden de event listeners slechts éénmaal registered (zoals het hoort). De stackoverflow post die je vermeldt spreekt ook over caching, maar er wordt ook gezegd dat hier uitzonderingen op zijn (ken je misschien een bron die hier meer over zegt?).

Los van het bovenstaande probleem, blijft dit nog steeds een "structureel probleem"; het werkt wel, maar de event listeners die samen met de module functies onder één bestand zitten zorgen er voor dat ik in main.js niet direct weet welke modules ik expliciet moet includen omdat ik niet op het eerste zicht weet welke modules event listeners bevatten en of deze reeds required zijn in andere modules.

Een mogelijks oplossing lijkt me de module functionaliteit en de event listeners in aparte modules onder te brengen: "module.js" en "module.event-listeners.js" bijvoorbeeld. "module.event-listeners.js" required dan "module.js" en "main.js" required dan "module.event-listeners.js".

Ik heb al wat zitten rondkijken op github hoe anderen het doen, maar ik kom voornamelijk angular/react projecten tegen. Ik krijg bijna het idee dat browserify amper gebruikt wordt bij php/jquery projecten, of misschien gaan zij op een andere (betere) manier te werk waar ik niet van af weet?

Update:

Ik bedenk me juist nog een betere methode: misschien alle event listeners in een functie steken en die dan oproepen met een bindEvents() functie per module?

[ Voor 17% gewijzigd door gnoe93 op 05-08-2017 19:06 ]