[javascript] Busco Colaboradores en Proyecto GPL - Minimal JS Framework

Iniciado por AFelipeTrujillo, 12 Octubre 2010, 18:01 PM

0 Miembros y 1 Visitante están viendo este tema.

AFelipeTrujillo

Hola todos, estoy buscando personas interesadas en el medio para que me colaboren en la construccion de Framewaork en JS, yo se que ya hay bastantes pero la idea es hacernos uns propio, para hispanos !!! ... si se le miden le dejo un version del framework analicenla y comentan ... tan sera recibidas sus sugerencias y criticas

Les dejo el codigo:

Código (javascript) [Seleccionar]
/**
* @author 4ng3r
*/
Min={
   version: '1.0',
   name: 'Minimal JS Framework 2010',
   consola: 1,        
}

/**
* @alias Url
* @classDescription Clase desarrollada para manejar todas las propiedades del objeto location
*/

Min.Url = {
 /**
    * @method ubicacion
    * @return Object
    */
   ubicacion:function(){
   return window.location
 },
   /**
    * @method host
    * @return String
    */
   host:function(){
       return this.ubicacion.host;
   },
   /**
    * @method url
    * @return String
    */
   url:function(){
       return this.ubicacion.href;
   },
   /**
    * @method hostname
    * @return String
    */
   hostname:function(){
       return this.ubicacion.hostname;
   },
   /**
    * @method ruta
    * @return String
    */
   ruta:function(){
       return this.ubicacion.pathname;
   },    
   /**
    * @method hash
    * @return String
    * @Description retorna un String como todo lo que esta despues del # en la URL
    */
   hash:function(){
       return this.ubicacion.hash;
   },    
   /**
    * @method puerto
    * @return String
    */
   puerto:function(){
       return this.ubicacion.port;
   },    
   /**
    * @method protocolo
    * @return String
    */
   protocolo:function(){
       return this.ubicacion.protocol;
   },    
   /**
    * @method variables
    * @return String
    * @Description retorna un String como todo lo que esta despues del ? en la URL
    */
   variables:function(){
       return this.ubicacion.search;
   },
   /**
    * @method obtenerVariables
    * @return Void
    * @Description Retorna las variables con su respectivo valor
    */
   obtenerVariables:function(){
     Url = Min.Url.url();
   Url = Url.replace(/.*\?(.*?)/,"$1");
   Variables = Url.split ("&");
   for (i = 0; i < Variables.length; i++) {
          Separ = Variables[i].split("=");
          eval (Separ[0]+'="'+Separ[1]+'"');
   }
 },
   /**
    * @method verResumen
    * @return String
    * @Description retorna el resumen del objeto Location
    */
   verResumen:function(){
       var cadena = "<b>Nombre del HOST: </b>"+this.host()+"<br>";
       cadena += "<b>Ubicacion: </b>"+this.url()+"<br>";
       cadena += "<b>Ruta: </b>"+this.ruta()+"<br>";
       cadena += "<b>Ver Hash: </b>"+this.hash()+"<br>";
       cadena += "<b>Ver Puerto: </b>"+this.puerto()+"<br>";
       cadena += "<b>Ver Protocolo: </b>"+this.protocolo()+"<br>";
       cadena += "<b>Ver Variables: </b>"+this.variables()+"<br>";
       return cadena;
   },
   /**
    * @method redireccionar
    * @param String url
    */
   redireccionar:function(url){
       if(Min.valiciones.esUrl(url)){
           this.ubicacion.assign(url);    
       }else{
           if(Min.consola){
               alert('URL no valida: '+url);
           }            
       }
   },
   /**
    * @method remplezarURL
    * @param Strin url
    * @Description remplazar la pagina actual a otra, borrandola del historial
    */
   remplezarURL: function(url){
       if(Min.valiciones.esUrl(url)){
           this.ubicacion.replace(url);    
       }else{
           if(Min.consola){
               alert('URL no valida: '+url);
           }            
       }        
   },
   /**
    * @method recargar
    */
   recargar:function(){
       this.ubicacion.reload();
    }    
}

