Artículos con la etiqueta 'discreto JavaScript'


Defectos dell'unobtrusive JavaScript

Como hemos hablado de ello y en el post anterior, es el momento para hablar sobre el mal (es broma), o al menos destacar algunas deficiencias de la técnica de JavaScript discreta.
Si el discreto código JavaScript que se ejecuta cuando la página está completamente cargada, se deduce que cuanto mayor sea la cantidad de datos (HTML) que compone nuestra página y más tiempo para esperar antes de que nuestro código se ejecuta.

Esto puede resultar en demoras en la ejecución y que resulta en un molesto efecto de parpadeo si se trabaja en los elementos visuales de la página. Tomemos por ejemplo el código utilizado por Ryan Johnson para crear objetos TabStrip. Si nos fijamos en la demostración se encuentra que por un segundo o así, cuando se carga la página, hay claramente una disposición estándar reemplazado poco después por los objetos TabStrip. Recarga la página de nuevo, gracias a la caché del navegador, el problema tiende a disminuir (tratar de limpiar toda la caché de su navegador para ver los tiempos).

Todo esto debe hacernos reflexionar sobre los límites de esta técnica. El mismo complemento sufre precisamente las mismas desaceleración, especialmente las páginas a menudo extremadamente altas que la de undolog.com . Carga de la página principal de este blog es claro que Snap corre unos segundos más tarde, es decir, cuando la página está completamente cargada.

Por definición de "activar discreta es difícil de resolver este problema en general. Sin embargo, el desarrollo de un propietario del sitio puede tomar algunas precauciones para reducir o eliminar los defectos. Una forma muy sencilla es crear una especie de elemento de precarga de uso frecuente en Adobe Flash. A continuación, puede configurar el cuerpo de la etiqueta - que contiene todos los elementos de la página - lo que es invisible, dejando la tarea de código Javascript para que sea visible cuando se ha terminado - en su caso - los cambios en el DOM:

1
"ibody" style = "display:none" > < cuerpo id = "ibody" style = "display: none">

El discreto código JavaScript al final de sus operaciones:

1
2
3
"ibody" ) . style . display = "" ; documento getElementById ("ibody") el estilo de visualización = ""...;
/ / Si utiliza prototipo
) . style . display = "" ; $ ("Ibody") Estilo de visualización = ""..;

Solución, sin embargo, trivial y no siempre son aplicables. Además, incluso si de alguna manera resuelto el problema de la primera caricameno, navegar de tal manera en el largo plazo podría ser realmente molesto para los navegantes. No sea intrusivo, por lo tanto, tiene un precio que pagar. Incluso operando a nivel de objeto, por ejemplo mediante el establecimiento de sólo los elementos interesantes en el modo oculto, el hecho de que el código se inicia al final de la carga de la página entera con ella, inevitablemente, los mismos problemas exactas.

Más información ...

Ejemplos de discreta Javascript

Lo prometido es deuda aquí están algunos ejemplos concretos de JavaScript discreta, una herramienta versátil y poderosa si se usa correctamente. El sitio web / blog de ​​Ryan Johnson se puede descargar dos muy buen ejemplo de JavaScript discreta:

Ryan Johnson, en su guión, la biblioteca utiliza Prototype , al igual que muchos de los demás. También ha escrito algunas extensiones a la relativamente Prototype , presentó a continuación - en una forma diferente - en la última versión de la biblioteca.
El uso de prototipos para ilustrar el funcionamiento de la discreta código JavaScript es generalmente más conveniente - como veremos más adelante, sin embargo, aquí hay una cruda primer ejemplo que no requiere de bibliotecas externas. Comenzamos por recordar que el concepto detrás de la discreta JavaScript es empezar desde cualquier página HTML (estándar y no necesariamente por escrito por nosotros - el punto fuerte más importante) y utilizar Javascript para hacer algunos cambios.

Schematimamente el concepto es para realizar una función que analiza el código HTML, a continuación, atraviesa el DOM y, en particular, para añadir o cambiar la funcionalidad. Normalmente utilizan dos métodos para ejecutar código Javascript para cargar una página: la primera es lo que no se coloca el código en cualquier función, y luego dejar que el navegador ejecuta código inmediatamente cargado en el punto donde aparece la llamada:

1
script > < script de > alert ("Hola"); </ script de >

El mismo resultado se obtiene mediante la inclusión del código:

1
"http://miosito.com/miocodice.js" >< / script > < script de src = "http://miosito.com/miocodice.js"> </ script de >

Sin embargo, cuando se debe operar en el DOM de una página que se supone una carga completa, para que todos la etiqueta de la página está presente y disponible para ser rastreados. Así que la mejor solución se convierte en el uno para asegurarse de que la página es completa. Esto es posible gracias a la participación del evento onload de la etiqueta del cuerpo, por ejemplo, que se libera cuando la carga de la página se ha completado.

1
2
3
miafunzione ; ventana onload = MyFunction.;
/ / O, que es el mismo
function ( ) { alert ( "Hello" ) ; } . ventana onload = function () {alert ("Hola");}

Evitar, por supuesto, la solución jurídica que sería un eufemismo llamarlo intrusiva:

1
"miafunzione()" > < cuerpo onload = "MyFunction ()">

Otra técnica, más grueso e igualmente intrusivo (ya que obligaría al usuario final para colocar el código en un lugar determinado), es insertar el guión al final del documento antes de que el cuerpo de la etiqueta de cierre, ahora obsoleto y técnica utilizada en casos excepcionales (ver Google Analytics!).

Aún mejor es usar el método siguiente:

