7 cosas de JavaScript que desearía saber mucho antes en mi carrera

 

 

 

  • SmashingConf New York 2024
  • SmashingConf New York 2024

  • Índice
    1. Notaciones abreviadas
    2. JSON como formato de datos
    3. Funciones nativas de JavaScript (matemáticas, matrices y cadenas)
    4. Delegación de Eventos
    5. Funciones anónimas y el patrón del módulo
    6. Permitir la configuración
    7. Interactuando con el back-end
    8. El código específico del navegador es una pérdida de tiempo. ¡Usa bibliotecas!
    9. Recursos
      1. Artículos Relacionados

    ¿Sientes que estás perdiendo el tiempo aprendiendo los entresijos de todos los navegadores y solucionando sus problemas? Bueno, Chris también lo hizo. Hacer esto en aquel entonces aseguró su carrera y le aseguró que tuviera un gran trabajo. Pero ya no deberíamos tener que pasar más por esta prueba de fuego.

     

    He estado escribiendo código JavaScript durante mucho más tiempo del que puedo recordar. Estoy muy entusiasmado con el reciente éxito del idioma; Es bueno ser parte de esa historia de éxito. He escrito decenas de artículos, capítulos de libros y un libro completo sobre el tema y, sin embargo, sigo encontrando cosas nuevas. Éstos son algunos de los "¡ajá!" momentos que he tenido en el pasado, que puedes probar en lugar de esperar a que te lleguen por casualidad.

    Notaciones abreviadas

    Una de las cosas que más me gustan de JavaScript ahora son las notaciones de acceso directo para generar objetos y matrices. Entonces, en el pasado, cuando queríamos crear un objeto, escribíamos:

    var car = new Object();car.colour = 'red';car.wheels = 4;car.hubcaps = 'spinning';car.age = 4;

    Lo mismo se puede lograr con:

    var car = { colour:'red', wheels:4, hubcaps:'spinning', age:4}

    Es mucho más corto y no es necesario repetir el nombre del objeto. Ahora mismo carestá bien, pero ¿qué pasa cuando lo usas invalidUserInSession? El principal problema en esta notación es IE. Nunca dejes una coma al final antes de la llave de cierre o tendrás problemas.

    La otra notación abreviada útil es para matrices. La forma de la vieja escuela de definir matrices era la siguiente:

     

    var moviesThatNeedBetterWriters = new Array( 'Transformers','Transformers2','Avatar','Indiana Jones 4');

    La versión más corta de esto es:

    var moviesThatNeedBetterWriters = [ 'Transformers','Transformers2','Avatar','Indiana Jones 4'];

    La otra cosa acerca de las matrices es que no existen las matrices asociativas. Encontrará muchos ejemplos de código que definen el carejemplo anterior de esta manera:

    var car = new Array();car['colour'] = 'red';car['wheels'] = 4;car['hubcaps'] = 'spinning';car['age'] = 4;

    Esto no es Esparta; Esto es una locura, no te molestes con esto. "Matrices asociativas" es un nombre confuso para los objetos.

    Otra notación abreviada muy interesante es la notación ternaria para condiciones. Entonces, en lugar de lo siguiente…

    var direction;if(x 200){ direction = 1;} else { direction = -1;}

    … Podrías escribir una versión más corta usando la notación ternaria:

    var direction = x 200 ? 1 : -1;

    El truecaso de la condición está después del signo de interrogación y el otro caso sigue a los dos puntos.

    JSON como formato de datos

    Antes de descubrir JSON para almacenar datos, hice todo tipo de locuras para poner contenido en un formato listo para JavaScript: matrices, cadenas con caracteres de control para dividir y otras abominaciones. La creación de JSON por Douglas Crockford cambió todo eso. Con JSON, puede almacenar datos complejos en un formato nativo de JavaScript y que no necesita ninguna conversión adicional para su uso inmediato.

    JSON es la abreviatura de "Notación de objetos JavaScript" y utiliza los dos atajos que cubrimos anteriormente.

    Entonces, si quisiera describir una banda, por ejemplo, podría hacer lo siguiente:

    var band = { "name":"The Red Hot Chili Peppers", "members":[ { "name":"Anthony Kiedis", "role":"lead vocals" }, { "name":"Michael 'Flea' Balzary", "role":"bass guitar, trumpet, backing vocals" }, { "name":"Chad Smith", "role":"drums,percussion" }, { "name":"John Frusciante", "role":"Lead Guitar" } ], "year":"2009"}

    Puede usar JSON directamente en JavaScript y, cuando se incluye en una llamada de función, incluso como formato de retorno de API. Esto se llama JSON-P y es compatible con muchas API que existen. Puede utilizar un punto final de datos y devolver JSON-P directamente en un nodo de secuencia de comandos:

     

    div/divscriptfunction delicious(o){ var out = 'ul'; for(var i=0;io.length;i++){ out += 'lia href="' + o[i].u + '"' + o[i].d + '/a/li'; } out += '/ul'; document.getElementById('delicious').innerHTML = out;}/scriptscript src="https://feeds.delicious.com/v2/json/codepo8/javascript?count=15callback=delicious"/script

    Esto llama al servicio Delicious Web para obtener mis últimos marcadores de JavaScript en formato JSON y luego los muestra como una lista desordenada.

    En esencia, JSON es probablemente la forma más ligera de describir datos complejos y se ejecuta en un navegador. Incluso puedes usarlo en PHP usando la json_decode()función.

    Funciones nativas de JavaScript (matemáticas, matrices y cadenas)

    Una cosa que me sorprendió es lo mucho más fácil que se volvió mi vida una vez que leí detenidamente las funciones matemáticas y de cadena de JavaScript. Puede usarlos para evitar muchos bucles y condiciones. Por ejemplo, cuando tenía la tarea de encontrar el número más grande en una matriz de números, solía escribir un bucle, así:

    var numbers = [3,342,23,22,124];var max = 0;for(var i=0;inumbers.length;i++){ if(numbers[i] max){ max = numbers[i]; }}alert(max);

    Esto se puede lograr sin un bucle:

    var numbers = [3,342,23,22,124];numbers.sort(function(a,b){return b - a});alert(numbers[0]);

    Tenga en cuenta que no puede utilizarlo sort()en una matriz numérica porque ordena léxicamente. Hay un buen tutorial aquí sort()en caso de que necesites saber más.

    Otro método interesante es Math.max(). Éste devuelve el número más grande de una lista de parámetros:

    Math.max(12,123,3,2,433,4); // returns 433

    Debido a que esto prueba los números y devuelve el más grande, puede usarlo para probar la compatibilidad del navegador con ciertas propiedades:

    var scrollTop= Math.max( doc.documentElement.scrollTop, doc.body.scrollTop);

    Esto soluciona un problema de Internet Explorer. Puede leer el scrollTopdel documento actual, pero dependiendo del DOCTYPEdocumento, se asigna el valor a una u otra propiedad. Cuando usas Math.max()obtienes el número correcto porque solo una de las propiedades devuelve uno; el otro será undefined. Puede leer más sobre cómo acortar JavaScript con funciones matemáticas aquí .

    Otras funciones muy poderosas para manipular cadenas son split()y join(). Probablemente el ejemplo más poderoso de esto sea escribir una función para adjuntar clases CSS a elementos.

    La cuestión es que, cuando agregas una clase a un elemento DOM, deseas agregarla como la primera clase o a clases ya existentes con un espacio delante. Cuando elimina clases, también necesita eliminar los espacios (lo cual era mucho más importante en el pasado cuando algunos navegadores no aplicaban clases con espacios finales).

     

    Entonces, la función original sería algo como:

    function addclass(elm,newclass){ var c = elm.className; elm.className = (c === ’) ? newclass : c+' '+newclass;}

    Puedes automatizar esto usando los métodos split()y join():

    function addclass(elm,newclass){ var classes = elm.className.split(' '); classes.push(newclass); elm.className = classes.join(' ');}

    Esto garantiza automáticamente que las clases estén separadas por espacios y que la suya se agregue al final.

    Delegación de Eventos

    Los eventos hacen que las aplicaciones web funcionen. Me encantan los eventos, especialmente los eventos personalizados, que hacen que sus productos sean extensibles sin necesidad de tocar el código central. El principal problema (y en realidad uno de sus puntos fuertes) es que los eventos se eliminan del HTML: se aplica un detector de eventos a un determinado elemento y luego se activa. Sin embargo, nada en el HTML indica que este sea el caso. Tome este problema de abstracción (que es difícil de entender para los principiantes) y el hecho de que los "navegadores" como IE6 tienen todo tipo de problemas de memoria y se les aplican demasiados eventos, y verá que no usar demasiados controladores de eventos en un documento es una buena idea.

    Aquí es donde entra en juego la delegación de eventos . Cuando ocurre un evento en un determinado elemento y en todos los elementos superiores a él en la jerarquía DOM, puede simplificar el manejo de eventos usando un único controlador en un elemento principal, en lugar de usar muchos manejadores. ¿QUÉ SARTÉN COMPRAR? Comparativa, precios y análisis de LAS MEJORES SARTENES

    ¿Qué quiero decir con eso? Supongamos que desea una lista de enlaces y desea llamar a una función en lugar de cargar los enlaces. El HTML sería:

    h2Great Web resources/h2ul lia href="https://opera.com/wsc"Opera Web Standards Curriculum/a/li lia href="https://sitepoint.com"Sitepoint/a/li lia href="https://alistapart.com"A List Apart/a/li lia href="https://yuiblog.com"YUI Blog/a/li lia href="https://blameitonthevoices.com"Blame it on the voices/a/li lia href="https://oddlyspecific.com"Oddly specific/a/li/ul

    La forma normal de aplicar controladores de eventos aquí sería recorrer los enlaces:

    // Classic event handling example(function(){ var resources = document.getElementById('resources'); var links = resources.getElementsByTagName('a'); var all = links.length; for(var i=0;iall;i++){ // Attach a listener to each link links[i].addEventListener('click',handler,false); }; function handler(e){ var x = e.target; // Get the link that was clicked alert(x); e.preventDefault(); };})();

    Esto también se podría hacer con un único controlador de eventos:

    (function(){ var resources = document.getElementById('resources'); resources.addEventListener('click',handler,false); function handler(e){ var x = e.target; // get the link tha if(x.nodeName.toLowerCase() === 'a'){ alert('Event delegation:' + x); e.preventDefault(); } };})();

    Debido a que el clic ocurre en todos los elementos de la lista, todo lo que necesita hacer es compararlo nodeNamecon el elemento correcto que desea que reaccione al evento.

     

    Descargo de responsabilidad: si bien los dos ejemplos de eventos anteriores funcionan en navegadores, fallan en IE6. Para IE6, es necesario aplicar un modelo de eventos distinto al del W3C, y es por eso que utilizamos bibliotecas para estos trucos.

    Los beneficios de este enfoque son más que simplemente poder utilizar un único controlador de eventos. Digamos, por ejemplo, que desea agregar más enlaces dinámicamente a esta lista. Con la delegación de eventos, no es necesario cambiar nada; con un manejo de eventos simple, tendría que reasignar controladores y volver a repetir la lista.

    Funciones anónimas y el patrón del módulo

    Una de las cosas más molestas de JavaScript es que no tiene margen para variables. Cualquier variable, función, matriz u objeto que usted defina y que no esté dentro de otra función es global, lo que significa que otros scripts en la misma página pueden acceder a ellos (y normalmente los anularán).

    La solución es encapsular sus variables en una función anónima y llamar a esa función inmediatamente después de definirla. Por ejemplo, la siguiente definición daría como resultado tres variables globales y dos funciones globales:

    var name = 'Chris';var age = '34';var status = 'single';function createMember(){ // [...]}function getMemberDetails(){ // [...]}

    Cualquier otro script en la página que tenga una variable nombrada statuspodría causar problemas. Si envolvemos todo esto en un nombre como myApplication, entonces solucionamos ese problema:

    var myApplication = function(){ var name = 'Chris'; var age = '34'; var status = 'single'; function createMember(){ // [...] } function getMemberDetails(){ // [...] }}();

    Esto, sin embargo, no hace nada fuera de esa función. Si esto es lo que necesitas, entonces genial. También puedes descartar el nombre entonces:

    (function(){ var name = 'Chris'; var age = '34'; var status = 'single'; function createMember(){ // [...] } function getMemberDetails(){ // [...] }})();

    Si necesita que algunas de las cosas sean accesibles desde el exterior, entonces debe cambiar esto. Para alcanzar createMember()o getMemberDetails(), debes devolverlos al mundo exterior para convertirlos en propiedades de myApplication:

    var myApplication = function(){ var name = 'Chris'; var age = '34'; var status = 'single'; return{ createMember:function(){ // [...] }, getMemberDetails:function(){ // [...] } }}();// myApplication.createMember() and // myApplication.getMemberDetails() now works.

    Esto se llama patrón de módulo o singleton. Douglas Crockford lo mencionó mucho y se usa mucho en la biblioteca de interfaz de usuario YUI de Yahoo . Lo que me molesta de esto es que necesito cambiar de sintaxis para que funciones o variables estén disponibles para el mundo exterior. Además, si quiero llamar a un método desde otro, tengo que llamarlo precedido del myApplicationnombre. Entonces, prefiero simplemente devolver punteros a los elementos que quiero hacer públicos. Esto incluso me permite acortar los nombres para uso externo:

    var myApplication = function(){ var name = 'Chris'; var age = '34'; var status = 'single'; function createMember(){ // [...] } function getMemberDetails(){ // [...] } return{ create:createMember, get:getMemberDetails }}();//myApplication.get() and myApplication.create() now work.

    He llamado a esto " patrón de módulo revelador ".

     

    Permitir la configuración

    Cada vez que escribí JavaScript y se lo di al mundo, la gente lo cambió, normalmente cuando querían que hiciera cosas que no podía hacer de forma inmediata, pero también a menudo porque hacía demasiado difícil que la gente cambiara. cosas.

    La solución es agregar objetos de configuración a sus scripts. He escrito detalladamente sobre los objetos de configuración de JavaScript , pero aquí está lo esencial:

    • Tenga un objeto como parte de todo su script llamado configuration.
    • En él, almacene todas las cosas que las personas probablemente cambiarán cuando usen su script:
      • ID de CSS y nombres de clases;
      • Cadenas (como etiquetas) para botones generados;
      • Valores como “número de imágenes que se muestran”, “dimensiones del mapa”;
      • Configuración de ubicación, configuración regional e idioma.
    • Devuelve el objeto como propiedad pública para que la gente pueda anularlo.

    La mayoría de las veces puedes hacer esto como último paso en el proceso de codificación. He reunido un ejemplo en " Cinco cosas que hacer con un script antes de entregárselo al siguiente desarrollador ".

    En esencia, desea facilitar que las personas utilicen su código y lo modifiquen según sus necesidades. Si hace eso, es mucho menos probable que reciba correos electrónicos confusos de personas que se quejan de sus scripts y se refieren a cambios que alguien más realmente hizo.

    Interactuando con el back-end

    Una de las principales cosas que aprendí durante todos mis años con JavaScript es que es un gran lenguaje para crear interfaces interactivas, pero cuando se trata de hacer números y acceder a fuentes de datos, puede resultar abrumador.

    Originalmente, aprendí JavaScript para reemplazar a Perl porque estaba harto de copiar cosas en una cgi-bincarpeta para que funcionara. Más tarde, aprendí que hacer que un lenguaje de back-end se encargue de procesar los datos principales por mí, en lugar de intentar hacerlo todo en JavaScript, tiene más sentido con respecto a la seguridad y el lenguaje.

    Si accedo a un servicio web, podría obtener JSON-P como formato devuelto y realizar una gran cantidad de conversión de datos en el cliente, pero ¿por qué debería hacerlo cuando tengo un servidor que tiene una forma más rica de convertir datos y que puede devolver el datos como JSON o HTML... y almacenarlos en caché para que pueda arrancar?

    Por lo tanto, si desea utilizar AJAX, aprenda sobre HTTP y cómo escribir su propio proxy de conversión y almacenamiento en caché. Ahorrarás mucho tiempo y nervios a largo plazo.

    El código específico del navegador es una pérdida de tiempo. ¡Usa bibliotecas!

    Cuando comencé con el desarrollo web, la batalla entre el uso document.ally el uso document.layerscomo forma principal de acceder al documento todavía estaba en pleno apogeo. Elegí document.layersporque me gustaba la idea de que cualquier capa fuera su propio documento (y había escrito document.writesoluciones más que suficientes para toda la vida). El modelo de capas falló, pero también document.all. Cuando Netscape 6 hizo todo lo posible para soportar sólo el modelo DOM W3C, me encantó, pero a los usuarios finales no les importó. Los usuarios finales acaban de ver que este navegador no mostraba correctamente la mayoría de los sitios de Internet (aunque lo hacía); el código que produjimos era el que estaba mal. Creamos un código miope que admitía un entorno de última generación, y lo curioso de este estado de la técnica es que cambia constantemente.

     

    He perdido bastante tiempo aprendiendo los entresijos de todos los navegadores y solucionando sus problemas. Hacer esto en aquel entonces aseguró mi carrera y aseguró que tuviera un gran trabajo. Pero ya no deberíamos tener que pasar más por esta prueba de fuego.

    Bibliotecas como YUI, jQuery y Dojo están aquí para ayudarnos con esto. Se ocupan de los problemas de los navegadores abstrayendo los dolores de una implementación deficiente, las inconsistencias y los errores totales, y nos liberan de la tarea. A menos que desee realizar una prueba beta de un determinado navegador porque es un gran admirador, no solucione los problemas del navegador en sus soluciones de JavaScript, porque es poco probable que alguna vez actualice el código para eliminar esta solución. Todo lo que estaría haciendo es aumentar la ya enorme pila de código obsoleto en la Web.

    Dicho esto, depender únicamente de las bibliotecas para su habilidad principal es miope. Lea sobre JavaScript, mire algunos buenos videos y tutoriales y comprenda el idioma. (Consejo: los cierres son un regalo de Dios para el desarrollador de JavaScript). Las bibliotecas le ayudarán a crear cosas rápidamente, pero si asigna muchos eventos y efectos y necesita agregar una clase a cada elemento HTML del documento, entonces lo está haciendo. equivocado.

    Recursos

    Además de los recursos mencionados en este artículo, consulte también lo siguiente para obtener más información sobre JavaScript:

    • Douglas Crockford sobre JavaScript
      Una serie de conferencias en vídeo detalladas.

    Artículos Relacionados

    Quizás te interesen los siguientes posts relacionados:

    • Los siete pecados capitales de la implementación de JavaScript
    • Desarrollo de sitios con AJAX: desafíos de diseño y problemas comunes
    • 45 poderosas técnicas de CSS/JavaScript

    (un poco)Explora más en

    • Codificación
    • javascript
    • Carrera





    Tal vez te puede interesar:

    1. ¿Deberían abrirse los enlaces en ventanas nuevas?
    2. 24 excelentes tutoriales de AJAX
    3. 70 técnicas nuevas y útiles de AJAX y JavaScript
    4. Más de 45 excelentes recursos y repositorios de fragmentos de código

    7 cosas de JavaScript que desearía saber mucho antes en mi carrera

    7 cosas de JavaScript que desearía saber mucho antes en mi carrera

    SmashingConf New York 2024 SmashingConf New York 2024 Índice Notaciones abreviadas

    programar

    es

    https://pseint.es/static/images/programar-7-cosas-de-javascript-que-desearia-saber-mucho-antes-en-mi-carrera-770-0.jpg

    2024-04-04

     

    7 cosas de JavaScript que desearía saber mucho antes en mi carrera
    7 cosas de JavaScript que desearía saber mucho antes en mi carrera

    Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

     

     

    Top 20