¿Cinco o menos consejos para escribir un buen JavaScript? [cerrado]

JavaScript obviamente se ha vuelto bastante indispensable; Sin embargo, todavía soy nuevo en esto, y he encontrado que es difícil luchar contra la sensación de que parece un desastre y no quiero lidiar con eso en este momento. Estoy mucho más lejos en mi comprensión de otros lenguajes que con JavaScript, porque parece que no puedo manejar este miedo. Tengo la sensación de que, cuando escribo JavaScript, intento pintar un retrato de cachorros Weimaraner.

Por lo general, me ayuda a tener en cuenta un puñado de las directivas más importantes que puedo preguntarme por cada movimiento que hago. (En mi opinión, un puñado es cinco o menos).

¿Puedes enumerar cinco (o menos) preguntas específicas sobre JavaScript que debería preguntarme por cada movimiento que realizo cuando estoy codificando JavaScript? ¿Qué serían ellos?

Actualización: para aclarar, no estoy pidiendo cinco cosas a tener en cuenta al aprender JavaScript; Estoy pidiendo cinco preguntas para hacerme siempre en el futuro, que todos deberían hacer siempre. Preguntas de alto nivel como: "¿Es probable que repita esto en otro lugar?" o "es esta variable / nombre de función lo suficientemente específico (o demasiado específico)" <== excepto que estas preguntas de ejemplo no son peculiares de JavaScript. Estoy buscando directivas que son peculiares de JavaScript.

Voy a responder esto en dos partes. Uno es "Cinco o menos consejos para aprender a escribir un buen JavaScript". El otro es "Cinco o menos consejos para escribir un buen JavaScript".

Aprendizaje:

1. Hacer preguntas
2. Escucha
3. Leer
4. Hacer cosas

Haciendo:

1. Evitar los globales (modularizar)
2. Haga las cosas difíciles fuera de los bucles (selección DOM, declaraciones de funciones, etc.)
3. Aprenda cómo funciona el alcance
4. Aprenda cuándo y cómo usar cierres
5. Aprenda cómo funciona JS orientado a objetos

EDITAR (agregar preguntas para cumplir con el OP):

¿A qué alcance estoy haciendo referencia?

Esto debería ayudar con las fugas globales, los controladores de eventos y cuándo usar cierres.

¿Me estoy repitiendo?

La abstracción y el uso adecuados de las técnicas de OO son importantes. Úsalos sabiamente.

¿Mi código se repite?

Es notablemente fácil encontrarse poniendo el acceso DOM en un bucle o creando funciones (anónimas o no) en un bucle. Tenga en cuenta que esto puede ser cierto para el código que usa setTimeouto setIntervalpara los bucles tradicionales.

¿Esto significa lo que creo que significa?

Los valores de verdad y falsedad en JS pueden ser un poco complicados, especialmente cuando se utilizan comparaciones no estrictas ( ==en lugar de ===). La escritura dinámica, la coerción de tipo y si hace referencia a objetos o literales también pueden ser relevantes.

Primero, sepa cómo funciona la tecnología detrás de esto.

Usted necesita saber esto porque el conocimiento detrás de cómo funciona, porque se va a ejecutar en problemas de red, o bien, como he visto infinidad de veces, la gente del todo faily a la comprensión de lo que del lado del servidor y del lado del cliente que realmente es. Una de las preguntas newb más comunes que veo es "¿Cómo puedo hacer que JS cambie una variable en mi código ASP?"

• ¿Entiendes que ethernet / wifi y TCP / IP tienen una idea general de lo que está sucediendo?
• ¿Cuánto HTTP sabes realmente?
• ¿Realmente obtienes HTML? Claro, es posible que sepa cómo funcionan las etiquetas y cómo anidan las cosas, pero ¿realmente entiende el modo doctype y peculiaridades? ¿Entiende que no debe colocar etiquetas de párrafo alrededor de un elemento de la lista?
• Inventar JavaScript (y explicar que se puede ejecutar en el lado del servidor). ecmascript, livecript, mocascript, jsscript, nodo ...
• Aprenda la API de Windows, aprenda la API DOM y aprenda la API XHR. Si no conoce estas tres cosas, no tiene por qué escribir código para el navegador.