1
2
3
4
5
6
7
window. addEventListener ) { if (addEventListener window.) {
"load" , miafunzione , false ) ; ventana. addEventListener ("carga", MyFunction, false) ¾ Í
( window. attachEvent ) { } Else if (window. attachEvent) {
"onload" , miafunzione ) ; ventana. attachEvent ("onload", MyFunction) ¾ Í
{ Else {}
createSubMenus; ventana. onload = createSubMenusÍ ¾
}

Incluso esta pieza de código está encerrado en una función. Se añade un detector de eventos para el evento de carga de la ventana, llamando a nuestra función miafunzione() . . Los navegadores modernos como Firefox, por ejemplo, se utiliza la función addEventListener() se define en el DOM nivel 2, mientras que Internet Explorer utiliza su función patentada attachEvent() . Sin embargo no estamos en la perfección de esta manera, de hecho, se sustituirá todo - si los hay - los eventos onload creados por otros scripts, que no es realmente "no intrusiva".

Para resolver este problema rápidamente, que a causa del diferente comportamiento del navegador se lo complicado de explicar aquí, usted debe usar como libreirie prototipo proporciona el método un'elengantissimo para superar el problema:

1
window , 'load' , function ( ) { alert ( "Hello" ) ; } ) ; . Evento Observar (ventana, 'load', function () {alert ("Hola");});

La sintaxis es muy obvio y espectacular! La ventaja para los que no lo había entendido, es que se puede escribir:

1
2
window , 'load' , function ( ) { alert ( "Hello 1" ) ; } ) ; . Evento Observar (ventana, 'load', function () {alert ("Hola 1");});
window , 'load' , function ( ) { alert ( "Hello 2" ) ; } ) ; . Evento Observar (ventana, 'load', function () {alert ("Hola 2");});

Al cargar la página se mostrará antes de la alerta "Hola 2" y luego la alerta "Hola 1". Básicamente se carga en un FILO (First Input Output pasado) una pila, al tiempo que garantiza la ejecución de todos los eventos conectados para cargar el documento exactamente lo que se desea. De esta manera, una página puede cargar - casi - infinita JavaScript discreta que conectar para cargar el documento.

Pero, ¿qué se puede hacer con esta técnica? Muchas cosas interesantes. Un ejemplo que podemos comentar (véase también el prototipo: el uso del doble signo de dólar ($ $) ) viene de Tobie Langel . Con pocas líneas de código y la descarga de bibliotecas Prototype y Scriptaculous puedes dar un bonito efecto al ancla clásico de nuestras páginas. En primer lugar crear una página HTML con el siguiente código:

1
2
3
4
5
6
7
8
= "#capitolo1" > Vai al capitolo 1 < / a >< / p > < p > < un href = "# capítulo 1"> Vai en el Capítulo 1 </ un > </ p >

< / p > < p > </ p >
< / p > < p > </ p >

.... < / p > .... una gran cantidad "de < p > </ p > .... así como un ejemplo

"capitolo1" > Capitolo 1 < / h1 > < h1 id = "Capítulo 1"> Capítulo 1 </ h1 >

Incluir la página:

1
2
3
4
5
6
7
8
9
10
11
12
"prototype.js" type = "text/javascript" charset = "utf-8" >< / script > < script de src = "prototype.js" type = "text / javascript" charset = "UTF-8"> </ script de >
"scriptaculous-js-1.7.0/src/effects.js" type = "text/javascript" charset = "utf-8" >< / script > < script de src = "scriptaculous-js-1.7.0/src/effects.js" type = "text / javascript" charset = "UTF-8"> </ script de >

"text/javascript" language = "javascript1.2" > < script de type = "text / javascript" language = "JavaScript1.2">
Event.observe (ventana, 'load', function () {
$ $ ('A [href ^ = #]: No ([href = #])') Cada uno (función (elemento) {.
element.observe ('click', function (evento) {new Effect.ScrollTo (this.hash.substr (1));
Event.stop (evento);
bindAsEventListener (elemento))
})
})
</ script de >

Gracias a "utilizar Event.observe() la función y dos dólares ($ $) puede modificar fácilmente el comportamiento del anclaje clásico. En este caso, una nueva función está enganchado a las cargas de la página HTML. Al tomar el caso de carga se remonta a todos los eslabones de la DOM (Tag <A>) con href que comienza con una almohadilla (#, con exclusión de la que sólo con almohadilla!). A estos elementos es una función de adjunto al evento click, similar a lo que se hizo con la carga del documento. En este punto entra en juego Scriptaculous lo que produce un efecto de la espiral hacia el punatato elemento de nuestro enlace - modificado!

Más información ...

Accesibilidad y Usabilidad: discreta Javascript

Permitir a los usuarios interactuar con una página Web en los últimos años se ha producido un aumento significativo en el uso de secuencias de comandos del lado del cliente: código Javascript se puede responder en tiempo real y manipular una gran variedad de información. La Web 2.0 es la última expresión de esta capacidad de interacción, en la que el usuario final - el usuario a participar activamente en la evolución de la construcción y "del sitio Web, interactuar con él y ayudarte a ti mismo. Se conoce como contenido generado por usuarios (UGC, o - contenido generado por usuarios) que ve en el "navegador" definitivamente no es pasiva!

Para lograr esta interacción, lo que permite al usuario final para sumar su aporte, hemos desarrollado una serie de técnicas que han cambiado el aspecto y el comportamiento de las páginas web (estático hasta ahora, pero ahora similar a las aplicaciones tradicionales de Desktop) en los últimos años. Cambiar el contenido de una página, enviar archivos, dando su voto a un vídeo o un documento, registrar o cambiar sus datos personales, son sólo algunas de las operaciones de las adaptaciones en muchos servicios (2.0 beta) en la Web

Más información ...



Deje de SOPA