Código de JavaScript Sugerencias de organización/Revisión de código

Question

1. Estoy trabajando en un sitio grande que tiene mucha costumbre (página específica js). Hay un archivo main.js y page-specific.js. ¿Hay un mejor enfoque que pueda usar el siguiente patrón?

2. ¿Cómo puedo volver a factorizar varios métodos que usan ajax?

3. Actualmente asigno todos los eventos onclick en línea tales como onclick = "MYSITE.message.send ... - que hay una mejor manera la creación de múltiples $. (" # Botón "), haga clic en (function() {}); parece como más trabajo ...

   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

En primer lugar, la asignación directa onclick="" es una mala práctica utilizando el método de jQuery click() no es t. Lleva mucho más trabajo, pero incluso si lo fuera, es más limpio y mucho más recomendado. Mantiene su marcado HTML separado de su funcionalidad JS y hace que sea más fácil cambiar las cosas más adelante. Esa es la primera cosa que debes refactorizar.

Lo que hago con mi JS es crear un archivo JS de biblioteca principal con todas mis clases/funcionalidad principal. Luego uso las etiquetas en línea <script> en páginas específicas para llamar al método que conecta los enlaces a las funciones.

En el archivo app.js mundial, voy a tener una función:

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

En el cuerpo de la página:

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

Una vez más, esto mantiene su margen de beneficio claro de cualquier código JS, para que las actualizaciones relacionadas con JS sucedan en un archivo (o menos). Con esta configuración, no debería necesitar estrictamente archivos JS específicos de la página, aunque desde el punto de vista organizativo podría tener sentido. No sé exactamente cuán grande es su JS.

Answer 2

Puede utilizar el método jQuery delegado si tiene div elemento con un tag

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

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

y se puede obtener 'contentId' y 'ID de usuario' de forma dinámica.

Answer 3

Mis pensamientos:

1. Esto depende de muchos factores, pero si el código de la página específica es "grande", entonces es probablemente el mejor para mantenerlo separado. Sin embargo, si solo se trata de unas líneas, y no estamos hablando de miles de páginas, entonces podemos agruparlo todo en main.js puede no ser un gran problema.

2. No estoy muy familiarizado con ajax, así que voy a dejar de comentar cómo "refactorizar".

3. Si puede buclear su asignación de los eventos onclick, NO hacerlos en línea le ahorrará mucho trabajo.

Answer 4

me gustaría considerar envolver mi funcionalidad personalizada como un plugin de jQuery.