Cómo organizar las funciones de JS en varios archivos

Question

Viniendo de un fondo OOP clásico, recientemente comencé a aprender más sobre JavaScript. Sin embargo, hay una cosa que no puedo entender:

En los lenguajes OOP clásicos generalmente crea un archivo separado para cada clase, ya que eso hace que sea más fácil mantener su código. JS no tiene clases reales, y hasta donde yo sé, tampoco hay una manera directa de incluir otro archivo JS a partir de un archivo. Sin embargo, cuando trabajas con un equipo en un gran proyecto JS, probablemente quieras dividir el proyecto en varios archivos. ¿Cómo se hace esto? ¿Qué pones en esos archivos y cómo los haces cargar correctamente?

Answer 1

Me encanta su pregunta. Escribo mi JavaScript muy orientado a objetos y mantengo mis constructores de objetos en sus propios archivos. Lanzo todos mis archivos .js a un directorio que puedo organizar en subdirectorios como quiera. Luego ejecuto un script "make". El siguiente es un script Bash que escribí. Trabajo en una máquina Linux, por lo que Bash scripting es una solución natural para cualquiera que trabaje en Linux.

#!/bin/bash 

echo '' > temp0.js 
find ./bin/external -name \*.js -exec cat {} >> temp0.js \; 

echo ''> temp1.js 
echo '(function(){' > temp1.js 
find ./bin/prop -name \*.js -exec cat {} >> temp1.js \; 
echo '})();' >> temp1.js 

cat temp0.js temp1.js > script.js 
rm temp1.js temp0.js 

Perdóname si este script de bash es aficionado. Admitiré fácilmente en scripts de bash que pirateé lo que funcione, pero me gusta que mi JavaScript sea limpio y organizado y orientado a objetos.

Este script bash entra en un directorio junto con un directorio llamado "bin" que contiene todos los archivos javascript .js. Allí, el subdirectorio "externo" contiene varios scripts prestados como JQuery. Estoy colocando mis propios scripts .js en una carpeta llamada "prop" en el ejemplo anterior. El script bash obtiene todos estos scripts y los concatena. También envuelve mis propios archivos prop en una función anónima para darles un espacio de nombres privado (sortof).

Supongo que está claro que esto no es exactamente lo que quería, Java, pero creo que este tipo de opción es lo que tenemos que hacer con JavaScript.

Answer 2

Puede agrupar los archivos en cualquier método lógico que desee. Normalmente se realiza por función: este archivo anima el logotipo, este archivo realiza la función de presentación de diapositivas de la página principal, este archivo maneja los menús desplegables de la barra de navegación. Me imagino que normalmente dividirías a tu equipo en una organización similar, donde cada persona es responsable de una característica en particular. Más allá de eso, la administración de control de fuente funciona igual que cualquier otro proyecto, donde los usuarios tienen que verificar o confirmar el código mientras trabajan en él.

Answer 3

El prototipo de JavaScripts es muy OOP y puede descomponer el código en tantos archivos como desee. Hay algunas formas diferentes de cargar dependencias, RequireJS siendo una de las más populares.

Answer 4

Tendrá que segmentar el código de cualquier forma que tenga sentido para su proyecto.

En cuanto a cómo incluir los scripts, es más difícil. La forma más sencilla es simplemente incluir múltiples archivos JavaScript, ya sea de forma secuencial llamada desde el HTML (<script src="..."></script><script src="..."></script>) o con un gestor de dependencia o script de carga como Yepnope o RequireJS ..

Sin embargo, si desea incluir sólo una secuencia de comandos desde su HTML, puede concatenar los archivos (utilizando un script de compilación con Ant o algo similar) o hackear Javascript para incluir otros scripts como se describe aquí: How do I include a JavaScript file in another JavaScript file?