Min.valiciones={
   /**
    * @method esString
    * @param Strin str
    * @return Boolean
    */
   esNumero:function(str){
       return !isNaN(str);
   },
   
   /**
    * @method esUrl
    * @param Strin url
    * @return Boolean
    */
   esUrl:function(url){
     var str = new String(url);
       var re=/^http:\/\/\w+(\.\w+)*\.\w{2,3}$/;
       return re.test(str);
   },
   /**
    * @method validarCampoCorreo
    * @param String email
    * @return Booblean
    */
   esEmail:function(email){
     var str = new String(email);
   if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(str)){
     return true;
   }else {
     return false;
   }
 },
 /**
    * @method esHora
    * @param String hora
    * @return Booblean
    * @example var bool = Min.valiciones.esHora("12:00 AM");    //true
    */
 esHora:function(hora){
   var er_fh = /^(1|01|2|02|3|03|4|04|5|05|6|06|7|07|8|08|9|09|10|11|12)\:([0-5]0|[0-5][1-9])\ (AM|PM)$/
    if( str == "" ){
     return false
    }
    if(!(er_fh.test(hora))){
     return false
    }
    return true
 },
 /**
    * @method esFecha
    * @param String fecha
    * @return Booblean
    * @example var f = Min.valiciones.esFecha("12-11-2009"); //true    
    */
 esFecha:function(fecha){
   var Fecha= new String(fecha);
     var RealFecha= new Date();
     var Ano= new String(Fecha.substring(Fecha.lastIndexOf("-")+1,Fecha.length));
     var Mes= new String(Fecha.substring(Fecha.indexOf("-")+1,Fecha.lastIndexOf("-")));
     var Dia= new String(Fecha.substring(0,Fecha.indexOf("-")));
     if (isNaN(Ano) || Ano.length<4 || parseFloat(Ano)<1900){
         return false;
   }
     if (isNaN(Mes) || parseFloat(Mes)<1 || parseFloat(Mes)>12){
         return false;
     }
     if (isNaN(Dia) || parseInt(Dia, 10)<1 || parseInt(Dia, 10)>31){
         return false;
     }
     if (Mes==4 || Mes==6 || Mes==9 || Mes==11 || Mes==2) {
         if (Mes==2 && Dia > 28 || Dia>30) {
            return false;
       }
   }
 return true;
 },
 /**
    * @method tieneNumeros
    * @param String str
    * @return Booblean
    */
 tieneNumeros:function(str){
   var numeros="0123456789";
   return this.comparacion(str,numeros);
 },
 /**
    * @method tieneMinusculas
    * @param String str
    * @return Booblean
    */
 tieneMinusculas:function(str){
   var letras="abcdefghyjklmnñopqrstuvwxyz";
   return this.comparacion(str,letras);
 },
 /**
    * @method tieneMayusculas
    * @param String str
    * @return Booblean
    */
 tieneMayusculas:function(str){
   var letras="ABCDEFGHYJKLMNÑOPQRSTUVWXYZ";
   return this.comparacion(str,letras);
 },
 /**
    * @method comparacion
    * @param String str
    * @param String patron    
    * @return Booblean
    * @description Esta funcion busca en la cadena si existe un patron    
    */
 comparacion:function(str,patron){
   for(i=0; i<str.length; i++){
     if (patron.indexOf(str.charAt(i),0)!=-1){
        return true;
     }
   }
   return false;
 }
}

