Apuntes Javascript Avanzado

Apuntes de Javascript II Nivel Avanzado JuanMa Garrido Este libro está a la venta en http://leanpub.com/apuntes-javascript-avanzado Esta versión se publicó en 2015-01-30

This is a Leanpub book. Leanpub empowers authors and publishers with the Lean Publishing process. Lean Publishing is the act of publishing an in-progress ebook using lightweight tools and many iterations to get reader feedback, pivot until you have the right book and build traction once you do.

This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License

A mi abuelo… “Hijo, tu di que si, y luego haz lo que te de la gana” (mi abuelo)

Índice general 1. Prologo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1.1 Referencias . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1.2 Agradecimientos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

1 1 1

2. Same-origin policy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2.1 JSONP vs CORS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

2 2

3. JSONP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3.1 Peticiones JSONP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

4 5

4. CORS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4.1 Peticiones CORS sencillas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

8 8

5. El valor de this . . . . . . . . . . . . . . . 5.1 En una función global . . . . . . . . . 5.2 En un método de un objeto . . . . . . 5.3 En un metodo de un prototipo . . . . 5.4 En una función constructora . . . . . 5.5 Utilizando call o apply . . . . . . . . 5.6 Utilizando bind . . . . . . . . . . . . 5.7 En una función asociada a un evento

. . . . . . . .

9 9 10 11 11 12 13 13

6. Prototype . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

15

7. Herencia . . . . . . . . . . . . . . . . . . . . . . . . . . 7.1 Encadenamiento de Prototipos (Prototype Chaining) 7.2 Moviendo metodos re-utilizables al prototypo . . . . 7.3 Herencia sólo del prototipo . . . . . . . . . . . . . . 7.4 Función constructora temporal F() . . . . . . . . . . 7.5 Encapsulando la herencia en una función . . . . . . 7.6 Robando el constructor . . . . . . . . . . . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

22 22 24 26 27 29 30

8. Contexto de Ejecución . . . . . . . . . . 8.1 Objeto Variable (Variable Object) . 8.2 Fases de Procesamiento del Código 8.3 Tipos de Funciones . . . . . . . . . 8.4 Hoisting . . . . . . . . . . . . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

32 32 35 37 39

9. Scope . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

41

. . . . .

. . . . . . . .

. . . . .

. . . . . . . .

. . . . .

. . . . . . . .

. . . . .

. . . . . . . .

. . . . .

. . . . . . . .

. . . . .

. . . . . . . .

. . . . .

. . . . . . . .

. . . . .

. . . . . . . .

. . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

ÍNDICE GENERAL

9.1

Ciclo de vida de una Función . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

42

10.Patrones de Código . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10.1 Separación de capas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10.2 Namespaces . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10.3 Init-time branching . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10.4 Lazy Definition . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10.5 Objeto de Configuración . . . . . . . . . . . . . . . . . . . . . . . . . . 10.6 Propiedades y Métodos Privados . . . . . . . . . . . . . . . . . . . . . . 10.7 Métodos Privilegiados . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10.8 Funciones Privadas como Métodos Públicos (Revealing Module Pattern ) 10.9 Funciones Inmediatas . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10.10 Memoization . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10.11 Patrón Modulo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10.12 Patrón Sandbox . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . .

. . . . . . . . . . . . .

. . . . . . . . . . . . .

. . . . . . . . . . . . .

. . . . . . . . . . . . .

45 45 45 46 47 48 49 49 50 51 53 54 54

11.Patrones de Diseño . . . . . . . . . . . . . 11.1 Patrón Singleton . . . . . . . . . . . . . 11.2 Patrón Factory . . . . . . . . . . . . . . 11.3 Patrón Iterator . . . . . . . . . . . . . . 11.4 Patrón Mixins . . . . . . . . . . . . . . 11.5 Patrón Decorator . . . . . . . . . . . . 11.6 Patrón Façade . . . . . . . . . . . . . . 11.7 Patrón Observer – Subscriber/Publisher 11.8 Patrón Mediator . . . . . . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

57 57 58 60 61 62 64 65 68

12.Unit Testings en Javascript . . . . . 12.1 Unit Testings (pruebas unitarias) 12.2 TDD y BDD . . . . . . . . . . . 12.3 Testing Frameworks . . . . . . . 12.4 Sinon . . . . . . . . . . . . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

70 70 72 72 77

. . . . .

. . . . .

. . . . .

. . . . .

1. Prologo Este libro contiene la segunda parte de los materiales que he ido realizando para diferentes trainings JAVASCRIPT impartidos desde 2010. Esta segunda parte abarca conceptos más avanzados de Javascript incluyen: • • • • •

Interactuación con API’s externas (Same-Origin Policy, JSONP, CORS) Javascript a fondo (scope, valor de this, prototype, contexto de ejecución) Javascript “orientado a objetos” (prototype, herencia) Cómo estructurar mejor tu codigo JS (patrones de diseño y de codigo) Cómo testear tu codigo js (unit testings)

Los conceptos cubiertos en este libro te permitiran que tu código JS sea orientado a objetos, testado, escalable, más comprensible y más organizado. Espero que este libro te ayude a entender/implementar el codigo javascript que necesites. Cualquier feedback será bien recibido :)

1.1 Referencias Ademas de los enlaces reflejados, este material está basado en los siguientes libros: • JavaScript: The Good Parts by Douglas Crockford • Object-Oriented JavaScript by Stoyan Stefanov • JavaScript Patterns by Stoyan Stefanov

1.2 Agradecimientos Gracias a @gemmabeltra por la super-portada del libro (…y por aguantarme en general) A @amischol por elevar mi nivel de javascript y el de todos los que hemos trabajado a su lado (cuando nosotros vamos, él ya tiene su chalet alli montado) A @cvillu por animarme a escribir el libro y descubrirme LeanPub (South-Power!!!) A @crossrecursion por nuestras charlas/reuniones hablando de Javascript (me excitas… intelectualmente) Y a @softonic por darme la oportunidad de impartir los trainings JS y rodearme de tanta gente crack en JavaScript. No hay universidad que me pueda enseñar lo que he podido aprender alli.

1

2. Same-origin policy La “Same-Origin policy” (politica del mismo origen) controla que sólo que los scripts que provengan del mismo origen (mismo esquema, hostname y puerto) y que son ejecutados en diferentes paginas (ventanas, tabs) puedan acceder sin restricciones a sus respectivos DOM Mismo Origen: 1 2 3

http://site.com http://site.com/ http://site.com/my/page.html

Diferente Origen: 1 2 3 4

http://www.site.com (another domain) http://site.org (another domain) https://site.com (another protocol) http://site.com:8080 (another port)

Esta politica se aplica tambien a las peticiones AJAX (XMLHttpRequest) lo que significa que sólo podremos hacer peticiones AJAX al host que sirve la pagina web donde se ejecuta el código Los WebSockets no estan sujeto a esta politica (con ellos podras comunicar partes en diferentes dominios) Esta politica viene implementada en TODOS los navegadores (antiguos y modernos) De forma nativa, sólo podremos incluir recursos de otros dominios con los siguientes elementos: • • • • • • •

Archivos Javascript con <script src="..."> Archivos CSS con Imágenes con Archivos Multimedia con