ES

www.codigo-facil.com > Mi framework en Javascript, la clase principal

Mi framework en JavaScript


Capitulo 2 : La clase base

Capitulos

Mi framework en Javascript, introduccion

Primer capitulo de una serie donde veremos en que consiste y como desarrollar nuestro propio framework en javascript.

Mi framework en Javascript, la clase principal

En este capitulo definiremos la base de nuestro framework, crearemos una clase base a partir de la cual iremos incluyendo todas las funcionalidades del framework.

Mi framework en Javascript, los selectores

Los selectores son uno de los pilares fundamentales a partir del cual se desarrollan el resto de funcionalidades del framework. En el capitulo que nos ocupa veremos que son exactamente y como implementarlos.

Mi framework en Javascript, la funcion CSS

En este capitulo veremos como implementar una funcion, que nos permita cambiar el aspecto de cualquier elemento incluido en nuestra pagina html, a traves de la utilizacion de las propiedades CSS.

Mi framework en Javascript, efectos parte 1

En este capitulo vamos a incluir una funcionalidad a nuestro framework que nos permita aplicar efectos para poder mover o cambiar de tamaño cualquier elemento de nuestro documento HTML.

Mi framework en Javascript, efectos parte 2

En este articulo vamos a desarrollar una funcion para nuestro framework, que nos permita crear efectos de transicion entre 2 colores diferentes.

Mi framework en Javascript, transparencias

En este articulo veremos como modificar la propiedad alpha de cualquier elemento de nuestro documento HTML, para crear asi transparencias haciendo mas artactivo el diseño de nuestra pagina.

Poniendo el primer ladrillo


Despues de la introduccion del primer capitulo es momento de pasar a la accion. Debido a la extension del codigo fuente resultante, prefiero empezar definiendo lo que sera el inicio de la clase principal, donde se apoya el framework, dejando un espacio libre para incluir las funcionalidades que tratare en capitulos posteriores.

Vamos a ver como es el inicio de nuestro framework :
  1. /* JavaScript Document
  2. Creacion de nuestro propio frameWork en JavaScript
  3. Guardar como fichero independiente e incluir en nuestro proyecto web
  4. */

  5. /*
  6. defino una funcion que se auto-ejecute una unica vez en el momento de
  7. incluir el archivo del framework, por eso su sintaxis particular
  8. */
  9. (function ()
  10. {
  11.  
  12. /*
  13. funcion para invocar al framework segun el tipo de parametro (selector)
  14. */
  15. function iniciar(selector)
  16. {
  17.   if (typeof selector == 'string')
  18.   {
  19.     /*
  20.     compruebo si el selector ya existe en la cache principal
  21.     en caso de que exista solo lanzo la busqueda del selector, sin
  22.     necesidad de volver a crear el objeto en la cache
  23.     */
  24.     if (apiJS.objs[selector])
  25.     {
  26.     //vuelvo a lanzar la busqueda en funcion al selector
  27.     apiJS.objs[selector].obj.get(selector);
  28.     //devuelvo el objeto refrescado
  29.     return apiJS.objs[selector]['obj'];
  30.     }
  31.     else 
  32.     {
  33.     /*
  34.     Inicio los valores principales de la cache del framework
  35.     */
  36.     apiJS.objs[selector]={};
  37.     apiJS.objs[selector]['obj'] = new ClassApiJS(selector);
  38.     apiJS.objs[selector]['selector'] = selector;
  39.     apiJS.objs[selector]['animate'] = {};
  40.     apiJS.objs[selector]['events'] = {};
  41.     /*
  42.     devuelvo el objeto para poder seguir ejecutando
  43.     operaciones si fuera necesario
  44.     */
  45.     return apiJS.objs[selector]['obj'];
  46.     }

  47.   }
  48.  
  49. }/* cerramos la funcion que inicia el framework */
  50.  
  51.  
  52.  

  53. /*============================
  54. Creamos la clase que sostiene el framework
  55. =============================*/
  56. var ClassApiJS = function(selector)
  57. {
  58.   this.timers = new Array();
  59.   this.conta = 1;
  60.   this.objs = new Array();
  61.   this.navign =null;
  62.   this.ajax = {};

  63.   /*
  64.   Funcion que detecta el navegador, fundamental para el Cross Browser
  65.   */
  66.   this.detectnavigator = function ()
  67.   {   
  68.     if (navigator.userAgent.indexOf('OmniWeb')!=-1) this.navign=0;
  69.     else if (navigator.userAgent.indexOf('Opera')!=-1) this.navign=4;
  70.     else if (navigator.userAgent.indexOf('Safari')!=-1) this.navign=3;
  71.     else if (navigator.userAgent.indexOf('Firefox')!=-1) this.navign=2;
  72.     else if (navigator.userAgent.indexOf('MSIE')!=-1) this.navign=1;
  73.     if (this.navign==null)this.navign=1;           
  74.   }

  75.   /*
  76.   ************************************************
  77.   Espacio reservado a incluir las funciones
  78.   que tratare en capitulos posteriores
  79.   ************************************************
  80.   */

  81.  

  82.   /*
  83.   ***********************************************
  84.   Fin del espacio reservado
  85.   ***********************************************
  86.   */

  87.    //detecto el navegador al invocar el framework
  88.   this.detectnavigator();

  89.   //si al lanzar el framework existe un selector se lanza la busqueda
  90.   if (selector)
  91.   {
  92.     this.get(selector);
  93.     this.selector=selector;
  94.   }

  95. }
  96. /*===========================
  97. Final de la Clase principal del framework
  98. ============================*/
  99.  
  100.  
  101.  

  102. /*
  103. creo una instancia general que sera el nucleo del framework,
  104. donde se apoya diversas funcionalidades como los timers
  105. para animaciones o la cache utilizada
  106. */
  107. apiJS=new ClassApiJS();
  108. apiJS.objs = {};

  109. /*
  110. Creo el famoso alias $ extendido en la
  111. gran mayoria de los frameworks */
  112. window.$ =  iniciar;

  113. /*
  114. Final de la funcion del principio que se autoejecuta
  115. */
  116. }());
