Uid - framework javascript

Télécharger le projet
Commenter

Description

UID est encore en développement.

Je poste quand mémé pour me motiver a avancer, connaitre votre avis, et pourquoi pas rechercher des développeur pour créer les composants UI.

UID s'articule sur 3 classe.

UID.HTML.Document -> le singleton du document (l'espace de nom est par défaut ID, mais peux être modifié (voire source), UID.HTML.Element et UID.HTML.Collection

le systeme de class ressemble a celui du c++, permettant l'héritage multiple. Cependant les constructeur doivent être appelé manuellement.

le système évènementiel permet la délégation d'évènement, la combinaison d'évènement, aussi que d'autre pseudo évènement (voire source)

Les évènement DOMNodeInserted, DOMNodeRemoved, DOMAttributeModified, sont aussi pris en charge

Il reste pas mal de truc a faire, l'ajax, la gestion de dépendance, les animations, le xml, peut-etre une gestion multi navigateur du canvas (pour les graph) , et surtout les composants UI

j'ai inclue slickspeed, qui test la vitesse du sélecteur, et taskspeed, pour la vitesse des opérations du DOM.

comparé a jQuery , sur le sélécteur, je suis 2.5 fois plus rapide, et le DOM entre 2,5 à 5 fois plus rapide , en fonction du navigateur.

Si vous été intéressée pour m'aider a développer ce framework, hésitez pas

bye

Source / Exemple : 


<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
   <title>ID</title>
   <style>
   </style>

   <script type="text/javascript" src="UID/UID.js?documentspacename=ID&baspath=UID/"></script>
  
   <script type="text/javascript">
   /*
        les propriété ?documentspacename=$&baspath=UID définissent l'espace de nom du document , pour éviter tout conflit (par defaut ID) 
        pour baspath, quand le module ajax et require sera définit , elle indiquera ou chercher les ressources


       
  • /

   
   //quand le doc est pret
    ID.on('ready', function(){
        /*
            ID.get récupere un élément via un id, ou directment un noeud -> renvoie une noued étendue (UID.HTML.Element)


            
  • /

        
        /* création d'élément via une chaine , on peux passer aussi un objet ou un tableau mélangeant els deux possibilité
         syntaxe objet -> {
             tag : 'div',
             id : 'ok',
             style : {},//un objet ou une chaine
             items : []//les élémenet a inséré (la aussi un tableau , une chaine, objet , ou un noued)
         }


            
  • /

        var str = "";
		for(var i = 0; i<250; i++){
			str += "<ul id='setid" + i + "' class='fromcode'><li>one</li><li>two</li><li>three</li></ul>";
		}
		ID.get(document.body).append(str);
        
        /*
            ID.select séléctionne un ensemble de noeud via un sélécteur css -> renvoie une collection (UID.HTML.Collection)


            
  • /

        
        /*
           exemaple d'utilisation d'une méthode d'une collection


            
  • /

        for(var i = 0, n; 20 > i++;){
		    n = ID.select("ul").indexOf(ID.get('setid150'));
		}
		
		/*
           ajoute un évenement pour une collection   


            
  • /

		ID.select('ul > li').on('click', function(){})
		
		/*
           pluck permet d'apeler de créer un tableau a partir d'une propriété des éléments (pour le moment utilise getAttribute risque d etre modifie) 


            
  • /

		ID.select('ul').pluck('id');
		
		/*
            exemple de chainage du collection


            
  • /

		function emptyFunction(){}
	    ID.select("ul > li")
            .on("mouseover", emptyFunction)
            .setAttribute("rel", "touched")
            .un("mouseover", emptyFunction);
        
        /*
          example de création de table


            
  • /    

        var str = "";
		for(var i = 0; i < 40; i++){
			str += "<table class='madetable'><tr><td>first</td></tr></table>";
		}
		ID.get(document.body).append(str);
		ID.select(".madetable tr").append("<td>before</td>");   
        
        
        /*
          example de création de de lien a partir d une collection


            
  • /

        ID.select(".fromcode > li").append("<a href='http://example.com'>link</a>") ;
        
        /*
          example de création (encore un :) )


            
  • /

        var str = "";
		for(var i = 0; i<500; i++){
			str += "<div rel='foo'>test</div>";
		}
		ID.get(document.body).append(str);
		
        /*
            exemple d'ajout de class , et de filtre depuis une collection (filter accepte aussi un sélécteur css )


            
  • /

        ID.select("div").addClass("added").filter(function(i){
			return i % 2 === 1
		}).addClass("odd");
		
        /*
            exemple d'ajout de style


            
  • /

		ID.select(".added").setStyle('background-color:#ededed;color:#fff ')
		
        /*
            exemple de suppression de style


            
  • /

		ID.select("div").removeClass("added")
		
		/*
        exemeple de délégation d évenement


            
  • /

		ID.select("div").on('click:relay(.added)', function(){})
		
        /*
        exemeple de combinaison d évenement


            
  • /

		ID.select("div").on(':combine(ctrl+click)', function(){})
        
        /*
        exemeple d évenement pour une touche


            
  • /

		ID.select("div").on(':keypress(up)', function(){})
	 });
     
  
     
   </script>
</head>
<body>
</body>
Télécharger le projet

Codes Sources

A voir également

S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Du même auteur (cs_Kimjoa)