NameSpace en JavaScript

Los namespace no son otra cosa que unos contenedores de nombre donde podremos contener clases, funciones y variables que pueden repetirse con el mismo nombre en otros espacios de nombre o namespace sin que ello suponga un error

El espacio de nombres es el acto de envolver un conjunto de entidades, variables, funciones, objetos bajo un solo término general.

JavaScript tiene varias formas de hacerlo, y ver los ejemplos hará que el concepto sea más fácil de entender.

La forma más sencilla de crear un espacio de nombres es creando un objeto literal.

En algunos frameworks vemos como las “clases” tienen paquetes o espacio de nombres. Para empezar decir que ni son namespaces, ni packages ni nada, son solo objetos anidados unos dentro de otros. Y para acabar decir que es una muy buena practica que nosotros agrupemos nuestras funciones y objetos usando nuestro propio “espacio de nombres”.

Veámoslo con un ejemplo: es habitual tener varias funciones sueltas que nos ayuden (para manipular el Dom, validar un dato o lo que sea) junto con variables sueltas para apoyarnos así:

`01`	`var` `dirty =` `false`
`02`	`function` `clickCancel() {`

`03`	`var` `save =` `true`
`04`	`if` `(dirty) {`

`05`	`save = confirm("salvar antes de salir?")`
`06`	`}`

`07`	`if` `(save) clickSave()`
`08`	`}`

`09`
`10`	`function` `clickSave() {`

`11`	`document.getElementById("myForm").submit()`
`12`	`}`

Aquí tenemos una variable publica llamada dirty y dos métodos, también públicos, llamados clickCancel y clickSave. Pero sería mucho mejor usar nuestro propio objeto para encapsularlos:

`01`	`var` `App = {`
`02`	`dirty:` `false,`

`03`	`clickCancel:` `function() {`
`04`	`var` `save =` `true`

`05`	`if` `(this.dirty) {`
`06`	`save = confirm("salvar antes de salir?")`

`07`	`}`
`08`	`if` `(save)` `this.clickSave()`

`09`	`},`
`10`	`clickSave:` `function() {`

`11`	`document.getElementById("myForm").submit()`
`12`	`}`

13

}

Ahora usaremos App.dirty, App.clickCancel() y App.clickSave(), consumiendo solo una variable pública en el ámbito global llamada App, y no tres como hacíamos antes. Si tenemos en cuenta que, generalmente, solemos crear decenas de funciones y variables públicas, está claro que la posibilidad de que usemos el mismo nombre de función o variable que ya exista en otro sitio disminuye considerablemente.

Y podemos anidar varios objetos, unos dentro de otros, hasta construir nuestro propio espacio de nombres:

`01`	`var` `app = {util:{}}`
`02`

`03`	`app.util.forms = {`
`04`	`dirty:` `false,`

`05`	`clickCancel:` `function() {`
`06`	`var` `save =` `true`

`07`	`if` `(this.dirty) {`
`08`	`save = confirm("salvar antes de salir?")`

`09`	`}`
`10`	`if` `(save)` `this.clickSave()`

`11`	`},`
`12`	`clickSave:` `function() {`

`13`	`document.getElementById("myForm").submit()`
`14`	`}`

15

}

Ahora tenemos nuestro flamante espacio de nombres app.util.forms.dirty y podemos usar las funciones como app.util.forms.clickCancel() y app.util.forms.clickSave()

Y nada más por hoy. En el próximo post cerraremos la serie de Javascript hablando de scopes (ámbitos de visibilidad), hoisting y closures que es cuando la cosa se empieza a poner interesante de verdad. Y veremos también algunos ejemplos un poco más complejos

DEMOSTRACIÓN

En el espacio de nombre del proyecto creado en los artículos anteriores damos click derecho y seleccionamos Add à New Items

En la siguiente ventana seleccionamos la Opción “Pagina HTML” y colocamos como nombre del archivo “NameSpace.html”, para luego presionar el botón Add.