¿Cuál es una buena manera de refactorizar un número creciente de funciones javascript/jquery?

Question

Estoy trabajando en un proyecto en el que estamos haciendo una gran cantidad de JavaScript personalizados y especialmente jquery, en un proyecto de estilo mvc.

El único problema es que sigo añadiendo más y más globales funciones/variables y están acumulando. Tengo algunos archivos pero no estoy seguro de cómo dividir algunas de las cosas en archivos separados.

He pensado componer algunas de estas funciones y variables globales en objetos, pero la sintaxis del objeto en javascript me parece un poco incómoda (debido a la ausencia de clases clásicas). Aunque si tuviera un buen ejemplo a seguir tal vez podría dar la vuelta.

¿Cómo lidiar con un proyecto en el que las funciones y variables globales javascript empiezan a acumular así?

Answer 1

Una forma muy sencilla a acumular un montón de variables globales y funciones en un único objeto global:

// Awful pile of globally-scoped names 
var foo = 1 
var bar = 2 
function go = function(){ 
    console.log('Yeehaw!'); 
} 


// Instead, just dump everything into a global-level object 
var MyApp = { 
    foo: 1, 
    bar: 2, 
    go: function(){ 
     console.log('Yeehaw!'); 
    } 
} 

// Now access stuff like this 
console.log(MyApp.foo); 
console.log(MyApp.bar); 
MyApp.go(); 

Para las variables y funciones "simple" de alto nivel, puedo recomendar este. Hay muchas mejoras que se pueden hacer a esto, pero probablemente caerán dentro de la categoría de optimizaciones prematuras; este es un gran primer paso.

Answer 2

Se podía separarlos de manera similar a lo que hace ... jquery.ui por categorías o por la acción de control/

ejemplo:

effects.blind.js
effects.bounce.js
ui.accordion.js

¿pueden ser divididas en los controles que tienen que ver con?

O por lo que hacen?

sólo algunas sugerencias ...

Answer 3

Los Crockford vídeos en YUI teatro son un buen ejemplo de cómo configurar espacios de nombres de JavaScript entre otras cosas.

Answer 4

Si está trabajando con jQuery, la primera forma de organizar el código es construir jQuery plugins:

http://docs.jquery.com/Plugins/Authoring

http://www.learningjquery.com/2007/10/a-plugin-development-pattern

Como usted ha mencionado MVC, hay varias implementaciones de JavaScript por ahí , pero no estoy seguro de que sean muy populares: jamal, javascript mvc,

http://jamal-mvc.com

http://javascriptmvc.com