Min.vector={
   /**
    * @method crearArreglo
    * @param Object o
    * @return Array
    */
   crearVector:function(o){
       if ((typeof o) == "object") {
           var tmp = new Array()
           for(item in o){
               tmp[item]=o[item];
           }
           return tmp;    
       }
       return null;    
   },
   /**
    * @method agregar
    * @param Array vector
    * @param String Item || Number Item
    * @param Object valor (Number, Boolean, String)
    */
   agregar:function(vector,item,valor){
       if ((typeof vector)=="object"){
           vector[item]=valor;    
       }else{
           return null;
       }        
   },
   /**
    * @method eliminar
    * @param Array arreglo
    * @param String Item || Number Item
    */
   eliminar:function(vector,item){
       if ((typeof vector) == "object") {
           vector[item]=null;
       }        
   },
   /**
    * @method logitud
    * @param Array arreglo
    * @return Number
    */
   logitud:function(vector){
       if ((typeof vector) == "object") {
           return vector.length;
       }
   },    
}

Min.DOM={
   documento: document,
   /**
    * @method obtenerElementoID
    * @param String id
    * @return Object
    */
   obtenerElemento:function(id){
       return Min.DOM.documento.getElementById(id);
   },
   /**
    * @method DOMCompleto
    * @param Function f
    */    
   DOMCompleto:function(f){
       Min.Ventana.ventana.onload=function(){
           f();    
       }
   },
   /**
    * @method obtenerPrimerHijo
    * @return Object
    */
   obtenerPrimerHijo: function(){
       return Min.DOM.documento.firstChild;
   },
   /**
    * @method obtenerUltimoHijo
    * @return Object
    */
   obtenerUltimoHijo: function(){
       return Min.DOM.documento.lastChild;
   },
   obtenerPadre:function(el){
       return el.parentNode;
   },
   /**
    * @method obtenerBody
    * @return Object
    */
   obtenerBody:function(){
       return document.getElementsByTagName('body')[0];
   },
   /**
    * @method insertarElemento
    * @param object padre
    * @param object hijo
    */
   insertarElemento:function(padre,hijo){
       return padre.appendChild(hijo);
   },
   
   agregarEvento:function(obj,evento,funcion){
     var n = Min.Navegador.obtenerNavegador();
     if(n==1){
       obj.addEventListener(evento,funcion,false);
     }
 }
}

Min.Ventana={
   ventana: window,
   ancho: window.screen.width,
   alto: window.screen.height,
   /**
    * @method moverCapas
    * @param String el
    */    
   moverCapas: function(el){
       this.naveador=Min.Navegador.obtenerNavegador();
       this.elemento=el;
       this.comenzarMovimiento=function(){
           var elMovimiento=document.getElementById(this.getId());
           elMovimiento.style.position="relative";
           elMovimiento.onmousedown=function(event){
               cursorComienzoX=event.clientX+window.scrollX;
               cursorComienzoY=event.clientY+window.scrollY;
               document.addEventListener("mousemove",enMovimiento, true);
               document.addEventListener("mouseup",finMovimiento, true);
               elComienzoX=parseInt(elMovimiento.style.left);
               elComienzoY=parseInt(elMovimiento.style.top);
               function enMovimiento(event){
                   var xActual, yActual;
                   xActual=event.clientX+window.scrollX;
                   yActual=event.clientY+window.scrollY;
                   elMovimiento.style.left=(elComienzoX+xActual-cursorComienzoX)+"px";
                   elMovimiento.style.top=(elComienzoY+yActual-cursorComienzoY)+"px";
                   elMovimiento.style.opacity="0.4";
                   evitaEventos(event);
               }
               
               function finMovimiento(){
                   document.removeEventListener("mousemove", enMovimiento, true);
                   document.removeEventListener("mouseup", finMovimiento, true);
                   elMovimiento.style.opacity="1";
               }
               
               function evitaEventos(){
                   event.preventDefault();
               }
           }
       }
       this.getId=function(){
           return this.elemento;
       }
   },
   crearVentana:function(titulo,ancho,alto){
       alert(alto);
       var b = Min.DOM.obtenerBody();
       var d = document.createElement('div');
       d.setAttribute('id','ventana1');
       d.setAttribute('style','width: '+ancho+'px; height:'+alto+'px;');
       d.setAttribute('class','ventana');
       var panel = Min.DOM.insertarElemento(b,d);
       d = document.createElement('div');
       d.setAttribute('id','titulo');
       d.setAttribute('class','ventana');
   }
}

