JavaScript Codice Organizzazione Suggerimenti/Code Review

Question

1. Sto lavorando su un sito di grandi dimensioni che ha un sacco di costume (Pagina js specifiche). C'è un file main.js e page-specific.js. C'è un approccio migliore che può usare il seguente schema?

2. Come è possibile ridimensionare più metodi che utilizzano ajax?

3. Attualmente assegnare tutti gli eventi onclick linea come onclick = "MYSITE.message.send ... -? Esso c'è un modo migliore Creazione di più $. (" Tasto # ") clicca (function() {}); sembra come più lavoro ...

   var MYSITE = MYSITE ? MYSITE: {}; 
   var MYSITE { 
   bookmark: { 
       add: function(contentId, userId) { 
        var data = { 
         contentId: contentId, 
         userId: userId 
        }; 
        $.ajax({ 
         url: "/rest/bookmarks/", 
         type: "post", 
         data: data, 
         complete: function(response) { 
          if (response.error) { 
           alert(response.error); 
          } else { 
           alert("success"); 
          } 
         } 
        }); 
       } 
   }, 
   message: { 
       /* <a onclick="MYSITE.message.send('1234', '1234');" href="javascript:void(0);">BOOKMARK</a> */ 
       send: function(contentId, userId) { 
        var data = { 
         contentId: contentId, 
         userId: userId 
        }; 
        $.ajax({ 
         url: "/rest/bookmarks/", 
         type: "post", 
         data: data, 
         complete: function(response) { 
          if (response.error) { 
           alert(response.error); 
          } else { 
           alert("success"); 
          } 
         } 
        }); 
       } 
   } 
   

   }

Answer 1

In primo luogo, l'assegnazione di onclick="" direttamente è cattiva pratica usando il metodo di jQuery click() non è t. ha molto più lavoro, ma anche se lo fosse, è più pulito e molto più consigliato. Mantiene il tuo markup HTML separato dalla tua funzionalità JS e rende più facile cambiare le cose in seguito. Questa è la prima cosa che devi refactoring.

Quello che faccio con il mio JS è creare un file JS della libreria principale con tutte le mie classi/funzionalità di base. Quindi utilizzo tag in linea <script> su pagine specifiche per chiamare il metodo che collega i collegamenti alle funzioni.

Nel file app.js globale, avrò una funzione:

function initLinksOnPageX() { 
    $('#button').click(function() { MYSITE.message.send('1234', '1234'); }); 
    /* ... setup any other events ... */ 
} 

Nel corpo della pagina:

<script type="text/javascript"> 
    $(initLinksOnPageX); 
</script> 

Ancora una volta, questo mantiene il vostro markup chiaro di qualsiasi codice JS, quindi gli aggiornamenti relativi a JS si verificano in un file (o meno). Con questa configurazione non è strettamente necessario avere file JS specifici per pagina, anche se parlando in senso organizzativo potrebbe avere senso ... Non so esattamente quanto sia grande il tuo JS.

Answer 2

È possibile utilizzare il metodo jQuery delegato se avete div elemento con un tag

 
<div id="bookmarks"> 
<a href="#">BOOKMARK</a> 
</div> 

$("div#bookmarks").delegate("a", "click", function(){ 
    MYSITE.message.send('1234', '1234'); 
}); 

e si può ottenere 'ContentID' e 'ID utente' in modo dinamico.

Answer 3

I miei pensieri:

1. Questo dipende da molti fattori, ma se il codice pagina specifica è "grande", allora è probabilmente meglio per tenerlo separato. Se, tuttavia, si tratta solo di poche righe e non stiamo parlando di migliaia di pagine, la possibilità di raggruppare tutto in main.js potrebbe non essere un grosso problema.

2. Non ho molta familiarità con ajax, quindi passerò a commentare come "refactoring".

3. Se è possibile eseguire il looping del proprio incarico degli eventi onclick, NON eseguirli in linea significa risparmiare molto lavoro.

Answer 4

Prenderei in considerazione il wrapping della mia funzionalità personalizzata come un plug-in jQuery.