begin process at 2012 02 14 12:39:19
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > 

Code

 > 

Divers

 > UID - FRAMEWORK JAVASCRIPT

UID - FRAMEWORK JAVASCRIPT


 Information sur la source

Note :
Aucune note
Catégorie :Divers Classé sous :framework, librairie, dom Niveau :Expert Date de création :09/12/2009 Date de mise à jour :10/12/2009 17:47:35 Vu / téléchargé :3 759 / 170
Auteur : Kimjoa

Ecrire un message privé
Commentaire sur cette source (12)
Ajouter un commentaire et/ou une note

 Description

Cliquez pour voir la capture en taille normale
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

  • <!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> 
<!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>


 Fichier Zip

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip


 Historique

10 décembre 2009 17:48:01 :
pour une meilleur maintenance du code, j'ai limité au maximum la compilation des fonctions ...

 Sources du même auteur

Source avec Zip SYSTÈME DE REQUÊTE SUR DES DONNÉES JSON
Source avec Zip Source avec une capture MENU ANIMER HORIZONTALE OU VERTICAL , ACCÈSSIBLE SANS JS (SA...
Source avec Zip MARQUEE VERSION2 COMPATIBLE MOOTOOLS, JQUERY, PROTOTYPE ET S...
Source avec Zip DOMBUILDER
Source avec Zip GETELEMENTSBYREG
Toutes les sources de Kimjoa

 Sources de la même categorie

COLONNES ADAPTABLES EN HAUTEUR par dronoide
Source avec Zip VECTEURS ET MATRICES: OUTILS GRAPHIQUES UTILES par william voirol
Source avec Zip Source avec une capture HTML5 PLAYER par kazma
Source avec Zip Source avec une capture SCROLLBAR PERSONNALISABLE par kazma
Source avec Zip INFO BULLE par RudiRatlos
Toutes les sources de la catégorie Divers

 Sources en rapport avec celle ci

DHTML IE FILTRE DÉGRADÉ (OUTIL HTML POUR DÉVELOPPEUR) par internetdev
Source avec Zip PAF (PHP / AJAX FRAMEWORK) par Arto_8000
Source avec Zip TABLEAU HTML DYNAMIQUE AVEC JAVASCRIPT DOM par LogansRun
Source avec Zip Source avec une capture UN CHRONOMETRE EN SVG+JAVASCRIPT par coucou747
DÉBUT D'UNE LIBRAIRE DE GESTION AVANCÉE DU STYLE ... par LocalStone

Commentaires et avis

Commentaire de jdmcreator le 12/12/2009 15:16:34

Je ne sais pas, mais  unescapeHTML pourrait peut-être se faire  d'une autre façon, qui selon moi éviterait les exceptions (mm si je n'en ai pas encore trouvé ^^)

  unescapeHTML : function(){
        var el = document.createElement('div'), ret;
try{
        el.innerText=this;
}
catch(e)
{
       el.textContent=this;
}
        ret = el.innerHTML;
        el = null;
        return ret;  
    },`

Ce n'est qu'une proposition et je n'ai pas testé, mais ça devrait fonctionnner. Je continue à regarder ;)

Commentaire de Kimjoa le 12/12/2009 16:02:55

salut jdmcreator, j'ai testé t'as contribution, et en effets, c'est la méthode couramment utilisé.... merci ;)

pour éviter les exception on peux en tester l'existence de la méthode

if(el.innerText)...
else if(el.textContent)...
else ...

je vais inclure la fonction dans le code.

Sinon, pour le moment je n'ai pas fait de teste, il y a donc beaucoup de bug....

Je commence le débogage une fois que le module Animation sera fait. Ensuite la doc....

Si tu veux , je peux inclure ton nom dans la source ;) ?

a++

Commentaire de jdmcreator le 12/12/2009 16:04:57

Non ce n'est pas nécessaire ;) Mais je n'avais pas pensé à ta manière ;)

Commentaire de jdmcreator le 13/12/2009 20:33:42

Hmmm... un autre commentaire

Je n'aime pas trop de manière de trouver le navigateur. Il suffit qu'on change le userAgent pour que sa trompe... Quelques trucs :

IE : il suffit de tester document.all
Safari : que navigator.vendor contienne Apple
Chrome : tester window.google
Firefox : À l'exception d'un script assez volumineux que j'avais écrit, il n'y a pas de façon simple d'en être sûr. Si tu veux, je peux chercher dans mes dossiers ce script
Opéra : window.opera ^^
Konqueror : que navigator.vendor contienne KDE

Petit lien que j'ai trouvé qui reprend certaines de mes techniques : http://www.quirksmode.org/js/detect.html

Commentaire de jdmcreator le 13/12/2009 20:55:42

Je pense avoir trouver une manière rapide pour Firefox ^^

for (propriete in window.navigator) {
if(propriete=="securityPolicy")
{return true;break;}
return false;
}

On pourrait aussi tester des tas de petites fonctions qui n'existe (il semble) que sur Firefox  comme GeckoActiveXObject, XPCNativeWrapper, XPCSafeJSObjectWrapper

Mais selon mes recherches, GeckoActiveXObject existe aussi sur netscape, c'est donc possible qu'il existe sur d'autre navigateur utilisant Gecko, il n'existe toutefois pas sur Maxthon

XPCSafeJSObjectWrapper n'existe que sur Firefox 3, donc à proscrire

Mais XPCNativeWrapper pourrait peut-être fonctionner (https://developer.mozilla.org/En/XPConnect_wrappers#XPCWrappedNative)

Je continue de regarder, je trouve cela très interessant

Commentaire de Kimjoa le 14/12/2009 13:02:17

salut jdmcreator!

J'ai déjà entendue parler de se problème concernant le userAgent.

Pour moi ce n'en n'est pas vraiment un, étant donnée que c'est une variable (d'ailleurs ca devrait être une constante) native, le développeur ne devrait surtout pas y toucher. De plus pour les versions j'utilise navigator.appVersion qui pose le même probleme.

Même si le développeur change cette variable (kel intérêt ?), si UID est chargé avant, ca devrait pas poser de problème.

Je reste donc sur cette technique, à moin que tu me pondes un truc avec la détection des navigateurs et leurs versions....;)

Le code est ouvert, sur tu propose qu'elle que chose , j'y inclurait ton nom bien sur :)

Sinon tu peux le voire dans le code j'essaye de réduire l'utilisation des variables du browser, en utilisant des tests conditionnelle sur l'existence d'une fonction...Mais parfois c'est impossible, comme pour le domReady, ou les offsets.


a++

Commentaire de jdmcreator le 15/12/2009 00:37:36

En fait, l'userAgent n'est pas modifié par le développeur mais par le navigateur lui-même. On utilise de moins en moins userAgent puisqu'il peut maintenant offert dans plusieurs navigateurs de le modifier, ce qui permet, par exemple, d'aller sur un site réservé à IE... je ne sais pas trop si je suis clair ^^

Commentaire de Kimjoa le 15/12/2009 13:04:59

un site réservé a ie ? j'en connais pas, mais doit en avoir pas mal en intranet. Sinon pour une librairie cross browser, c'est pas logique de faire un site avec, juste pour ie ... Mais si t'as un exemple !!

Sinon y'a chrome frame , qui permet de faire tourner webkit dans ie, mais il y a une procédure spéciale que j'ai pas encore implémenté.. peux-être aussi IETab, mais là c'est tros spécifique pour que j'en tienne compte.

Sinon il reste les navigateurs de téléphone portable , mais là, j'ai pas de portable avec navigateur :) , j'arrive pas à trouver leur équivalent pc, et pour le moment la librairie est beaucoup tros lourde ...

Commentaire de Zestyr le 24/12/2009 11:43:01

Slt,
Je suis entrain de créer un objet de gestion de pseudo fenetres:
Pw. J'ai fini la structure: j'ai plus qu'a rajouter des méthodes hérité par les objet enfants.

Structure:
var maFenetre = new Pw(100,50,"mon titre");
var handle_f = maFenetre.handle.all;

var barre_de_deplacement = maFenetre.move;
  var handle_bdp = barre_de_deplacement.handle.all;
  var titre = barre_de_deplacement.handle.title;

var contenu = maFenetre.cont;
  var handle_contenu = contenu.handle.all;

Commentaire de Kimjoa le 24/12/2009 13:24:57

salut , heu j'ai pas bien compris en faite? tu utilises UID?

Commentaire de Zestyr le 24/12/2009 14:19:43

Non, c'est un objet que j'ai programmé.
Enfait je crois que j'ai pas bien compris les l'utilité de ton fw

Commentaire de Kimjoa le 29/12/2009 20:06:57

c'est un fw qui propose une abstraction commune des manipulation du dom et plus généralement du js, entre les différents navigateurs, un peu comme jquery, prototype ou mootools. Cependant j'irais pas aussi loin que des fw telle que dojo, ext ou qooxdoo, qui sont plus orienté vers des applications web que pour simplement des sites web...

perso, je pense que si il s'agit de faire une vrai appli, les html + js ne pas assé puissant, ou du moin et tant donnée que le référencement n'est plus un objectif, mieux vaut utiliser du flex ou du java....

voilà!! je viens de me remettre au développement de ce fw, une mise a jour prochainement !!

 Ajouter un commentaire


Discussions en rapport avec ce code source dans le forum

[DOM MOZILLA]urgent [ par dionysos6868 ] bonsoirvoila j'ai cadocument.getElementById("cadremenu").style.top=posYmenu+24;cela marche tres bien sou IE mais pas sous MOZILLAQuelqu'un pourrais m' probleme mozilla [ par javert ] salut, je vient de faire un petit calendrier en js, mais il ne fonctionne malheureusement pas sous mozilla. impossible de lui faire comprendre la li probleme triangle de pascal [ par tofismagic ] 1 - D&#233;terminer l&#8217;algorithme permettant de calculer les coefficients du triangle de Pascal<?xml:namespace prefix Acceder aux éléments d'un iframe via le DOM [ par Pinky84 ] Je voudrais savoir comment avoir acc&#232;s aux &#233;l&#233;ments d'un iframe avec le DOM. Donc pas de function qui renvoie le code dla page. J'aimer [DOM] Connaître la position d'un Childnode par rapport à ses siblings [ par mentral ] Bonjour.Je cherche la fonction ou l'attribut qui, appliqu&#233;(e) &#224; un childnode, me renvoie sa position. Exemple : &nbsp;&nbsp;&nbsp; &lt;balis Javascript+DOM [ par naima2005 ] Bonjour, j'ai besoin de savoir comment récuperer la position du premier caractère et celle du dernier d'une chaine de caractère selectionnée d'une pag stoker les elements d'un fichier xml par le dom sous xul de firefox? [ par idabdou ] salut,  je travaille sur le sujet suivant : la visualisation d'un fichier xml sur firefox en utilisant xul et le dom, je n'arrive pas à ouvrir le fich Probleme de DOM (besoin d'un expert :p) [ par MATHIS49 ] Bonjour à tous !J'ai créé un formulaire visant a repartir des ressources pour une fonctions, j'ai donc utilisé DOM pour créé dynamiquement des champs Livre sur Javascript / DOM [ par el_teedee ] Salut les gens,voilà en parcourant rapidement le net, je suis tombé sur un site (http://www.quirksmode.org/) qui m'a paru pas mal fait.J'ai vu que l' Associer librairie externe ? [ par way2web ] Quelles sont les règles à respecter en vue d'associer une librairie externe au développement?


Nos sponsors


Sondage...

Comparez les prix


Archos Tablette PC ARNOVA ARNOVA 10 4GB
Entre 200€ et 210€

Visiter le guide achat

CalendriCode

Février 2012
LMMJVSD
  12345
6789101112
13141516171819
20212223242526
272829    

Consulter la suite du CalendriCode

Photothèque

Photo Green Energy Solutions With Light Bulb Morphed Into LandscapePhoto Renewable Energy is Within Reach
Photo Landscape of a Sunrise in Kauai Hawaii 

Visiter la photothèque
 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,827 sec (4)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)