Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

  1. #1
    Membre habitué Avatar de the-destroyer
    Homme Profil pro
    Étudiant
    Inscrit en
    mars 2009
    Messages
    204
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 24
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : mars 2009
    Messages : 204
    Points : 125
    Points
    125

    Par défaut [Framework] Présentation de Dynamique.js

    Bonjour,

    Cela fait un moment que je ne suis pas venu ici


    Mais à l’invitation de Vermine, je viens vous parler d’un projet que j’ai réalisé étant plus jeune.

    Il s’agit d’une bibliothèque JavaScript, simplement nommé "Dynamique", que j’ai commencé à l’âge de 14 ans.
    A cette époque, je commençais l’apprentissage du JavaScript, après avoir visité le html/css/php, à travers des livres et autres sites tels que Développez.


    Mon objectif était de créer une bibliothèque permettant la mise en place de manière simple et rapide d’une solution souhaitée.
    De par l’existence de JQuery, mootools ou autres Frameworks (certains étant jeunes à l’époque), vous me direz sûrement, « Mais à quoi bon réinventer la roue ? ».

    Il est vrai que dans un domaine non-commercial comme le JavaScript où le code peut être récupéré et utilisé aisément (bien qu’existent les licences), il n’y a pas d’intérêt à sortir un produit similaire à ce qui existe sur le marché, sauf si cela apporte une innovation ou des performances.
    Et bien ce fut mon objectif : ajouter des rayons à ma roue et la rendre plus ronde qu’elle ne l’est. C’est à partir de là que le codage a commencé !


    De manière « conventionnelle », j’ai classé mes scripts en :
    - Modules : ensemble de scripts qui permettent la création de PlugIn
    - PlugIns : ensemble de scripts qui permettent la création d’application
    - Outils : ensemble de scripts qui permettent la création de module ou PlugIn et qui peuvent aussi être exploités de manière indépendante.

    Tout naturellement, j’ai commencé par la création des modules puis des plugIns, bien qu’à cette époque, je n’avais pas encore défini cette classification des scripts que j’écrivais.
    Mes principaux modules sont : Selecteur DOM, requête Ajax, Animation, traitement du DOM.
    Je dis « mes principaux » car ce sont ceux qui sont stables et bien finalisés. D’autres, tels que traitement CSS, script de compatibilité et création d’un moteur 3D, au contraire, méritent encore « quelques » heures de travail.

    Mes plugIns sont pour l’instant les plus traditionnels : Accordéon, Checkbox, DragAndDrop, traitement de formulaire, transition d’image, subdivision d’image, sélection d’éléments DOM avec la souris. Et de même, de nombreux sont en développement : zoom sur images, menu en slide, redimensionnement d’éléments, organisation de tableaux (tel que l’explorateur windows) et édition de type WYSIWYG.

    Les outils sont directement incluent dans les modules et ne sont donc pas encore clairement référencés.


    Toutes ces heures de travaux m’ont permis de relever un certain nombre de notes de rapidité afin d’optimiser mes scripts.

    Avant de m’étendre plus sur le sujet, je souhaiterais savoir si vous trouveriez intéressant que je publie sur Développez mes travaux à travers des tutoriels/articles en ayant pour base le site de cette même librairie. Cela pourrait être un échange intéressant et donnerait un sens à ces milliers de lignes qui dorment dans mon PC !


    Merci d'avance !

    The-destroyer

    (Le choix de ce pseudo reste un mystère)

  2. #2
    Responsable Jeux-Concours

    Avatar de vermine
    Profil pro
    Inscrit en
    mars 2008
    Messages
    6 275
    Détails du profil
    Informations personnelles :
    Âge : 34
    Localisation : Belgique

    Informations forums :
    Inscription : mars 2008
    Messages : 6 275
    Points : 72 499
    Points
    72 499

    Par défaut

    Salut,

    Merci pour cette présentation.

    Oui, tu pourrais peut-être nous en montrer un peu plus sur le code pour que les membres donnent leur avis. Et si tout cela tient la route, nous pourrons envisager de créer articles/tutoriels/news à ce sujet comme nous l'avons déjà fait pour d'autres membres.

  3. #3
    Membre habitué Avatar de the-destroyer
    Homme Profil pro
    Étudiant
    Inscrit en
    mars 2009
    Messages
    204
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 24
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : mars 2009
    Messages : 204
    Points : 125
    Points
    125

    Par défaut Présentation de Dynamique.js : Ajax.js

    Oui bien sûr et puisqu’il faut bien commencer quelque part, je vais commencer par le module Ajax !

    Ce module reprend la technologie des XMLHttpRequest en y ajoutant des événements, propriétés et méthodes permettant une utilisation plus aisée de cette technologie.
    Je vais essayer par la suite de décrire les principales fonctions de ce module et vous invite à voir le code source en suivant le lien ci-dessous : http://dynamique.malloc.fr/

    Tout commence par la création d’une requête. Celle-ci se fait par la fonction Ajax.createRequest().
    Cette nouvelle requête est toujours créée via le modèle défini de base par le module et modifiable grâce à des fonctions que nous étudierons plus tard.

    A noter que les modules sont prévus pour fonctionner avec ou sans Dynamique (donc avec ou sans l’importation de Dynamique.js). Dans le premier cas, Ajax se situera dans window.Ajax, sinon elle se trouvera dans la librairie, soit au chemin : window.Dynamique.module.Ajax.

    Il est possible de personnaliser directement les paramètres d’une requête lors de sa création, et ceci de plusieurs manières :
    - Soit en utilisant un objet, chaque propriété de celui-ci va alors être copiée dans l’objet de la requête :
    Code js : Sélectionner tout - Visualiser dans une fenêtre à part
    Ajax.createRequest({ url : "test.html", format : "html", ... }); // Le modèle une fois copier pour créer notre nouvelle requête sera étendue des propriétés url et format
    - Soit en indiquant juste une chaine de caractères, la propriété portant ce nom va alors être supprimée :
    Code js : Sélectionner tout - Visualiser dans une fenêtre à part
    Ajax.createRequest("url"); // La propriété url de notre requête créé depuis le modèle est supprimée
    - Soit en indiquant deux arguments, tous deux étant une chaîne de caractère, une propriété portant le nom du premier argument aura alors pour valeur le second argument :
    Code js : Sélectionner tout - Visualiser dans une fenêtre à part
    Ajax.createREquest("url", "test.html");

    A noter que ce dernier mode de fonctionnement se retrouve dans de nombreux autres modules et plugIns.

    Une fois la fonction terminée, un objet représentant notre requête Ajax est renvoyée. C’est dans cet objet que l’on va indiquer tous les paramètres ou événements que l’on souhaite attribuer à notre requête. Si aucune personnalisation n’est faite, cet objet possède les propriétés suivantes :
    - Id : [Number], identifiant unique de la requête
    - State : [Number], état de la requête, de 0 à 11, voir ci-dessous
    - changeHeader : [Function], permet la modification des en-têtes de la requête, même fonctionnement que la fonction Ajax.createRequest()
    - changeProperty : [Function], permet de modifier les propriétés de la requête, même fonctionnement que Ajax.createRequest()
    - send : [Function], permet l’envoi de la fonction

    Avant de continuer, il faut préciser que le processus d’envoi d’une requête a ici été décomposé en 11 états suivant l’ordre chronologique d’une requête. Chacun d’eux possède son événement :
    - Création : « onCreate », appelé lors de la création d’une requête
    - Envoi : « onSend », appelé lors de l’envoi
    - Attente dans une liste : « onWaitingQueue », lorsque la requête attend dans une liste d’envoi (ce module prend en charge la gestion de liste d’attente de l’envoi mais je n’aurai pas le temps de la décrire ici).
    - En attente : « onWaiting », lorsque la requête est déclenchée avec un délai. (Ce module prend en charge l’envoi de requête différé mais je n’aurai pas le temps de la décrire ici.)
    - Initialisation : « onInit », lors de la construction « réel » de la requête avec récupération automatique, construction et encryptage des données (Par défaut, deux méthodes sont supportées : GET et POST avec récupération et mise en forme automatique des données, mais il est possible d'en rajouter ou d'en supprimer), mise en place du timeout, création des fonctions d’annulation de la requête etc…
    - Chargement : « onLoadStart », au lancement de la requête.
    - Réception des données : « onReceived », a la réception de données depuis le serveur (Attention son appel peut varier selon le navigateur ! cf. doc fonction onProgress)
    - Fin de chargement : « onLoadEnd », à la fin du chargement
    - Mise en forme : « onBuild », à la mise en forme des données reçues
    - Historique : « onHistory », à l’ajout de la requête dans l’historique choisi (Ce module prend en charge la gestion des historiques des requêtes aussi bien au niveau du navigateur client : par insertion dans l'historique du navigateur, qu'au niveau du javascript : sous forme de tableau, mais je n’aurais pas le temps de la décrire ici).
    - Fin : « onComplete », à la fin lorsque la requête est totalement finie et prête à être exploitée.
    Un événement complémentaire « onStateChange » est appelé lorsque la requête passe d’un état à un autre.
    Vous trouverez plus bas tous les événements pris en charge par le module.

    La fonction send est la fonction permettant de poursuivre l’envoi de la requête, si aucune erreur survient, celle-ci retourne un objet qui permet d’obtenir grand nombre d’informations sur la requête, ses propriétés et méthodes sont :
    - ‘abort’ : [Function|Number], permet d’arrêter l’envoi de la requête où, si la requête est déjà arrêtée, indique l’état auquel celle-ci s’est arrêtée [0-10].
    - ‘id’ : [Number], indique l’id de la requête lié à cette réponse.
    - ‘error’ : [Array], indique les erreurs survenues lors du traitement (je n’aurai pas le temps de décrire la gestion des erreurs ici).
    - ‘sendLength’ : [Number], indique le nombre de fois que la requête a été lancée.
    - ‘response’ : [undefined|Object], indéfini si la requête n’a pas atteint l’état 11 « onComplete », objet dans le cas contraire, contient la réponse mise en forme ainsi que l'entête de retour, la réponse sous format textuel etc...
    - ‘send’ : [Function], permet le renvoi de la requête.
    - ‘url’ : [String], indique l’url de destination.
    - ‘previousResponse’ : [Array], indique les réponses antérieures.
    - ‘load’ : [Object], contient l’ensemble des données sur le traitement temporel de la requête (début, fin, état, % de chargement etc…)
    - ’loadFromServer’ : [Object], contient l’ensemble des données sur le nombre d’octets chargés, restants, % d’avancement etc…, et l’ensemble des données sur l’avancement temporel de la requête étape par étape (début, envoi, connexion, traitement, réception, fin…)

    Mais bref, assez de discussions, passons maintenant à quelques exemples reprenant ce qui vient d'être décris :
    Code modifiant le modèle puis chargeant deux documents l'un de manière synchrone et l'autre de manière asynchrone :
    Code js : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    Ajax.setModel({method : ‘GET’, name : ‘test’, type : ‘synchrone’}) ;
     
    Var test1 = Ajax.createRequest("url", "test1.html") ;
    Var test2 = Ajax.createRequest("url", "test2.php") ;
     
    Var send1 = test1.changeProperty({
      onSend : function(){ console.log("Send !") ; } ,
      onSucces : function(){
         console.log("Réponse : " + send1.response.responseText);
         console.log(send1.loadFromServer.load.byteLoaded + " bit chargés en " + send1.load.time + "ms");
         console.log("Nbr erreur : " + send1.error.length);
      },
      onError : function(){ console.log("Erreur !") ; }
    }).send() ;
     
    Var send2 = test2.send({
      type : "asynchrone",
      onComplete : function() { console.log("Complete !"); }
    });

    Requête complexe envoyant des données de formulaire :

    Voici tout les événements supportées pas une requête :
    Code js : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    onCreateSucces
    onCreateFail
     
    onAddQueue
    onRemoveQueue
    onQueueMove
     
    onStateChange
    onreadystatechange
     
    onCreate
    onSend
    onWaitingQueue
    onWaiting
    onInit
    onLoadStart
    onReceived
    onLoadEnd
    onBuild
    onHistory
    onComplete
     
    onProgress
     
    onAlreadySend
    onOpened
    onHeadersReceived
    onLoading
    onDone
     
    onError
    onAbort
     
    onSucces
    onFail
    ifModified
    onUnknow
    onInfo
    onNoError
    onRedir
    onClientError
    onServerError
     
    onXXX (où XXX est un code possible retourné par le serveur, ex : 404)

    et voici toutes les propriétés pouvant personnaliser une requête :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
     
    //id
    name
     
    method
    url
    arg
    encode
    noCache
     
    withCredentials
    multipart
    mimeType
    header
     
    type
    user
    password
     
    useEval
    useParse
    useContext
    format
     
    savePreviousResponse
    maxPreviousResponse
     
    useHistory
    useBrowserHistory
     
    sendAsBinary 
    useQueue
    queuePriority
    isInQueue
     
    setTimeout
    clearTimeout
    getTimeout
    changeTimeout
    setInterval
    maxTimeout
    Si vous le voulez, je pourrais poursuivre en décrivant chacune d'entre elle afin de présenter plus grandement les capacités de ce code, mais quoi qu'il en soit, merci pour vos retours !

  4. #4
    Membre confirmé

    Homme Profil pro
    Développeur Web
    Inscrit en
    octobre 2007
    Messages
    676
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 38
    Localisation : Belgique

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : octobre 2007
    Messages : 676
    Points : 634
    Points
    634

    Par défaut

    Hello,

    Petits conseils, ainsi, au premier coup d'oeil...

    1. Ajoute le support des principaux modules loaders (AMD & co)
    2. Si tu veux avoir une chance que les gens se penchent dessus, crée-toi un compte GitHub (ou autre) et poste-le dessus, ce sera plus lisible et il sera aisé de te faire des suggestions d'améliorations
    3. On reproche souvent au JS d'être trop verbeux (même si c'est sacrément en train d'évoluer de ce coté), alors, tes propriétés, méthodes & variables sont clairement nommées... mais ne seraient-elles pas trop verbeuses?
    4. Sinon, linte ton code et garde, sous le coude, le bon vieux idiomatic.js


    Voilà, pour un premier jet...
    Afin d'obtenir plus facilement de l'aide, n'hésitez pas à poster votre code de carte bancaire

    Mon GitHub

    Une alternative à jQuery, Angular, Vue.js, React, ... ? Testez anticore, en quelques secondes à peine !
    (Contributions bienvenues)

  5. #5
    Membre habitué Avatar de the-destroyer
    Homme Profil pro
    Étudiant
    Inscrit en
    mars 2009
    Messages
    204
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 24
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : mars 2009
    Messages : 204
    Points : 125
    Points
    125

    Par défaut

    Merci pour ton retour !

    Je vais voir à mettre en place un GitHug comme tu le suggères afin d'y mettre la totalité des ressources de la librairie !

    Qu'entends-tu par "trop verbeux" ? Une simplification du nom des variables et de la structure objet du module serait à revoir ?

Discussions similaires

  1. Comment créer une présentation PowerPoint dynamique.
    Par Élèvecmontmorency dans le forum Powerpoint
    Réponses: 1
    Dernier message: 29/10/2012, 18h45
  2. Réponses: 3
    Dernier message: 10/07/2011, 20h52
  3. Réponses: 1
    Dernier message: 10/02/2008, 15h56
  4. Réponses: 2
    Dernier message: 19/01/2007, 23h54
  5. [Framework] Appel dynamique de fonctions
    Par hdd dans le forum Général Dotnet
    Réponses: 1
    Dernier message: 21/12/2006, 18h35

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo