Organización de Código JavaScript / JQuery

Question

Me gustaría recibir algunos consejos sobre cómo estructurar mis funciones de código JavaScript y JQUERY.Me gusta usar jquery para el manejo de eventos DOM y Ajax, etc. He escrito lo que parece un código deficiente en el pasado, donde todo mi archivo JS consiste en un montón de funciones de jQuery anónimas.

Me pregunto: ¿cómo se ve un archivo JavaScript "bien estructurado" cuando se combina con jQuery?¿Habrá muchas funciones estándar de JavaScript y luego algunas funciones de JQUERY GENRACODICETGODETE PULT IN cuando sea necesario?¿Está bien tratar el código de forma puramente procesal o sería mejor usar algunos conceptos de OOP?Siempre he tenido un montón de funciones que se llaman entre sí jerárquicamente con las funciones de Helper aquí y allá y no hay objetos (aparte de los utilizados cuando se usa una biblioteca aleatoria de terceros).

No soy un programador JavaScript (principalmente Java), por lo que cualquier consejo de los desarrolladores de JS con experiencia sería genial.

Answer 1

Honestamente, trato de aplicar conceptos de MVC a JQERY.Una vez que supere más de 500 líneas, no lo hace, solo hace que sea difícil mantenerse al día con las cosas.

modelo

• Cualquier datos en caché localmente
• cookies
• lectura-de / escribir-al servidor (AJAX)

Ver

• básicamente todas sus cosas DHTML (Generación de HTML / Manipulación, CAMBIOS CSS, Animaciones / Efectos, etc.)

controlador

• manejo de eventos (ambos eventos de usuario y eventos personalizados)

Hay incluso algunos proyectos por ahí para esto.

Answer 2

Sugiero la estructura orientada a objetos, no solo, porque el concepto es el estado de la técnica, Pero también para obtener información general por la que debe encapsular funciones que se pertenezcan entre sí.

Si tiene un archivo JS grande (debe tener solo uno, por motivo de rendimiento), no encuentra nada después de algunas semanas si no estructura su código por funcionalidad.

Answer 3

Si se mete en la cama con jQuery, entonces mi sugerencia sería conseguir todo el camino en la cama. Eso significa escribir su propio código de complemento de jQuery cuando sea apropiado, lo que sería cuando encuentre su auto deseando escribir una función que realice un objeto jQuery como un parámetro.

Porque la naturaleza del código de JavaScript para páginas web es tal que esencialmente todo sucede en los bucles de eventos, las rutinas más son bastante pequeñas. Probablemente el trozos de trabajo más grande es el código que inicializa todos los manipuladores. Cuando está juntando un sitio web de una aplicación, con muchas páginas, tiene la opción de hacer:

• Deja que cada página sea su propio copo de nieve especial, con su propio javascript para sus propios comportamientos

o

• recopilar y estandarizar los comportamientos para todas sus páginas en un solo mecanismo global

He vivido a través de ambos, y la segunda forma es definitivamente mejor, pero tiene sus propios problemas. Debe permanecer en la parte superior de las cosas y asegurarse de que los casos especiales no resulten en el sangrado de código en sus fuentes HTML (o JSP). Alguien tiene que lidiar con las cuestiones de rendimiento del código de script global del sitio que intenta aplicarse a cada página. Y, por supuesto, comienza a crecer una función de inicialización monstruosa.

Lo que me ahorra desde el infierno de mantenimiento en algo así es un paso de compilación que combina archivos de script separados (una por página ", más o menos, más complementos de jquery personalizados) en un solo script monolítico para implementar en realidad al servidor. . Lo hice con Freemarker, pero hay muchas otras formas de hacerlo. Un buen subproducto de tener un paso de este tipo es que es un buen momento para ejecutar yuicompressor.

Answer 4

I have to second Peter Bailey's answer in that it's best to keep your M V and C separate. I found the best style for GUI widgets was to create a function which initialized the widget (creating HTML, adding style, or attaching animation events), then attaching custom event handlers for the different places where it is used.

Custom events are key for reusable widgets. It make code less brittle to DOM changes in your GUI widget and makes your code more readable.

For example, let's say you have a custom button which dynamically creates an HTML structure like so:

<div class="MyButton"><div class="button-helpful-wrapper"><img src="/blah.png"/></div></div>

Let's say your initialization code adds some fades or whatever using click events. It doesn't matter.

The interesting bit is when you want to use this button; to which div do you attach the 'click' event to? instead of having to know the structure of your GUI widget, it would be better to simply create a new type of event for the widget. Like so:

$('#MyButton_Instance1').bind('myclick', function () {...} );

And be completely agnostic about the structure of the widget.

To make this work all you have to do is add some binds/triggers which proxy the actual event to your custom event. The best place to put this is in your widget initialization code:

$('.MyButton').myButton();

Where

myButton = function () {
    $(this).find('.button-helpful-wrapper').bind('click', function (event) {
        $(this).trigger('myclick', event);
    });
}

This makes your widgets very reusable because you're not attaching to specific DOM element events but rather a generic widget event. Try it.

Answer 5

Firstly, you can use a Object Style Approach, Methods over Functions

Example

var User = {
    loggedin : false,
    name : "Robert PItt",
    id : 45
}

And you can create a System Item within js file like so

if(typeof System == undefined)
{
    System = new Object();
}

System.Globals = 
{
   //Some Global Settings,uri's etc in here
}

System.Gui = {
   Init : function()
   {
      if(User.loggedin == true)
      {
          this.RemoveItem("#userlogin");
      }
   },
   RemoveItem: function(form)
   {
       $(form).remove();
   }
}

System.Gui.init(); //Within head maybe/

As you can see you can create several "containers" to hold your methods within, containers can be helpful to organise your code and separate it at the same time, you can create along side the GUI things such as Ajax,Tools,Security,Callbacks and so on.