He estado escribiendo código JavaScript durante mucho tiempo y no recuerdo qué era comenzó. Estoy muy entusiasmado con los logros de JavaScript en los últimos años; Tengo mucha suerte de ser el beneficiario de estos logros. He escrito muchos artículos, capítulos y un libro dedicado a él, pero todavía puedo encontrar un nuevo conocimiento sobre este idioma ahora. Lo siguiente describe las habilidades de programación que me hicieron suspirar "¡Ah!" en el pasado. Debería probar estas habilidades ahora, en lugar de esperar para descubrirlas accidentalmente en algún momento en el futuro.
Escritura concisa
Una de mis cosas favoritas en JavaScript es el método de abreviatura para generar objetos y matrices. En el pasado, si quisiera crear un objeto, necesitaría hacer esto:
var car = new Object (); car.colour = 'rojo'; coche.wheels = 4; car.hubcaps = 'spinning'; coche.age = 4;
El siguiente método de escritura puede lograr el mismo efecto:
var car = {color: 'rojo', ruedas: 4, hubcaps: 'spinning', edad: 4}Es mucho más simple, no necesita usar el nombre de este objeto repetidamente. De esta manera, el coche está definido. Tal vez encuentres el problema de Invaliduserinsession, que solo se encuentra cuando usas IE. Solo recuerda una cosa y no escribas comas antes de los aparatos ortopédicos, y no tendrás ningún problema.
Otra abreviatura muy conveniente es para matrices. La forma tradicional de definir una matriz es la siguiente:
var MoviestHatNeedBetterWriters = New Array ('Transformers', 'Transformers2', 'Avatar', 'Indianajones 4');La versión de abreviatura es así:
var MoviestHatNeedBetterWriters = ['Transformers', 'Transformers2', 'Avatar', 'Indianajones 4'];
Para las matrices, aquí hay un problema, pero en realidad no hay una función de grupo gráfico. Pero a menudo encontrarás que alguien define el auto anterior así, como este
var car = new Array (); coche ['color'] = 'rojo'; coche ['ruedas'] = 4; coche ['hubcaps'] = 'spinning'; coche ['edad'] = 4;
Las matrices no son omnipotentes; Si se escriben incorrectamente, serán confusos. Los grupos gráficos son en realidad la función de los objetos, y las personas han confundido estos dos conceptos.
Otro método de abreviatura muy genial es usar símbolos condicionales ternarios. No tienes que escribirlo como a continuación ...
dirección var; if (x <200) {dirección = 1; } else {dirección = -1; } ...Puede simplificarlo con notación condicional ternaria:
dirección var = x <200? 1: -1;
Cuando la condición es verdadera, el valor después del signo de interrogación se toma, de lo contrario el valor después de que se toma el colon.
Almacenar datos en JSON
Antes de descubrir JSON, utilicé varios métodos locos para almacenar datos en los tipos de datos inherentes de JavaScript, como matrices, cuerdas, glifos que son fáciles de dividir y otras cosas molestas. Después de que Douglas Crockford inventó JSON, todo cambió. Usando JSON, puede usar las propias funciones de JavaScript para almacenar datos en formatos complejos, y no hay necesidad de hacer otras conversiones adicionales, y puede acceder directamente a él. JSON es la abreviatura de la "notación de objeto JavaScript", que utiliza los dos métodos de abreviatura mencionados anteriormente. Entonces, si quieres describir una banda, podrías escribir así:
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" }, {"Nombre": "John Frusciante", "rol": "guitarra principal"}], "año": "2009"}Puede usar JSON directamente en JavaScript, encapsularlo en funciones o incluso usarlo como una forma de valor de retorno de una API. Llamamos a esto JSON-P, y muchas API usan este formulario.
Puede llamar a una fuente de suministro de datos y devolver directamente los datos JSON-P en el código de script:
<div id = "delicioso"> </div> <script> función deliciosa (o) {var out = '<ul>'; for (var i = 0; i <o.length; i ++) {out + = '<li> <a href = "' + o [i] .u + '">' + o [i] .d + '</a> </li>'; } out += '</ul>'; document.getElementById ('delicioso'). innerhtml = out; } </script> <script src = "http://feeds.delicious.com/v2/json/codepo8/javascript?count=15&callback=delicious"> </script>Esto llama a la función de servicio web proporcionada por el delicioso sitio web para obtener la lista de marcadores desordenada más reciente en formato JSON.
Básicamente, JSON es la forma más ligera de describir estructuras de datos complejas, y puede ejecutarse en el navegador. Incluso puede ejecutarlo en PHP con la función JSON_DECODE (). Una cosa que me sorprendió sobre las propias funciones de JavaScript (matemáticas, matriz y cadena) es que después de estudiar las funciones de matemáticas y cadenas en JavaScript, descubrí que pueden simplificar enormemente mi trabajo de programación. Usandolos, puede guardar el procesamiento de bucle complejo y los juicios condicionales. Por ejemplo, cuando necesito implementar una función para encontrar el número más grande en la matriz de números, solía escribir este bucle como este:
números var = [3,342,23,22,124]; var max = 0; for (var i = 0; i <numbers.length; i ++) {if (números [i]> max) {max = números [i]; }} alerta (max);Podemos hacerlo sin bucle:
números var = [3,342,23,22,124]; números.sort (función (a, b) {return b - a}); alerta (números [0]);Cabe señalar que no puede clasificar () una matriz de caracteres numéricos, porque en este caso solo ordenará en orden alfabético. Si desea saber más sobre el uso, puede leer este buen artículo sobre Sort ().
Otra función interesante es Math.max (). Esta función devuelve el número más grande en el parámetro:
Math.max (12,123,3,2,433,4); // Devuelve 433
Debido a que esta función puede verificar los números y devolver el más grande, puede usarla para probar el soporte del navegador para una función:
var scrollTop = math.max (doc.documentelement.scrolltop, doc.body.scrolltop);
Esto se usa para resolver los problemas de IE. Puede obtener el valor de ScrollTop de la página actual, pero dependiendo del Doctype en la página, solo una de las dos propiedades anteriores almacenará este valor, y la otra propiedad estará indefinida, para que pueda obtener este número usando Math.max (). Lea este artículo y obtendrá más conocimiento sobre el uso de funciones matemáticas para simplificar JavaScript.
También hay un par de funciones muy útiles que las cadenas de operación son divididas () y unir (). Creo que el ejemplo más representativo sería escribir una función para adjuntar el estilo CSS a los elementos de la página.
Es así. Cuando agrega una clase CSS al elemento de página, o es la primera clase CSS de este elemento o ya tiene algunas clases. Debe agregar un espacio después de la clase existente y luego seguir la clase. Y cuando desea eliminar esta clase, también debe eliminar los espacios frente a esta clase (esto fue muy importante en el pasado porque algunos navegadores antiguos no reconocieron la clase seguida de los espacios).
Entonces, la escritura original se verá así:
función addClass (Elm, newClass) {var c = elm.classname; Elm.ClassName = (c === '')? NewClass: C+''+NewClass; }Puede usar funciones Split () y unir () para completar automáticamente esta tarea:
función addClass (Elm, newClass) {var classes = elm.classname.split (''); classes.push (newclass); Elm.className = classes.Join (''); }Esto asegurará que todas las clases estén separadas por espacios y que la clase que desea agregar se coloca exactamente la última.
Delegación de eventos
Las aplicaciones web están impulsadas por el evento. Me gusta el manejo de eventos, especialmente me gusta definir eventos. Hace que su producto sea escalable sin cambiar el código central. Hay un gran problema (también una poderosa manifestación) sobre la eliminación de eventos en la página. Puede instalar un oyente de eventos en un elemento y el oyente de eventos comienza a funcionar. Pero no hay indicios de que haya un oyente. Debido a este problema impredecible (que es particularmente problemático para algunos novatos), y los diversos problemas de memoria que "los" navegadores "como IE6 usan demasiados eventos escuchando, debe admitir que es aconsejable tratar de usar la programación de eventos lo menos posible.
Entonces ocurrió la comisión del incidente.
Cuando se activa un evento en un elemento en la página, y en la relación de herencia DOM, todos los niños de este elemento también pueden recibir este evento. En este momento, puede usar un controlador de eventos en el elemento principal para manejarlo, en lugar de usar oyentes de eventos en un montón de elementos infantiles para manejarlo. ¿Qué significa exactamente? Vamos a decir de esta manera, hay muchos hipervínculos en la página. No desea usar estos enlaces directamente. Desea llamar a este enlace a través de una función. El código HTML es así:
<h2> Grandes recursos web </h2> <ul id = "recursos"> <li> <a href = "http://opera.com/WSC"> Curriculo de estándares web de Opera </a> </li> <li> <a href = "http://sitePoint.com"> SitePoint </a> </li> <li> <a href = "http://alistapart.com"> una lista aparte </a> </li> <li> <a href = "http://yuiblog.com"> href = "http://oddlyspecific.com"> extrañamente específico </a> </li> </ul>
Es una práctica común recorrer estos enlaces y adjuntar un controlador de eventos a cada enlace:
// Ejemplo de manejo de eventos típico (function () {var recursos = document.getElementById ('recursos'); var links = recursos.getElementsByTagName ('a'); var all = links.length; for (var i = 0; i <todos; i ++) {// adjuntar un oyente a cada enlace de enlaces [i] .addEventListener ('click', handler, falso);};} Handler (e) {var x = e.Target;También podemos lograr esta tarea con un procesador de eventos:
(function () {var recursos = document.getElementById ('recursos'); recursos.adDeventListener ('click', handler, false); function handler (e) {var x = e.target; // obtener el enlace tha if (x.nodename.tolowercase () === 'a') {alerta ('alerta delegación:' + x); e.preventEname (); othiFault (); }) ();Debido a que el evento de clics ocurre en estos elementos de página, todo lo que tiene que hacer es comparar sus nombres nodo y averiguar qué elemento debe responder al evento.
Descargo de responsabilidad: los dos ejemplos sobre los eventos mencionados anteriormente pueden ejecutarse en todos los navegadores. Excepto para IE6, debe usar un modelo de evento en IE6, en lugar de una simple implementación estándar W3C. Es por eso que recomendamos usar algunos kits de herramientas.
El beneficio de este enfoque no se limita a reducir múltiples procesadores de eventos en uno. Piénselo, por ejemplo, debe agregar dinámicamente más enlaces a esta tabla de enlaces. Después de usar la delegación de eventos, no necesita hacer ningún otro cambio; De lo contrario, debe volver a revisar esta tabla de enlaces e instalar el controlador de eventos para cada enlace nuevamente.
Funciones anónimas y modularidad
Lo más molesto en JavaScript es que las variables no tienen alcance que usar. Cualquier variable, función, matriz, objeto, siempre que no esté dentro de la función, se considera global, lo que significa que otros scripts en esta página también pueden acceder a él y anularlo.
La solución es colocar su variable dentro de una función anónima y llamarla inmediatamente después de que se define. Por ejemplo, el siguiente método de escritura producirá tres variables globales y dos funciones globales:
var name = 'Chris'; var age = '34'; estado var = 'sencillo'; function createMember () {// [...]} function getMemberDetails () {// [...]}Si hay una variable llamada estado en otros scripts en esta página, se producirán problemas. Si los encapsulamos en una aplicación myaplica, este problema se resolverá:
var myApplication = function () {var name = 'Chris'; var age = '34'; estado var = 'sencillo'; function createMember () {// [...]} function getMemberDetails () {// [...]}} ();Sin embargo, de esta manera, no hay función fuera de la función. Si esto es lo que necesitas, está bien. También puede omitir el nombre de la función:
(function () {var name = 'Chris'; var age = '34'; var status = 'single'; function createMember () {// [...]} function getMemberDetails () {// [...]}}) ();Si desea usar el interior de la función, debe hacer algunas modificaciones. Para acceder a CreateMember () o GetMemberDetails (), debe convertirlos en propiedades de MyApplication para exponerlas al mundo externo:
var myApplication = function () {var name = 'Chris'; var age = '34'; estado var = 'sencillo'; return {createMember: function () {// [...]}, getMemberDetails: function () {// [...]}}} (); //myapplication.createmember () y //myapplication.getMemberDetails () se puede usar.Esto se llama modo de módulo o singleton. Douglas Crockford ha hablado de esto muchas veces, y se usa ampliamente en la Biblioteca de interfaz de usuario de Yahoo Yui. Pero lo que me hace inconveniente es que necesito cambiar la estructura de la oración para que el mundo exterior pueda acceder a funciones y variables. Además, necesito agregar el prefijo de MyApplication al llamar. Por lo tanto, no me gusta hacer esto, prefiero simplemente exportar consejos a elementos a los que el mundo exterior debe acceder a los elementos. Después de hacer esto, se simplifica la redacción de llamadas externas:
var myApplication = function () {var name = 'Chris'; var age = '34'; estado var = 'sencillo'; function createMember () {// [...]} function getMemberDetails () {// [...]} return {create: createMember, get: getMemberDetails}} (); // ahora escríbelo como myApplication.get () y myApplication.create ().Yo llamo a esto "un patrón de módulo revelador".
Configurable
Una vez que publiqué el código JavaScript que escribí a este mundo, alguien quería cambiarlo, generalmente la gente quería completar tareas que no podía completarse, pero generalmente el programa que escribí no era lo suficientemente flexible y no proporcionaba funciones definidas por el usuario. La solución es agregar un objeto de elemento de configuración a su script. Una vez escribí un artículo que presenta los objetos de elementos de configuración de JavaScript en profundidad. Aquí están los puntos clave:
---- En su script, agregue un objeto llamado configuración.
---- Este objeto almacena todas las cosas que las personas a menudo necesitan cambiar al usar este script:
** ID de CSS y nombre de clase;
** Nombre del botón, palabra de etiqueta, etc.;
** valores como "número de imágenes que se muestran por página" y "tamaño de imágenes mostradas";
** Ubicación, ubicación y configuración de idioma.
--- Devuelva este objeto al usuario como una propiedad común para que el usuario pueda modificarlo y sobrescribirlo.
Esto suele ser lo que debe hacer en el último paso en su proceso de programación. Los concentré en un ejemplo: "Cinco cosas que hacer a un guión antes de entregarlo al próximo desarrollador".
De hecho, también desea que su código se use de una manera muy buena y haga algunos cambios de acuerdo con sus respectivas necesidades. Si implementa esta función, recibirá correos electrónicos menos confusos de personas que se quejan de su guión, lo que le dirá que alguien ha modificado su guión y que es muy útil.
Interactuar con el fondo
Una de las cosas importantes que he aprendido en tantos años de experiencia en programación es que JavaScript es un lenguaje excelente para desarrollar la interacción de la interfaz, pero si se usa para procesar números o acceder a fuentes de datos, es un poco insatisfactorio.
Inicialmente, aprendí a JavaScript para reemplazar a Perl porque odio tener que copiar el código a la carpeta CGI-bin para que se ejecute Perl. Más tarde, me di cuenta de que debería usar un lenguaje de trabajo de backend para procesar los datos principales, y no puedo dejar que JavaScript haga todo. Más importante aún, debemos considerar las características de seguridad y lenguaje.
Si accedo a un servicio web, puedo obtener los datos en formato JSON-P. En el navegador del cliente, hago varias conversiones de datos, pero cuando tengo un servidor, tengo más formas de convertir los datos. Puedo generar datos de formato JSON o HTML en el lado del servidor y devolverlos al cliente, así como a los datos de caché, etc. Si comprende y los prepara por adelantado, obtendrá ganancias a largo plazo y ahorrará muchos dolores de cabeza. Escribir programas que son adecuados para varios navegadores es una pérdida de tiempo, ¡use el kit de herramientas!
Cuando comencé el desarrollo web, luché mucho durante mucho tiempo si usar documento. All o Docum.Lapeers al acceder a la página. Elegí Document.Lapeers porque me gusta la idea de que cualquier capa es su propio documento (y escribí demasiados documentos. Escribe para generar elementos). El patrón de capa finalmente falló, así que comencé a usar documento. Todo. Estaba muy contento cuando Netscape 6 anunció que solo admite modelos W3C DOM, pero de hecho a los usuarios no les importaba esto. Los usuarios simplemente ven que tales navegadores no pueden mostrar cosas que la mayoría de los navegadores pueden mostrar normalmente; este es un problema con nuestra codificación. Escribimos un código miope que solo se puede ejecutar en el entorno actual, pero desafortunadamente, nuestro entorno operativo cambia constantemente.
He estado perdiendo demasiado tiempo lidiando con la compatibilidad con varios navegadores y varias versiones. Ser bueno para tratar este tipo de problema me proporciona una buena oportunidad de trabajo. Pero ahora no tenemos que soportar este dolor.
Algunos kits de herramientas, como Yui, JQuery y Dojo, pueden ayudarnos a lidiar con este tipo de problema. Resuelven varios problemas de navegador al abstraer varias implementaciones de interfaz, como la incompatibilidad de la versión, los defectos de diseño, etc., lo que nos ahorra de nuestro dolor. A menos que desee probar un cierto navegador beta, no agregue código a su propio programa para corregir los defectos del navegador, porque es probable que olvide eliminar su código cuando el navegador ha modificado este problema.
Por otro lado, confiar completamente en los kits de herramientas también es un comportamiento miope. Los kits de herramientas pueden ayudarlo a desarrollarse rápidamente, pero si no tiene una comprensión profunda de JavaScript, también hará algo mal.
Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.