¿Por qué encuentro Javascript/jQuery tan difícil de hacer bien?

8 minutos de lectura

avatar de usuario
JMan

Mi experiencia es en C y he aprendido PHP, mySQL, HTML, CSS sin demasiados problemas.

Pero estoy encontrando Javascript/jQuery sorprendentemente difícil de hacer bien. Muy frustrante. ¿Por qué?

  1. Parece violar una serie de principios de programación tradicionales (por ejemplo, alcance variable)

  2. Las variables indefinidas parecen aparecer de la nada y ya tienen valores asociados con ellas. Por ejemplo (de los documentos de jQuery):

    $("a").click(function(event) {
        event.preventDefault();
        $('<div/>')
              .append('default ' + event.type + ' prevented')
              .appendTo('#log');
    });
    

    ¿Qué es exactamente “evento”? ¿Tengo que usar este nombre de variable? ¿Debo suponer que este objeto se instancia mágicamente con las cosas correctas y puedo usar cualquiera de los métodos de la lista en el API de JQuery?

  3. Parece que hay un montón de reglas aleatorias (por ejemplo, devolver falso para detener una acción predeterminada, pero a veces esto no funciona?)

  4. Comportamiento no determinista al depurar. (por ejemplo, actualizo el navegador, intento algo y obtengo el resultado X para las variables JS que estoy viendo en Firebug. ¿Actualizo nuevamente y obtengo el resultado Y?)

  5. Código de aspecto muy desordenado que es difícil de seguir. ¿Que pasa cuando? Uso Firebug y Chrome Developer Tools, pero no obtengo suficiente visibilidad.

Parece que todos los días aparece una “regla” aleatoria de JS que nunca antes había visto en ninguno de mis libros o tutoriales de JS.

¿Qué debo hacer para que Javascript/jQuery sea más determinista, controlado y lógico para mí?

¿Hay algún recurso que explique las peculiaridades/trampas de Javascript?

¡Gracias!

  • Sí, JS es una amante voluble. Pero olvidaste “6) No funciona igual en todas las plataformas de navegador”.

    – iandisme

    3 de agosto de 2010 a las 15:46

  • Olvidaste los puntos y comas “opcionales” 🙂

    –Nick Craver

    3 de agosto de 2010 a las 15:47

  • Ejemplos de #2, #4 y #5 por favor. Cuidado con el Crockford.

    – Annakata

    3 de agosto de 2010 a las 15:47

  • Puede escribir código desordenado con cualquier lenguaje de programación. Es culpa del programador, no del lenguaje.

    – Félix Kling

    3 de agosto de 2010 a las 16:07

  • @Felix ¿Alguna vez has usado JavaScript? Es un serio desafío escribir código que no sea desordenado en JavaScript. es el idioma

    –Jeff Davis

    4 de agosto de 2010 a las 21:01

avatar de usuario
BalusC

1) Parece violar una serie de principios de programación tradicionales (por ejemplo, alcance variable)

Necesitas declarar variables usando varde lo contrario entrará en el ámbito global.

2) Las variables indefinidas parecen aparecer de la nada y ya tienen valores asociados (¿cómo sucedió esto?)

Esto posiblemente esté relacionado con 1) y/o 4).

3) Parece que hay un montón de reglas aleatorias (p. ej., devuelve falso para detener una acción predeterminada, pero ¿a veces esto no funciona?)

También debe permitir que el controlador devuelva falso. P.ej form onsubmit="return functionname()". También debe regresar desde la función “principal”, no solo desde un cierre (una función dentro de una función), refiriéndose a su pregunta anterior. Solo volvería a la función “principal” y continuaría.

4) Comportamiento no determinista al depurar. (por ejemplo, actualizo el navegador, intento algo y obtengo el resultado X para las variables JS que estoy viendo en Firebug. ¿Actualizo nuevamente y obtengo el resultado Y?)

Probablemente el código se ejecutó antes de que el HTML DOM terminara de llenarse. Tienes que engancharte window.onload o $(document).ready() cada vez que desee ejecutar cosas durante la carga de la página.

5) Código de aspecto muy desordenado que es difícil de seguir. ¿Que pasa cuando? Uso Firebug y Chrome Developer Tools, pero no obtengo suficiente visibilidad.

¿Apuesto a que estás hablando de la fuente jQuery? Es solo una gran biblioteca. Después de todo, no debe preocuparse por esto durante la depuración. Más bien preocúpese por su propio código. Sin embargo, asegúrese de estar viendo la versión no minimizada del código fuente de jQuery.


Ver también:

  • JavaScript: las partes malas
  • Lo que todo programador de JavaScript debe saber

  • En 1). todavía tiene el “problema” del alcance del bloque (o no)

    – Annakata

    3 de agosto de 2010 a las 15:59

douglas crockford“Javascript: The Good Parts” de ‘s fue un recurso invaluable. Javascript se parece mucho más a Lua, Lisp o Python que a C, simplemente se parece a C.

Enlace proporcionado a Amazon; Cogí el mío de O’Reilly.

  • Ese enlace de Amazon, “rads.stackoverflow.com/amzn/click/0596517742”. ¿Qué estás haciendo ahí?

    – Media Luna Fresca

    3 de agosto de 2010 a las 16:24

  • @Crescent Creo que SO convierte automáticamente los enlaces de Amazon a su referencia. código. Bien por ellos.

    – JAL

    3 de agosto de 2010 a las 17:50

  • The Good Parts es una excelente referencia lingüística, una gran recomendación. No cubre los navegadores, solo el lenguaje principal.

    – JAL

    3 de agosto de 2010 a las 17:51

avatar de usuario
TCCV

Para ser honesto, creo que tienes un buen entendimiento. Algunos de mis complejos eran similares. La forma en que me he estado moviendo es “bueno, si es así, entonces es así”. Solo acepta las idiosincrasias y sigue adelante. PHP hace algunas de las mismas cosas (las variables pueden aparecer de la nada, etc.). Simplemente codifique de la manera que desee codificar y, si funciona, ¡genial!

Luego, después de llegar a ese punto, comience a desglosar el generador de perfiles y vea si hay algo que pueda optimizar.

Aquí hay un par de cosas:

Si entiende CSS, entonces los selectores de jQuery deberían ser fáciles. En lo que respecta al código, también es sencillo si puede lidiar con encadenamiento y JSON. EDITAR: también, el documentación de jQuery en todo es EXCELENTE! Y no hay escasez de expertos en jQuery aquí en SO para ayudarnos a los novatos (y con suerte podemos devolverles el favor a los novatos más nuevos).

Hay un margen para trabajar. (Básicamente) cualquier cosa escrita fuera de una función u objeto está en el ámbito global. Si está dentro de un objeto o función y usa var entonces eso establece el alcance de la variable

Javascript no es como un lenguaje basado en C (incluso C++ o PHP). Utiliza prototipos para tratar con las relaciones clase/objeto en lugar de un esquema de subclases.

Lo n.º 1 que me hizo dudar es que cualquier JS que aparezca en cualquier parte de la página o que se haya incluido en <script> las etiquetas son un juego justo. Si tiene una variable global en un script, puede usar esa misma variable en un script completamente diferente y funcionará. Eso puede ser lo que quiere decir acerca de las variables que aparecen de la nada. Además, hay algunas variables basadas en DOM que también pueden “aparecer”.

De todos modos, creo que si sigues adelante, obtendrás algunos momentos “AHA”. Soy relativamente novato en programación, pero crezco continuamente mientras no cuelgue en algo que no tenga demasiado impacto en hacer que el código se ejecute.

avatar de usuario
meder omuraliev

  1. Es un lenguaje basado en la herencia prototípica y está influenciado por los lenguajes de programación funcional y el paradigma, por lo que no es completamente solo OO/Procedural como otros lenguajes. Las variables son globales implícitas a menos que se declaren con var.

  2. Por favor incluya un ejemplo?

  3. return false sale de la función como con la declaración de retorno de cualquier idioma. preventDefault() sería el método DOM para cancelar el comportamiento predeterminado de un enlace

  4. Javascript se usa principalmente en el lado del cliente. Dado que hay muchos agentes de usuario, cada uno de ellos tiene una implementación diferente del DOM, que es muy inconsistente, más que el propio JS. Nuevamente, incluya un ejemplo real para obtener una respuesta definitiva.

  5. Encontrará un código de apariencia desordenada en cualquier idioma, y ​​tal vez su falta de comprensión perciba el código como desordenado, cuando en realidad no es tan malo. O tal vez estás viendo algún código minimizado/ofuscado.

yo recomiendo http://eloquentjavascript.net/ para aprender aspectos de Javascript.

Cosas que aprenderá del enlace de arriba

  • lambdas
  • cierres
  • herencia prototípica
  • Programación basada en eventos
  • depuración
  • DOM

“JavaScript: The Good Parts” de Douglas Crockford es un buen comienzo

En tu caso, los apéndices (“las partes malas” y “las partes horribles”) podrían ser los más interesantes 🙂

avatar de usuario
puntilla

de Crockford”Javascript: las partes buenas” brinda algunos patrones comunes de JS que ayudan con la privatización y el alcance de variables. Esto es para javascript en general. Para jQuery solo uso la API. También los videos de Yui Theatre en javascript son bastante buenos

avatar de usuario
ken struys

Javascript puede ser un poco complicado y algunos de sus aspectos funcionales confunden a la gente. Si realmente aprendes y entiendes el idioma, lo encontrarás realmente útil, la mayoría de las personas simplemente comienzan a usarlo al azar y luego simplemente lo odian.

Lea javascript las partes buenas de crockford, es realmente útil: http://javascript.crockford.com/

También asegúrese de entender cierre. Es un elemento fundamental que la gente no entiende pero que a menudo usa.

¿Ha sido útil esta solución?