Tecnocrata

Objetos Globales con CoffeeScript / Javascript

Antes que nada debo indicar que no soy un experto en Javascript y mucho de lo que escribire a continuacion puede sonar conocido, repetitivo y tonto para algunos, sepan disculparme. Bueno, por aquella complejidad intrinseca de Javascript es que yo he encontrado fabuloso el concepto de CoffeeScript y ultimamente estoy involucrandome bastante con Node.js lo que me lleva a tener que prepararme mas aun en javascript y este post contiene la respuesta a una de mis grandes preguntas: Como puedo estructurar objetos globales usando Javascript+CoffeeScript+jQuery+ASP.NET MVC? y todo esto de manera orientada a objetos ….uff para los que no conozcan estas tecnologias puede sonar mas complejo de lo que en realidad es. Encontre tres soluciones que se las presento a continuacion.

Primeramente mostrarles el contenido resumido del archivo index.cshtml, que basicamente contiene un boton y codigo jQuery, para capturar el evento click:

1 @{ 2 ViewBag.Title = "Home Page"; 3 } 4 5 <h2>@ViewBag.Message</h2> 6 <p> 7 To learn more about ASP.NET MVC visit <a href="http://asp.net/mvc" title="ASP.NET MVC Website">http://asp.net/mvc</a>. 8 <br/> 9 <input type="button" id="btnDemo" value="Click me!"/> 10 </p> 11 12 <script type="text/javascript"> 13 14 $("#btnDemo").click(function () { 15 //Code here... 16 }); 17 </script>

El contenido relevante del archivo _Layout.cshtml es el siguiente:

1 <head> 2 <title>@ViewBag.Title</title> 3 <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" /> 4 <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script> 5 <script src="@Url.Content("~/Scripts/tx/common1.js")" type="text/javascript"></script> 6 <script src="@Url.Content("~/Scripts/tx/common2.js")" type="text/javascript"></script> 7 <script src="@Url.Content("~/Scripts/tx/common3.js")" type="text/javascript"></script> 8 </head>

 

Solucion 1

Mi archivo common1.coffee es el siguiente, el “secreto” en esta solucion es el caracter de arroba (@) colocado por delante del nombre de la clase, esto “magicamente” logra el efecto de crear la clase GlobalMessage1 y asignarla al objeto this que gracias al closure de coffeescript es window, es decir aqui this == window.

1 class @GlobalMessage1 2 say_hello: () -> 3 alert "Hello Method 1" 4 5 class PrivateMessage1 6 say_nothing: ()-> 7 alert 'Nothing'

He utilizado una clase adicional llamada PrivateMessage1 para que puedan ver la diferencia con GlobalMessage1 al momento en que se genera el archivo javascript common1.js.

1 <script type="text/javascript"> 2 3 $("#btnDemo").click(function () { 4 var gm = new GlobalMessage1(); 5 gm.say_hello(); 6 }); 7 </script>

Solucion 2

En esta solucion la idea es preparar las clases para estar dentro de namespaces, ficticios porque javascript no soporta el concepto de namespace. Pero gracias al “truco” utilizado, estoy simulando uno. Debo indicar que no considero recomendable tener mas de dos niveles en el namespace del framework que armen, basicamente porque resultaria bastante complicado e ilegible ir escribiendo todos los niveles, a continuacion el contenido del archivo common2.coffee:

1 window['Framework1'] = {} 2 #window['Framework1.Utilities'] = {} 3 window['Framework1.GlobalMessage'] = {} 4 5 class Framework1.GlobalMessage 6 say_hello: () -> 7 alert "Hello Method 2"

El contenido del archivo index.cshtml es el siguiente:

1 <script type="text/javascript"> 2 3 $("#btnDemo").click(function () { 4 var gm = new Framework1.GlobalMessage(); 5 gm.say_hello(); 6 }); 7 </script>

Solucion 3

Finalmente, encontre una solucion “mas adecuada” y que segun lo que lei es la que debe usarse cuando se utiliza Node.js, entonces aqui tenemos el codigo del archivo common3.coffee:

1 root = exports ? this 2 root.Framework2 = 3 Utilities: {} 4 GlobalMessage: {} 5 6 class Framework2.GlobalMessage 7 say_hello: () -> 8 alert "Hello Method 3"

El contenido de archivo index.cshtml, es el siguiente:

1 <script type="text/javascript"> 2 3 $("#btnDemo").click(function () { 4 var gm = new Framework2.GlobalMessage(); 5 gm.say_hello(); 6 }); 7 </script>

Si alguno tiene algun comentario u observacion a este codigo es mas que bienvenido, muchas gracias.

Aqui el archivo comprimido de la solucion:

Posted: 19/3/2012 22:49 por Enrique Ortuño | con 1 comment(s)
Comparte este post:

Comentarios

Tecnocrata ha opinado:

Sabian que Codeplex ahora soporta Git como DVCS? ( www.infoworld.com/.../application-development

# March 24, 2012 3:17 PM