Comentarios sobre el codigo :

Aunque esta es la base para poner en funcionamiento el framework, aun no es funcional, ya que faltaria implementar la funcion "get()". Esta funcion sera desarrollada en el siguiente capitulo, cuando veamos en que consiste los selectores.

Por lo demas destacar que el codigo se autoejecuta por si solo una vez incluido el framework en nuestro proyecto, creandose la cache principal llamada "apiJS", utilizada para animaciones y efectos, ademas de ejecutar funciones que no tengan que ver con los selectores.

Tambien se crea el alias "$" para poder lanzar la funcion "iniciar()" de una forma abreviada, y respetando la apelacion standar de los principales frameworks.

Podemos acceder al frameWork de 2 formas :
  1. Mediante el nucleo principal "apiJS" , cuando queramos ejecutar una funcionalidad que no tenga que ver con los selectores.
  2. Mediante el alias "$", cuando queramos obtener o modificar algun elemento HTML del documento.
La funcion iniciar()

Antes de  definir la clase principal del framework "ClassApiJS" he definido la funcion "iniciar()". Esta funcion se encarga de comprobar la cache del nucleo del framework "apiJS" y comprueba si el selector que se pasa como parametro ha sido declarado o no, en caso de no existir se crea una instancia de este selector en la cache del nucleo del framework, y si ya existe, se lanza de nuevo la busqueda de elementos que coincida con el selector mediante el metodo "get(selector)". Como ya he comentado antes he dejado la implementacion de esta funcion para el siguiente capitulo.
La primera funcionalidad : detectar el navegador.

Como podemos observar en la definicion de la clase del framework, "ClassApiJS", existe una funcion llamada "detectnavigator" y que se encarga de detectar el navegador, esto sera importante en el desarrollo de las futuras funciones para poder diferenciar entre un navegador u otro.
Y las nuevas funcionalidades ?

A lo largo de los diferentes capitulos voy a ir añadiendo las principales funcionalidades del framework, pero dado la extension del codigo fuente final, he creido conveniente dejar este codigo inicial como la base del proyecto, y en los futuros articulos unicamente publicare el codigo correspondiente a la nueva funcion a añadir. Es por este motivo que he dejado un espacio (marcado con comentarios) donde unicamente habra que incluir el codigo correspondiente a la nueva funcionalidad. De esta forma se hace mas comodo para todo el mundo la implementacion de modificaciones o añadidos.
Como incluir el framework en nuestro proyecto ?

Basta con incluir el codigo fuente en un archivo independiente (appiJS.js) enincluirlo mediante las etiquetas <script></script> :

  1. <script src="./apiJS.js"></script>
Bueno y hasta aqui el capitulo de hoy, se ha quedado pendiente la implementacion de la funcion get(), para empezar a poder utilizar el framework, pero no os preocupeis en el proximo capitulo estara dedicado a los selectores y ya podremos ejecutar el framework y realizar los primeros expermentos.

Como siempre digo gracias a tod@s por vuestro apoyo, espero que mis aportaciones sean de vuestro agrado y nos vemos en futuras publicaciones.

Ultimas noticias

Crea tu propio framework en javascript

Recopilacion de articulos donde mostrare paso a paso como podemos crear nuestro propio framework en javascript, totalmente funcional y listo para ser utilizado en nuestros futuros proyectos.

Para mas informacion :

Tutorial para crear tu propio FrameWork en JavaSript

Más información
13/12/2013 11:42:57

Como crear una DLL en delphi?

En esta serie de 2 capitulos veremos como crear y utilizar una DLL en Delphi.

Abajo os dejo los enlaces a estos 2 capitulos que componen este mini tutorial, espero que sea de vuestro agrado :

Capitulo 1 : Creacion y utilizacion de una DLL

Capitulo 2 : Creacion de un formulario dinamico utilizando una DLL
Más información
19/09/2013 17:35:59

Ya puedes publicar tu opinion

A partir de ahora ya puedes comentar todas las publicaciones que encuentres en el portal.

Podras opinar tanto si algo te gusta como si no, o si crees que es conveniente completar alguna publicacion, ya que la encuentras incompleta o erronea.

O simplemente por si nos quieres felictar por algo bien hecho :-).

Valoraremos cualquier critica que nos puedas hacer.
Más información
20/05/2013 15:30:10

Tutorial PHP5

Fundamentos de la programacion orientada a objetos
Un interesante tutorial repartido en una serie de capitulos donde se tratan los conocimientos basicos de la programacion orientada a objetos (POO) en PHP5.

Para mayor informacion siga el siguiente enlace :

Tutorial POO en PHP

Más información
04/09/2013 15:44:29
2