[PHPBB2] Réduire les appels jquery, $(function(){ et $(document)

Bonjour à tous, 
bien qu'ayant optimisé mon forum, il est un point que je n'arrive absolument pas à maitriser : minimiser les appels jquery, $(function(){ et et $(document) sur l'ensemble de mes scripts.

Une âme charitable voudrait bien me donner un petit cours sur le sujet ?

je donne des scripts à titre d'exemple :

Code:

/*Div visible que par le staff*/
$(function(){0==_userdata.user_level&&$(".visibleadmins").remove()});


/*POSTTCARD*/
$(function(){"DEVELOPED BY ANGE TUTEUR";"NO DISTRIBUTION WITHOUT CONSENT OF THE AUTHOR";"ORIGIN : http://fmdesign.forumotion.com/t515-post-cards#7069";var a=$(".postbody a"),t=$(".bodylinewidth")[0]?0:document.getElementById("wrap")?1:$("div.pun")[0]?2:document.getElementById("ipbwrapper")?3:"badapple";if("badapple"==t||!window.JSON||!window.localStorage){var r='The plugin "fa_post_card" could not be executed because : ';return"badapple"==t&&(r+="\nYour forum version is not supported."),window.JSON||(r+="\nJSON is not supported by your browser"),window.localStorage||(r+="\nThe Storage API is not supported by your browser."),void(window.console&&console.error?console.error(r):alert(r))}window.fa_post_card={summary_length:300,cache_time:36e5,lang:{error:{name:"Error",title:"POST NOT FOUND",summary:"Sujet inacessible."},no_name:"Anonyme",no_avatar:"http://2img.net/i/fa/invision/pp-blank-thumb-38px.png",no_title:"Titre incorrect",no_summary:"Aucun résumé de disponible",no_origin:"Sujet indisponible",tooltip:"Cliquer pour voir le sujet"},a:a,index:-1,quota:a.length,version:t,select:{content:[".postbody > div",".content > div",".entry-content > div:first > div",".post-entry > div:first"],title:[".postdetails:has(.sprite-icon_miniposted)",".topic-title",".posthead a",".postbody-head a"],avatar:[".poster-profile a img",".postprofile dt img",".user-basic-info img:first",".postprofile dt img"],username:[".name",".postprofile dt > strong",".username",".postprofile dt > strong"]},sanitize:function(a){return a?a.replace(/<|>/gm,function(a){switch(a){case"<":return"<";case">":return">"}}):""},createCard:function(a,t,r){var e,o={username:t?$(fa_post_card.select.username[r],t).text():fa_post_card.lang.error.name,avatar:t?$(fa_post_card.select.avatar[r],t).attr("src"):fa_post_card.lang.no_avatar,title:t?$(fa_post_card.select.title[r],t).text():fa_post_card.lang.error.title,summary:t?$(fa_post_card.select.content[r],t).text():fa_post_card.lang.error.summary,origin:a.innerHTML},i=o.origin.replace(/.*?#(\d+)$/,"$1"),s=localStorage.fa_post_cards?JSON.parse(localStorage.fa_post_cards):{};for(e in o)o[e]=fa_post_card.sanitize(o[e]);a.className+=" fa_post_card",a.title=fa_post_card.lang.tooltip,a.innerHTML='<div class="fa_card_inner"><div class="fa_card_left"><img class="fa_card_avatar" src="'+(o.avatar?o.avatar:fa_post_card.lang.no_avatar)+'"/><div class="fa_card_username">'+(o.username?o.username:fa_post_card.lang.no_name)+'</div></div><div class="fa_card_right"><div class="fa_card_title"><h2>'+(o.title?o.title:fa_post_card.lang.no_title)+'</h2></div><div class="fa_card_summary"><p>'+(o.summary?o.summary.length>fa_post_card.summary_length?o.summary.slice(0,fa_post_card.summary_length)+"...":o.summary:fa_post_card.lang.no_summary)+'</p></div><div class="fa_card_origin">'+(o.origin?o.origin.replace(/http:\/\//,""):fa_post_card.lang.no_origin)+'</div></div><div class="fa_card_clear"></div></div>',s[a.host]||(s[a.host]={}),s[a.host]["card"+i]={data:a.innerHTML,expires:+new Date},localStorage.fa_post_cards=JSON.stringify(s)},get:function(){var a,t,r=fa_post_card.a[++fa_post_card.index],e=localStorage.fa_post_cards?JSON.parse(localStorage.fa_post_cards):{},o=/#\d+$/;r&&o.test(r.innerHTML)&&o.test(r.href)&&(a=r.href.replace(/.*?#(\d+)$/,"$1"),t=$(".post--"+a)[0],e[r.host]&&e[r.host]["card"+a]&&e[r.host]["card"+a].data&&e[r.host]["card"+a].expires>+new Date-fa_post_card.cache_time?(r.className+=" fa_post_card",r.title=fa_post_card.lang.tooltip,r.innerHTML=e[r.host]["card"+a].data):t?fa_post_card.createCard(r,t,fa_post_card.version):$.get(r.href.replace(o,"")+"?change_version=prosilver",function(t){var e=$(".post--"+a,t)[0];fa_post_card.createCard(r,e,1)}).error(function(){fa_post_card.createCard(r)})),fa_post_card.index<fa_post_card.quota&&fa_post_card.get()}},fa_post_card.get()}),document.write('<style type="text/css">a.fa_post_card{font-size:12px;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:400;text-decoration:none!important;color:#333!important;background:#FFF;border:2px solid #4b7101;border-radius:14px;display:block;width:800px;max-width:100%;min-height:100px;overflow:hidden;position:relative;margin:3px 0}.fa_card_inner{margin-left:125px}.fa_card_left{  color: white!important;  text-align: center;background: #406001;  border-right: 1px solid #4b7101; position: absolute;  top: 0; left: 0; bottom: 0; width: 125px;  border-radius: 10px 0px 0px 10px;} .fa_card_avatar{height:50px;width:50px;position:absolute;top:50%;left:50%;margin:-35px 0 0 -25px;border-radius: 30px;}.fa_card_username{font-size:12px;font-weight:700;position:absolute;top:50%;left:0;right:0;margin-top:20px}.fa_card_title h2{color:#333;font-size:14px;font-weight:700;border:none;margin:0}.fa_card_summary p{font-size:12px;margin:0}.fa_card_origin{color:#999}.fa_card_origin,.fa_card_summary p,.fa_card_title h2{padding:3px 10px}.fa_card_origin,.fa_card_title h2,.fa_card_username{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.fa_card_clear{clear:both}</style>');
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              
/*ASSISTANT VIRTUEL*/
$(function() {
if($('a.nav[href^="/f55-"]').length) {
var u=$('tr[id^="p"]').length;
if(u==1)
{
    var p = {
    post: $('tr[id^="p"]')[0],
    auteur: $('span.name:first a[href^="/u"]').html(),
    link: $('span.name:first a[href^="/u"]').attr('href'),
    sujet: $('h1.cattitle').first().text(),
    annonce: "@ Assistant virtuel",
    staff: "Merci pour votre compréhension.",
    avatar: 'https://i62.servimg.com/u/f62/11/93/85/24/assist10.png',
    contenu: "Aucun modérateur n'est actuellement connecté.<br> Je signale votre sujet pour qu'il soit pris  en charge dans les plus brefs délais. "
    };
    $(p.post).next().after('
    <tr class="post "style="">
<td class="row1" width="150" valign="top">
<div id="profil_head2"title="Message généré automatiquement."></div>
<center> <span class="name"><span class="ombre2">'+p.annonce+'</span></span></center>
<div id="profil_body"><span class="Paolino2">Modérateur 24/24H</span><span class="postdetails poster-profile"><br>
<center><br><img class="M14_Avatar"src='+p.avatar+'>  </center>          
</span><br><img src="https://2img.net/i/fa/empty.gif" alt="" style="width:150px;height:1px"></div><div id="profil_foot2"></div></td>
<td class="row1" colspan="2" height="28" width="100%" valign="top"><table cellspacing="0" cellpadding="0" border="0" width="100%"><tbody>
<tr>
<td> <span class="postdetails2" style="float: left;color: #faf0f0;font-size: 14px;font-family: Verdana,Arial,Helvetica,sans-serif;"> <span oncontextmenu="return false"><i class="fa fa-comments" aria-hidden="true"></i></span> Message de modération<span oncontextmenu="return false"><i class="fa fa-cog fa-spin"></i></span>Sujet :'+p.sujet+'</span></td>
<td class="post-options" nowrap="nowrap" valign="top"></td>
</tr>
<tr>
<td colspan="2" class="hr"><hr></td>
</tr>
<tr>
<td colspan="2">
<div id="M14_postbody"class="postbody"><div class="altitude_encadrement">Bonjour  <a class="M14_Auteur"href='+p.link+'>'+p.auteur+'</a>,<br/>
'+p.contenu+'<br />
'+p.staff+'</div><div class="clear"></div></div><span class="gensmall"></span></td>
</tr>
<tr>
<td colspan="2">

<div class="signature_div"><div class="signa"style="height:250px"> <span oncontextmenu="return false"><img src="https://i63.servimg.com/u/f63/11/93/85/24/signat12.png" alt="Signature" ></span><br><br>
<div class="polski">
Quelques informations qui pourraient vous servir\u00a0 :
<p>
<a href="http://altitudetropicale.forums-actifs.com/t3670-heberger-une-ou-plusieurs-images-avec-servimg">Héberger une ou plusieurs images avec servimg.</a><br />
 </p>
 <p>
<a href="http://altitudetropicale.forums-actifs.com/t4052-heberger-des-images-depuis-la-version-mobile">Héberger des images depuis la version mobile.</a><br />
 <p />
 <p>
<a href="http://altitudetropicale.forums-actifs.com/t4051-le-systeme-des-forums-favoris">Le système des forums favoris.</a><br />
 <p />
 <p>

<a href="http://altitudetropicale.forums-actifs.com/t4057-systeme-a-onglets">Système\u00a0à\u00a0onglets</a><br />
 <p />
 <p>

<a href="http://altitudetropicale.forums-actifs.com/t4000-pagination-des-images-en-automatique">Pagination des images en automatique.  </a><br />
 <p />
 <p>

<a href="http://altitudetropicale.forums-actifs.com/t2322-centre-de-notification">Centre de notification.</a><br />
 <p />
</div> </div>
</div>
</tr>
</tbody></table></td>
</tr>
<tr class="post" style=""><td class="row2 browse-arrows" align="center" width="150" valign="middle"><a href="#top"><img  src="https://i39.servimg.com/u/f39/18/94/29/67/fleche14.png" alt="Revenir en haut"></a> <a href="#bottom"><img  src="https://i39.servimg.com/u/f39/18/94/29/67/fleche15.png" alt="Aller en bas"></a></td>
<td class="row2 messaging gensmall" height="28" width="100%"><table cellspacing="0" cellpadding="0" border="0"><tbody><tr><td valign="middle">
</td></tr>

</tbody></table></td></tr>

    ');
if($('span.name:contains("Invité")').length)
      {$('a.M14_Auteur').removeAttr('href').text('Invité');
      };
  }
};
    });


/*tag des utilisateurs*/

/* FORUM VERSIONS
     * 0 = PHPBB2
     * 1 = PHPBB3
     * 2 = PUNBB
     * 3 = INVISION
     */
    $(function() {
      var version = 0;
    
      if (/mode=reply/.test(window.location.search) && my_getcookie('fa_mention')) {
          document.post.message.value += '@"' + my_getcookie('fa_mention') + '" ';
          my_setcookie('fa_mention','');
      } if (!/\/t\d+/.test(window.location.pathname)) return;
    
      for (var a = $(['.ombre strong a', '.postprofile dt strong a', '.username a', '.postprofile dt a ~ a'][version]), b, i = 0, j = a.length, t = document.getElementById('text_editor_textarea'); i<j; i++) {
          b = document.createElement('A');
          b.alt = 'Mentionner ' + $(a[i]).text();
          b.style.marginRight = '3px';
          b.className = 'fa-mention';
          b.innerHTML = '@';
          b.href = '#';
          b.onclick = function() {
            var n = this.alt.replace(/^.*?\s/,'');
      
            if ($.sceditor) t.insertText('@"' + n + '" ');
            else {
                my_setcookie('fa_mention', n);
                window.location.href = '/post?t=' + window.location.pathname.replace(/\/t(\d+)-.*/,'$1') + '&mode=reply';
            }
      
            return false;
          };
    
          a[i].parentNode.insertBefore(b, a[i]);
      }
    
      $(function(){
          if (!$.sceditor) return;
          t=$(t).sceditor('instance');
      });
    $('a.fa-mention').each(function(){
    var M14_ombre=$(this).next().text();
    $(this).attr('title','Mentionner '+M14_ombre+'');
    });
    
    });

/*OUVRIR LES LIENS EN TARGET BLANK*/
$(function(){$("a").each(function(){/^(https|http):\/\/altitudetropicale.forums-actifs.com/.test($(this).attr("href"))||/^\//.test($(this).attr("href"))||$(this).attr("target","_blank")})});

/*avatar sur les tags*/
(function(){'DEVELOPED BY ANGE TUTEUR';'NO DISTRIBUTION WITHOUT CONSENT OF THE AUTHOR';'ORIGIN : http://fmdesign.forumotion.com/t399-display-the-user-avatar-before-mentions#3207';window.faMentionAvatar={position:0,cacheTime:1*60*60*1000,mentions:null,index:-1,getter:function(){var mention=faMentionAvatar.mentions[++faMentionAvatar.index],storage=window.localStorage,id;if(mention){id=mention.href.replace(/.*?\/u/,'');if(storage&&storage['mentionAvatar_'+id]&&storage['mentionAvatar_'+id+'_exp']>+new Date-faMentionAvatar.cacheTime){var avatar=document.createElement('IMG');avatar.className+=' mention-ava';avatar.src=storage['mentionAvatar_'+id];faMentionAvatar.position?mention.appendChild(avatar):mention.insertBefore(avatar,mention.firstChild);faMentionAvatar.getter()}else{$.get('/ajax/index.php?f=m&user_id='+id,function(d){var avatar=$('.tooltip-content > img',d)[0];if(avatar){faMentionAvatar.position?mention.appendChild(avatar):mention.insertBefore(avatar,mention.firstChild);if(storage){storage['mentionAvatar_'+id]=avatar.src;storage['mentionAvatar_'+id+'_exp']=+new Date}}faMentionAvatar.getter()})}}}};document.write('<style type="text/css">.mentiontag img { height:22px; width:22px; vertical-align:middle; border-radius:100px; background:#637e00; box-shadow:0px 1px 1px rgba(0, 0, 0, 0.3), 0px -0px 1px rgba(0, 0, 0, 0.3); margin:1px 3px; padding:1px; }</style>');$(function(){faMentionAvatar.mentions=$('.mentiontag');faMentionAvatar.getter()})}());

pour jquery

Code:

/*  Supprimer le slide sur le profil avancé */
jQuery(function(){$("#profile-advanced-details").length&&$(".widgetleft").css({display:"none"})});

/*Son à la notification*/
function checkNotif(){$(".fa_notification").length>0&&(window.clearInterval(notifChecker),alertNotif())}function removeNotif(){"none"==$(".fa_notification").css("display")&&($(".fa_notification").remove(),$(".audioElem").remove(),notifChecker=setInterval("checkNotif()",500))}function alertNotif(){$("body").append('<audio class="audioElem" style="display:none;" controls autoplay><source src="'+audioFile+'" type="audio/mpeg"></audio>')}var audioFile="http://www.freesfx.co.uk/rx2/mp3s/2/1305_1256857800.mp3";notifChecker=setInterval("checkNotif()",500),dispCheck=setInterval("removeNotif()",500);

/*SUPPRIMER ENCADREMENT SUR RANG DU MEMBRE DANS LE PROFIL AVANCE*/
jQuery(function () {
  if( $('#profile-advanced-details').length ){
    $('.Paolino').css({
      "display": "none!important"
    });
  }
});

pour $(document)

Code:

//BOUTON REPONDRE MP
$(document).ready(function() {
    $('a img[alt="Répondre au message"]').closest('a').html('Répondre')
        .attr('id', 'M14_i_reply_MP').attr('title',
            'Répondre au message privé');
});
//BOUTON NOUVEAU MP
$(document).ready(function() {
    $('a img[alt="Poster un nouveau message privé"]').closest('a').html(
        'Nouveau').attr('id', 'M14_News_Mp').attr('title',
        'Poster un nouveau message privé');
});

Ne faites pas le boulot à ma place, cela risquerait d'encourager une certaine forme de fainéantise. Je souhaite comprendre avant tout.


Merci par avance  pour votre aide et, surtout pour votre patience.

Bonjour Stéphane

Il me semble avoir fait des regroupements ainsi pour $(document):

Code:


    //BOUTON REPONDRE MP
    $(document).ready(function() {
        $('a img[alt="Répondre au message"]').closest('a').html('Répondre')
            .attr('id', 'M14_i_reply_MP').attr('title',
                'Répondre au message privé');
 
    //BOUTON NOUVEAU MP
   
        $('a img[alt="Poster un nouveau message privé"]').closest('a').html(
            'Nouveau').attr('id', 'M14_News_Mp').attr('title',
            'Poster un nouveau message privé');
    });


Bonjour :)
alors tout d'abord les deux syntaxes suivantes:

Code:

$(document).ready(function(){........});

Code:

$(function(){........});

font exactement la même chose à savoir attendre le chargement du DOM (Document Object Model =>soit la structure du document) pour exécuter le code qu'elles contiennent.

Elles permettent aussi le cloisonnement du code contenu permettant de ne pas "polluer" l'espace global (window) et évite ainsi également d'écraser des variables/fonctions déclarées par d'autres scripts.

Je déconseille fortement de fusionner plusieurs scripts à moins d'être sûr qu'ils ne définissent pas les mêmes noms de variables/fonctions.


Si tu veux comprendre tout ceci c'est très simple, crée une nouvelle page HTML avec le haut et le bas de ton forum, puis en contenu :

Code:

<script type="text/javascript">
/*La ligne qui suit est dans le contexte global window*/
var userName=_userdata["username"];
$(function(){
    /*Fonction 1*/
    /*Aucune variable userName n'est définie à ce niveau de
     *notre fonction, du coup c'est la variable userName du
     *contexte global window qui est récupéré
     */
    alert("Fonction 1 : "+userName);
    /*Nous redéfinissons userName, le fait de ne pas placer var
     *devant le nom de la variable, c'est la variable du contexte
     *global window qui va être modifiée, ce qui VA être
     *catastrophique pour la fonction 2...
     */
    userName="Danger ! Données corrompues.";
});
$(function(){
    /*Fonction 2*/
    /*Argh ...*/
    alert("Fonction 2 : "+userName);
});
</script>

Les commentaires devraient être clairs.

Une nouvelle page HTML, haut et bas du forum, contenu:

Code:

<script type="text/javascript">
/*La ligne qui suit est dans le contexte global window*/
var userName=_userdata["username"];
$(function(){
    /*Fonction 1*/
    /*A présent on place le mot clé var devant le nom de notre
     *variable, ceci indique au moteur JavaScript que la déclaration
     *qui suit est LOCALE/CLOISONNEE à notre Fonction 1 et n’empiétera donc pas sur
     *le contexte global window
     */
    var userName="<-- "+_userdata["username"]+" -->";
    alert("Fonction 1 : "+userName);
    /*Après avoir déclaré notre variable comme LOCALE la portée
     *de notre variable restera LOCALE peu importe si nous ne plaçons
     *plus var devant
     */
    userName="Danger ! Données corrompues.";
});
$(function(){
    /*Fonction 2*/
    /*Plus de soucis pour moi */
    alert("Fonction 2 : "+userName);
});
</script>

Une dernière page montrant le souci lorsqu'on fusionne les deux codes, haut et bas du forum,contenu:

Code:

<script type="text/javascript">
/*La ligne qui suit est dans le contexte global window*/
var userName=_userdata["username"];
$(function(){
    /*Fonction 1*/
    /*A présent on place le mot clé var devant le nom de notre
     *variable, ceci indique au parseur JavaScript que la déclaration
  *qui suit est LOCALE/CLOISONNEE à notre Fonction 1 et n'empiètera donc pas sur
     *le contexte global window
     */
    var userName="<-- "+_userdata["username"]+" -->";
    alert("Fonction 1 : "+userName);
    /*Après avoir déclaré notre variable comme LOCALE la portée
     *de notre variable restera LOCALE peu importe si nous ne plaçons
     *plus var devant
     */
    userName="Danger ! Données corrompues.";

    /*Fonction 2*/
    /*Argh j'ai été jointe à la Fonction 1, ça va saigner maintenant que
     *je partage la même portée*/
    alert("Fonction 2 : "+userName);
});
</script>

C'est très simpliste mais ça permet je pense d'appréhender assez facilement le fonctionnement.

Très pédagogique cette démo Arnaud. Merci.

ça pourrait compléter la rubrique "Site relationnel" de Philippe.

Merci bien ;)

D'un point de vue technique cela se nomme la gestion de la table des symboles, on peut constater que la portée est définie avant le contenu à l'analyse du code par le moteur JavaScript en intervertissant 2 lignes du dernier code ainsi:

Code:

<script type="text/javascript">
/*La ligne qui suit est dans le contexte global window*/
var userName=_userdata["username"];
$(function(){
    /*Fonction 1*/
    /*userName vaudra undefined car sa définition comme locale intervient APRES
    *notre alert, en clair le moteur a défini userName comme locale à l'analyse
    *du code, la table des symboles dispose d'une entrée pour userName où la
    *portée est définie mais son contenu ne l'est pas encore c'est pourquoi
    *notre alert ne récupère PAS la variable userName du contexte global window
    */
   
    alert("Fonction 1 : "+userName);
    var userName="<-- "+_userdata["username"]+" -->";
});
</script>

Bonjour à tous,
désolé pour ce nouveau retard. J'ai tenté de me connecter hier soir mes les forums étaient inaccessibles sur la totalité des forums hébergés par FA.

Merci Aranud pour cet explicatif trés convaincant.

je vous avouerai que j'ai tellement entendu qu'il fallait réduire les appels jquery pour éviter un temps de chargement hyper long que j'étais prêt à condenser l'ensemble de mes js. Je vais m'abstenir.