¿Hay un buen patrón jQuery para gestionar la inicialización?

Básicamente quiero hacer algo como esto:¿Hay un buen patrón jQuery para gestionar la inicialización?

$(document).ready(function() { 
    if ($(body).attr("class") === "HomePage") { 
     HomePage.init(); //bind events for home page (Crockford's module pattern) 
    } else if ($(body).attr("class") === "AboutPage") { 
     AboutPage.init(); //bind events for about page 
    } 
});

La razón es por lo que puede minify todo en un archivo js, reduciendo así el número de peticiones http. Esta solución definitivamente no es elegante, ya que necesito agregar otra declaración 'else if' cada vez que agregue páginas nuevas. Podría usar:

$(document).ready(function() { 
    eval($(body).attr("class") + ".init();"); 
});

Pero eval es malo y no conozco las implicaciones de rendimiento con este método.

Fuente

2010-02-19 SystemR

que he estado tratando de darse cuenta de eso también. Hice una pregunta relacionada que podría ayudarlo: http://stackoverflow.com/questions/2135654/componetizing-jquery-functions-calls-best-practices –

En lugar de usar eval ¿por qué no hacer uso de la otra forma de llamar a los objetos de JavaScript []?

Suponiendo que todos los objetos son de alcance mundial, por qué no probar:

$(document).ready(function() { 
    window[$(body).attr("class")].init(); 
});

Fuente

2010-02-19 23:39:31

se podría hacer algo como ..

(function() { 

    var container = { 
     'homePage': function() { 
       // homepage stuff 
     }, 
     'aboutPage': function() { 
     } 
    }, 
    page = $('body').attr('class'); 

    if (page.length && page in container) container[page]() 

})();

Por supuesto, habría que agregar el código para dar cuenta de las múltiples instancias nombre de clase, y cosas por el estilo.

Fuente

2010-02-19 23:32:37

Aquí es un patrón que utilizo en algunos proyectos:

var views = { 
    'home': function() { 
     // do stuff on homePage 
    }, 
    'about': function() { 
     // some about action 
    } 
} 

var c = document.body.className.split(" "); 
for (var i=0; c[i]; i++) { 
    if (c[i] in views) { 
     views[c[i]].call(this); 
    } 
} 

<body class="home"> <!-- home method will be called --> 
<body class="home about"> <!-- home and about methods will be called -->

Fuente

2010-02-19 23:32:40 David

¿Por qué no pones el código de la página de inicio en el archivo de página de inicio, y el código de la página Acerca de en el relacionado con la página archivo ? En otras palabras, ¿por qué quieres poner todo tu código de JavaScript en el mismo archivo? No veo ninguna razón para eso.

Fuente

2010-02-19 23:35:59

"La razón es que puedo minificar todo en un archivo js, lo que reduce la cantidad de solicitudes http ". – David

La página en sí debe enviarse de todos modos, por lo que no generará una solicitud HTTP adicional ya que el código de JavaScript se enviará junto con el código HTML. Mire la fuente de la página de inicio de google.com, por ejemplo –

¿Hay un buen patrón jQuery para gestionar la inicialización?

Respuesta

Cuestiones relacionadas