Comprenda que su código es más grande que usted o su situación específica

• Claro, escribiste algo, pero todos pueden verlo. Todo es de código "abierto". Claro, puedes ofuscarlo, minifijarlo, lo que sea ... al final del día, si quiero ver tu código, es trivial para mí derrotar cualquier método que pongas en práctica.
• Debe comprender las diferencias de varios navegadores. Apunte a los más populares, o los que tiene su mercado demográfico. Por ejemplo, ie6 no representará elementos de celda de tabla DOM si agrega Child en lugar de los métodos de API DOM específicamente para tablas. Existen más ejemplos, necesitas aprenderlos.
• Debe comprender cómo escribir código alrededor de todos estos problemas en los navegadores, no en su navegador específico. Aprenderá rápidamente que las cosas que funcionan bien en un navegador son lentas en otro. Tendrás que descubrir cómo funcionan los navegadores y por qué son diferentes.
• Por amor a la barba de Odin, no escriba código que me permita realizar ataques de scripting entre sitios en su código. Si realiza una llamada ajax a un celular y hace algo como cell.innerHTML = "<script>alert("xss")</script>", y aparece un cuadro de alerta, lo ha hecho mal.
• Manténgase alejado de DynamicDrive, w3Schools y sitios web que dan malos consejos. Necesitas encontrar comunidades que den buenos consejos. Aquí en Stack Overflow tenemos las salas de chat de JavaScript y Node.JS, y hacemos nuestro mejor esfuerzo para seguir empujando los límites de lo que es "mejor", mientras que sitios como w3s mantienen datos obsoletos y nunca se molestan con ellos. Debe seguir con los sitios de especificaciones oficiales como el W3C , la red de desarrolladores de Mozilla (MDN). Solicite una revisión por pares de su código. Cuando sienta que está haciendo algo doloroso con su código, cuando esté haciendo mucho cortar + pegar + ajustar con su código, debe acudir inmediatamente a una sala de chat y pedir orientación para escribir un código mejor.
• Cuando buscas orientación, o quieres compartir esa cosa realmente genial que hiciste ... por favor, bastante por favor. Por favor, asegúrese de documentarlo, asegúrese de que sus nombres de variables tengan sentido, asegúrese de que no todo esté en una línea. Necesitas escribir código limpio. Si tiene un montón de basura, no solo ha fallado, nadie que sepa cómo ayudarlo querrá hacerlo. Ayúdanos a ayudarte.
• Desea escribir JavaScript: eso es genial, respeto que no todos admiten JavaScript. Dos razones para esto: 1) Internet más rápido para todos (en lugar de "ajax todas las cosas", lo que lleva a una experiencia más lenta). 2) La web es más accesible para las personas que utilizan navegadores basados ​​en consola, personas que utilizan teléfonos móviles sin script. Lo que intento decir es que su sitio debería degradarse con gracia si alguien no tiene JavaScript y, como mínimo, usar <noscript>etiquetas para alertarlos.
• Debido a la naturaleza prototipo de JavaScript, puede hacer cambios en cómo funciona realmente el lenguaje, lo cual es realmente genial. Verá, JavaScript está evolucionando, nos estamos retirando de "ECMA Script 3", que es la versión anterior de JS, y de "ECMA Script 5" (también conocido como es5). Debido al prototipo, podemos arreglar el lenguaje es3 en el campo para que funcione como es5. Eso significa que, es decir, un navegador de 10 años tiene una función de idioma que salió el año pasado. Usa es5-shims siempre que puedas, son realmente geniales y debes investigarlo.
• El mundo occidental de los niños blancos de habla inglesa no es quien usa Internet. Codifique en consecuencia. Esto significa que necesita comprender la internacionalización y escribir código que se ocupe de una mayor demanda. Hace 10 años había menos de 500 millones de personas en línea, hoy son aproximadamente 2 mil millones, ¿y en otros 10 años? Probablemente, cerca de cada persona en el planeta tendrá acceso a Internet, lo que significa que debe admitir nombres que no se ajustan a la expresión regular de /[a-z ']/i, pero que incluyen acentos en hindi, árabe (este es un problema existente de los desarrolladores miopes), chino , y otros. Comprender los conjuntos de caracteres, Unicode y UTF-8.

Eres un programador, no una fábrica de pasta. Deja de escribir espagueti.

• Nombre sus variables después de las cosas que tienen sentido.
• Documenta tu código. No me importa si estás utilizando JSDoc con tecnología de rhino o si tienes muchos garabatos. Escriba documentación que ayude a la persona que va a usar su código. Escriba documentación para alguien que quiera mejorar o mantener su código. Incluye comentarios útiles. Comentarios como "This fizzes the bizz"o mitad inglés o mitad francés no son útiles. Describe lo que hace una función. Describe secciones complejas de código.
• Descubre cómo limitar la repetición de código. Busque diseño modular o patrones funcionales. Vea lo que puede abstraer. Nunca debes terminar cortando + pegando + ajustando grandes segmentos de código para hacer lo mismo.
• Debe comprender la API DOM. El DOM y los objetos de ventana proporcionan muchas cosas geniales. Esto suena como mucho trabajo, pero eso se debe a que es un acrónimo aterrador. A muchos ninjas de JavaScript les gusta escribir código como <a href="javascript:alert("foo")">. FFS NO HAGA ESO. Espere a que se cargue el documento completo, separe su código JavaScript del documento html. Estas son prácticas básicas de OOP 101, simplemente no alinee su JS o CSS en su documento html, nunca. Averigüe cómo hacerlo correctamente o busque a alguien que sepa cómo mostrarle cómo hacerlo. Nuevamente, haga preguntas.
• el Javascript:foo("buz")es un psudeo protocolo, no es totalmente compatible, y si no lo hace en línea javascript no estaría utilizando en primer lugar. Le prometo desde el fondo de mi corazón que no hay ninguna razón en este mundo o en cualquier parte del universo en la que NECESITA poner su JavaScript dentro de un elemento HTML. Nunca. Entonces no lo hagas. Ya ni siquiera voy a ayudar a las personas que hacen eso, es tan malo.

Descubre cómo escribir código de tal manera que no se rompa todo el tiempo.

• Las variables globales son uno de los mayores problemas. Descubre cómo funciona la programación funcional en JavaScript. Averigua qué es la elevación. Descubre cómo evitar las variables globales.
• Use herramientas de análisis de código estático. Estos lo alertarán de inmediato sobre todos los pequeños "ups" que hizo al escribir su código. ¿Olvidó un punto y coma en alguna parte? Ah, ahí está. ¿Tienes un global en alguna parte? Ah, ahí está. ¿Código que puede arrojar un montón de errores misteriosos cuando intentas ejecutarlo? ¡OH! ¡Allí están! No más jugar y mirar una pila de código durante horas tratando de descubrir algo que es solo un error de sintaxis. (Bueno, casi ninguno, es posible que hayas hecho algo que no puede atrapar, pero en general es increíble).
• Prueba de unidad. No hay razón para no estarlo. Hay toneladas de herramientas de prueba de unidades por ahí. Básicamente, la prueba unitaria es "Aquí está mi función" y "Quiero que salga Y" "Aquí hay algunas entradas de prueba" Y la prueba es "¿Funcionaron todos?" Hay muchos marcos de prueba JS, como el popular QUnit. Haga un recorrido por su motor de búsqueda favorito y vea qué le gusta. Pero úsalos.
• Gestión del control de origen, también conocido como control de versiones. Git es popular, y con buena razón. Así es SVN y algunos otros. Lo que debe dejar de hacer en este instante es editar el código de producción. Debe dejar de cambiar el nombre de los archivos main_backup_20110911.js.bak.1. Pierde cosas, su directorio se desordena, no puede "rebobinar" fácilmente a un punto anterior en el tiempo. No puedes ver lo que está pasando, no puedes hacer parches de código. Entonces, solo comienza a aprender GIT, te tomará una hora y nunca volverás.
• Revisión por pares. Usted no es que bueno, yo tampoco me sale mejor por la petición de evaluar lo más que pueda. Así es como debes hacerlo también.

Escribe JavaScript que la gente ama

• Averigua por qué tu código es lento. Use jspref y cree pruebas.
• Deje de vincular eventos a un elemento DOM, es lento y crea serios problemas de burbujeo de eventos que le harán perder mucho tiempo. Investigue "delegación de eventos" en JavaScript.
• DEJA de usar innerHTML para editar el DOM. Esto vuelve a aprender qué es HTML y aprender qué es el DOM. HTML son datos enviados desde el servidor que el motor de representación de su navegador utiliza para crear un montón de objetos de programación que terminan siendo un Objeto de documento. Cuando usas innerHTML, le estás pidiendo a tu navegador que vuelva a renderizar todo. Afortunadamente, como hace más de 10 años, creamos la API DOM, y le permite "agregar un hijo" o "crear un nodo de texto", sin tener que actualizar todo. innHTML es una desgracia que inventó Microsoft: si lo usa, también pierde todos los privilegios de quejarse de que IE6 es horrible porque está ayudando a que su basura permanezca por siempre. Aprende el DOM.
• Tiene que funcionar donde sea que pueda. Si algo no es compatible, debe degradarse con gracia para que la experiencia no sea mala: no puede simplemente abofetear a sus usuarios y estrellarse.
• Los derechos de autor y la licencia son importantes. No estafas el trabajo duro de otras personas. Si alguien dice "no para reventa", no puede venderlo. No seas un imbécil, o odiaremos tu código por estafar a la gente trabajadora.
• JS es prototipos, no clases. Para de hacer eso. Si no comprende cómo funciona el prototipo, debe hacerlo. Buscalo en Google. JavaScript no está basado en clases, deja de intentar hacer clases, rara vez funciona bien. La gente trata de escribir código clásico en un lenguaje prototipo y lo usa como un caso para "por qué el idioma apesta", podría hacer el mismo caso para que Ruby no pueda soportar el prototipo. Aprende algo nuevo y deja de hacerlo mal.

Concéntrese en lo básico, siempre.

• Estás equivocado, y eso es increíble, porque ahora sabes algo. Nada es peor que alguien que no admitirá estar equivocado y siga golpeando el código malo por la puerta como si fuera un ninja superhéroe de estrella de rock renegado. Solo son tontos. Admite que puedes estar equivocado, admite que puedes estar equivocado, pide ayuda.
• No siempre necesitas jQuery. jQuery crea mucho código lento y ayuda a las personas que no conocen JS a escribir JS. Esto es un problema adicional ya que JS no requiere que sepas que JS escribe JS. Imagínate. Una vez que comprenda algunas de las cosas que mencioné anteriormente, como los eventos de aprendizaje, el DOM, aprender sobre innerHTML, verá por qué jQuery puede ser perjudicial para su código. Se puede usar correctamente en muchos lugares, pero a menudo puedes usar una biblioteca más pequeña o incluso jadear el JavaScript estándar que viene con tu navegador para lograr algo. No necesita jQuery para hacer nada, hace que sea más fácil escribir algún código, lo cual es genial si está aprendiendo, pero necesita comenzar a hacerlo mejor y aprender más: cuando sepa más, descubrirá cómo escriba mejor código en jQuery de todos modos.Echa un vistazo a algunas otras bibliotecas de JavaScript y deja de ser tan cerrado.
• No necesita cortar + pegar + ajustar, hacer código SECO. He mencionado esto antes, pero aquí también es importante. No puede escribir código de calidad si su base de código es una desgracia.
• No abuses de las matrices / diferencias de objetos, aprende a hacer un bucle. Aprenda por qué usa ay por for (;;)qué usa un for( in )bucle. Cuándo usar un bucle while. Deje de anidar IF cuando solo puede usar una caja de interruptor. Los objetos no conservan el orden, así que no los use como una matriz; antigua Opera / FF, antigua MISE, a veces Flash no respetará el orden de sus objetos. Use una matriz si desea mantener un orden de cosas, use un objeto si desea un objeto (algo que no tiene orden de elementos).
• Cómo se pueden utilizar las estructuras de decisión para su ventaja, no agregar complejidad a su código. Deje de anidar IF, descubra cómo funcionan los operadores lógicos booleanos. Descubre cómo funciona la caja del interruptor.
• RTFM. El mejor lugar para aprender sobre un mejor código es leer la especificación real. Lea las especificaciones de RFC en esa parte del código que está tratando de usar. Lea el documento ECMAScript. Lea la especificación W3C DOM. Lea las especificaciones W3C XHTML / HTML / HTML5. Lea las especificaciones, son buenas.

Concéntrese en el juego largo, no en un destello rápido y muera.

• Debes ayudar a la comunidad, debes escribir código que estará disponible por mucho tiempo. Siente pasión por tu código y tu comunidad. Si dejaste mal conocimiento en alguna parte, regresa al infierno y arréglalo. La mala información es realmente difícil de eliminar y se queda para siempre. Haz tu parte. No ayudes a w3schools a empeorar la web.
• No salte de la nada y diga "Oye, tengo una gran idea de cómo usar which", suelte un montón de código que nadie puede usar y desaparece. No contribuiste nada. No use variables como ay chezburger.
• Aprenda a detectar el código incorrecto y el código correcto, búsquelo en su propio código, convierta su código incorrecto en un código correcto.
• Crea algo, aprende algo, enseña algo.
• Ampliar tus horizontes. No puede simplemente escribir JavaScript para siempre: tome un año sabático en otra cosa que le interese, regrese, comparta lo que aprendió y vea si puede encontrar un lugar en la comunidad. Intenta mostrarle al otro mundo qué valor tiene JavaScript también mientras estás ahí fuera.
• Todavía estás equivocado, incluso cuando sabes todo. Use una prueba para estar correcto, no su estado / autoridad. Nunca puede tener razón, pero su prueba siempre es correcta. No te metas en meadas, por difícil que sea evitarlo a veces. O hay pruebas o no las hay. Las llamas no ayudan a nadie.

Para cualquier persona interesada, en realidad he tomado la mayor parte de esto de notas personales en un tutorial que no he escrito en ninguna parte .

1. Lea el Javascript de Douglas Crockford : The Good Parts . Es un buen consejo, pero sinceramente, es el mejor consejo que he escuchado para escribir un buen JavaScript.

2. Relacionado, lea los artículos de Douglas Crockford en Javascript .

alert('This illustrates how JavaScript has first-class functions');
alert('It also illustrates how to use closures.  Try running this code in your browser.');

var funky = function(s) {
    alert("We're getting funky with " + s);
};

var makeFunkyObject = function(funkyFunction) {
    var numberOfTimesAlerted = 0;
    var fn = { };
    fn.alertFunky = function(s) {
        funkyFunction(s);
        numberOfTimesAlerted++;
    }
    fn.getNumberOfTimesAlerted = function() {
        return numberOfTimesAlerted;
    }
    return fn;
}

var funkyObject = makeFunkyObject(funky);

funkyObject.alertFunky('Alice'); // alerts We're getting funky with Alice
funkyObject.alertFunky('Bob'); // alerts We're getting funky with Bob
alert(funkyObject.getNumberOfTimesAlerted()); // alerts 2

alert('Also, be sure to distinguish between learning about JavaScript and learning about the DOM');
alert('The former is awesome; the latter, not so awesome.');

Aquí hay algunas preguntas que deberían ayudarlo a usar JavaScript.

1. ¿Cómo funciona JSON y para qué sirve?

2. ¿Por qué las funciones son objetos en Javascript?

3. ¿Por qué no debería usar eval?

4. ¿Cómo creo eventos en javascript?

5. ¿Cómo presento la función de detección en JavaScript?

Prácticamente cubre la mayoría de las cosas que debes hacer en Javascript.

1. Siempre use punto y coma. Los puntos y comas implícitos (en JS) son una idea horrible, especialmente con algunas de las sintaxis interesantes que flotan en el uso común. También son generalmente requeridos por cualquier minificador JS.
2. Evitar eval () . Esto causa todo tipo de problemas y es una forma muy rápida de ralentizar su aplicación. La mayoría de los usos son en realidad abusos. Cada vez que piense que necesita usar eval(), verifique doble y triple de otra manera; casi siempre hay una manera más limpia y fácil a menos que esté intentando ejecutar una cadena completa de JavaScript.
3. (function() {/* stuff */})()es una buena manera de encapsular un conjunto de código y crear un ámbito local para él. Usar objetos es otra forma, a menudo mejor; los objetos son más análogos a los espacios de nombres en otros idiomas cuando se usan de esta manera. Solo ten cuidado this. A diferencia de la mayoría de los otros idiomas, thisno siempre hace referencia a lo que intuitivamente podría pensar que hace. Recuerde también que, a menos que se especifique lo contrario, todas las variables JS, funciones y otros objetos son globales, incluso en varios .jsarchivos.
4. Encuentra y aprende / usa una buena biblioteca JS. jQuery es uno de los más populares. Esto hará mucho trabajo pesado para usted, incluyendo cosas como la detección de características y abstracción de la manipulación DOM y las múltiples formas en que se han implementado diferentes cosas en diferentes navegadores.
5. Siempre use punto y coma. Seriamente. Obtenga un IDE que le avise cuando los olvide. No quiero sonar desaliñado, pero ha habido algunas veces que se han introducido errores solo por falta de un punto y coma y el navegador no le advertirá sobre esto.

Creo que las clases son una herramienta bastante poderosa para estructurar código. Hay muchas reglas agnósticas de lenguaje sobre cómo diseñar sistemas basados ​​en clases y algunos principios OO se implementan más obviamente cuando se usan clases.
Por lo tanto, le sugiero que eche un vistazo a CoffeeScript .

A partir de ahí, le sugiero que intente recopilar información sobre cómo implementar SOLID , DRY , GRASP , KISS y YAGNI , y lo más importante, cómo abordar situaciones, donde parecen entrar en conflicto (nunca lo hacen, solo su comprensión de ellas o el problema en cuestión sí) Es bastante fácil de encontrar, incluso en stackexchange.

Tenga en cuenta que estos principios se aplican tanto al desarrollo de JavaScript "en bruto". Sin embargo, una gran cantidad de contenido que encontrará en ellos los ilustrará utilizando lenguajes basados ​​en clases y, por lo tanto, podría ser útil para programar en un idioma, donde no hay demasiada sobrecarga involucrada en comprenderlos.
Personalmente, creo que JavaScript es un lenguaje extremadamente poderoso, pero en realidad primero tendrá que comprender profundamente otros idiomas, para apreciar realmente este hecho.

Supongo que está utilizando JavaScript para el desarrollo de la interfaz de usuario del lado del cliente en una aplicación web.

1) ¿Debería ser del lado del cliente o del servidor? Sé que me fui y escribí fragmentos de código serios que realmente merecían estar en el lado del servidor y viceversa. Muchas veces me dirigiré a hacer una llamada AJAX por algo que termina mejor ubicado en el código del Servidor para ser incluido en el camino. Especialmente cosas que son de naturaleza estática pero cambian con bastante regularidad (lista de categorías, por ejemplo).

2) ¿Hay algún complemento que ya lo haga? Yo uso mucho JQuery y la respuesta casi siempre es SÍ. A menudo tomo el código del complemento que alguien ha escrito y lo adapto a mis necesidades (generalmente agregando clases adicionales a las cosas, etc.) pero rara vez necesito comenzar desde cero.

3) ¿Es Javascript el lugar adecuado para esto? Ocasionalmente me sorprenderé agregando un montón de estilo dinámico a algo a través de Javascript cuando tenga mucho más sentido usar CSS inteligente.

4) ¿Debería estar usando una herramienta diferente? Esto es algo con lo que he estado lidiando últimamente. Hay algunas alternativas de javascript como el script de café que se manejan bien en mi pila (Rails 3.1) y he estado considerando si mover o no gran parte de mi código allí.

5) ¿Es este código Javascript un buen código? Javascript es un código como cualquier otro código. ¿Es este código tan bueno como el resto de mi código? ¿Si no, porque no? ¿Es desechable? ¿Soy flojo?