Min.Navegador={
   obtenerNavegador: function(){
       if(navigator.userAgent.indexOf("MSIE")>=0){
           return navegador=0;    
       }
       return navegador=1;    
   },  
 obtenerSistemaOperativo:function(){
   
 }    
}

Min.Efectos={
   /**
    * @method iluminarElemento
    * @param Number inicio
    * @param Number fin
    * @param Object el
    */
   iluminarElemento:function(inicio,fin,el){
       if(Min.valiciones.esNumero(inicio)&&Min.valiciones.esNumero(fin)){
           
       }
   }
}


Les dejo un Ejemplo:

Código (html4strict) [Seleccionar]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 <head>
 <script src="framework.js"></script>
 <script>
   Min.DOM.DOMCompleto(function(){
     var obj = Min.DOM.obtenerElemento('a');
     Min.DOM.agregarEvento(obj,"click",function(){
       alert("Este es un evento Click en el Objeto: "+this.id);
     });
   })
 </script>
 </head>
 <body>

   <div id="a">
       <h1>HOLA</h1>
   </div>
   
 </body>
</html>

AFelipeTrujillo

Diagrama de Despliegue

Esta es un propuesta de despliegue al framework


Detalles

Mi idea es desarrollar el Framework en tres capas, una a nivel de navegador la cual he llamado M_nus (se lee Minus se pronuncia Mainus) donde al desarrollador de software se le brindaran funciones que facilitara el uso y la comprensión del producto final. Básicamente es un interfaz en donde el usuario se sentirá mas agrado al programar en mJSf, como crear clases para maquetacion o componentes mas visuales como ventanas, alertas entre otros.

La segunda capa es el Framework que esta en producción actualmente, que no esta hecho es la parte de adaptadores que comunicara la librería con los diferentes Framework's que existen en la WEB

La ultima capa la denomine Base y contiene librerías ya desarrolladas que nos podrían ser útiles en la incorporación de plug-ins

FUENTE


bomba1990

tengo una preguntica, no es algo un poco descabellado hacer un framework de framework. porque eso fu elo que entendi de tu propuesta. ademas eso subiria bastante el peso de la pagina al tener que descargar varios frameworks a la ves. si me equivoco avisame.
"Cuando le di de comer a los pobres me llamaron santo, pero cuando pregunte porque los pobres eran pobres me dijeron comunista"

http://sosinformatico.blogspot.com/
http://www.publisnet.com.ve

AFelipeTrujillo

no es para nada descabellado, esta propuesta de arquitectura es para aplicaciones RIA esta centrada en desarrollar nuestra propia libreria y opcionalmente utilizar otras ya hechas no como algo funcional (osea que no dependamos de ella) sino como otra alternativa....

no se si respondi la duda ???

bomba1990

si te entiendo, tu planteas hacer algo como jquery o mootols. pero cual es tu interes personal  para crear una nueva??
"Cuando le di de comer a los pobres me llamaron santo, pero cuando pregunte porque los pobres eran pobres me dijeron comunista"

http://sosinformatico.blogspot.com/
http://www.publisnet.com.ve

Franki

Supongo que el interés está en aprender.

Obviamente no creo que mucha gente la utilizara ya que existen otros frameworks mucho más completos.

Además jQuery no es un simple framework javascript, también se amplia con jQuery UI para la construcción de RIAs y miles de plugins desarrollados por terceros.

Así que el proyecto me parece buena idea como superación profesional y aprendizaje. Incluso para crear un framework mínimo para ciertos proyectos, así que ánimo y suerte.

[D4N93R]

Al menos cuiden la ortografía, y más si va a ser algo que otras personas van a usar. Por ahí leí Valiciones, supongo que es Validaciones, no lo revisé completo. Se ve muy bien, suerte con el proyecto.