Aggiungere funzionalità nella pagina importando solo il file JS

[Nunkij]

Salve a tutti,
sto cercando di scrivere degli script che possano essere inseriti nelle pagine semplicemente inserendo il tag dello script nell'head senza dover fare altro.
Il problema è che quando vado a gestire il metodo addEventListener dell'oggeto windows mi viene sovrascritto e ciò fa sì che solo le funzioni contenute nell'ultimo file vengano caricate onload.

In ogni file ho il seguente codice:

if    (window.addEventListener){
    window.addEventListener('load',validateFormFieldsManager,false);
}else{
    window.attachEvent('onload',validateFormFieldsManager);
}

ovviamente validateFormFieldsManager varia da file a file a seconda della funzione da eseguire.

Ho letto online che il metodo addEventListener consente di inserire varie funzioni legate all'oggetto in modo indipendente. Ho due domande:

1. Perché con window non funziona? Sbaglio qualcosa?
2. Se window (come ho letto ma non sono sicuro sia vero) ne supporta uno solo come si può fare?

Ovviamente so che basta aggiungere una funzione "wrap" dove inserire tutte quelle da eseguire onload e mettere questa nel metodo addEventListener ma ciò mi costringerebbe a intervenire nella pagina ed è proprio ciò che vorrei evitare.
Mi sapete dare una mano?

Grazie a chi mi risponderà

[KillerWorm]

Ciao, credo che tu non stia considerando alcuni concetti basilari.

Partiamo dal fatto che i vari listener vengono applicati regolarmente per l'evento load dell'oggetto window. Il problema è che stai applicando la stessa identica funzione.

ovviamente validateFormFieldsManager varia da file a file a seconda della funzione da eseguire.

Questo non può essere. Anche se hai una funzione su diversi file, questa sarà sempre definita a livello globale (a meno di particolari accorgimenti). Il fatto che tu stia usando sempre lo stesso nome crea un conflitto. Infatti di volta in volta, all'inclusione di ogni file, la funzione di turno andrà a sovrascrivere la precedente, proprio perché ha lo stesso nome.

Il listener su addEventListener, riferito alla funzione validateFormFieldsManager sarà pertanto eseguito una sola volta. L'analogo metodo attachEvent funzionerà in modo simile eseguendo comunque la stessa funzione, anche se più volte, cioè tante volte quante la funzione stessa è applicata.

Il problema è quindi il modo scorretto di definire le varie funzioni usando lo stesso nome; perché queste, essendo definite a livello globale, si sovrascrivono man mano.

Ovviamente so che basta aggiungere una funzione "wrap" dove inserire tutte quelle da eseguire onload e mettere questa nel metodo addEventListener ma ciò mi costringerebbe a intervenire nella pagina ed è proprio ciò che vorrei evitare.

Potresti inserire il "wrap" sempre in un file esterno e includerlo quindi nella pagina come tutti gli altri file. Ma, in qualunque caso, questo non risolve il problema di conflitto delle funzioni con lo stesso nome.

Una soluzione, usata generalmente per lo sviluppo di plugin, è quella di racchiudere tutto lo script del file esterno in una funzione auto-eseguibile (cosiddetta IIFE, nel caso fai qualche ricerca se ti interessa approfondire).

Per ogni file dovrai avere una situazione del genere:

;(function(){
  if(window.addEventListener) window.addEventListener('load',validateFormFieldsManager,false);
  else window.attachEvent('onload',validateFormFieldsManager);
  function validateFormFieldsManager(){
    // qui la tua funzione
  }
  // qui tutto il resto che ti pare
})();

A questo punto ogni file può contenere qualsiasi variabile e funzione anche se già dichiarata con lo stesso nome su altri file, perché queste saranno visibili solo nello scope locale della IIFE e non in quello globale, evitando quindi possibili conflitti.

Chiaramente questa è solo una traccia, poi sta a te vedere come meglio organizzare il tutto. Se, ad esempio, vuoi che delle variabili siano comunque viste a livello globale allora dovrai definirle fuori dalla IIFE.