web-dev-qa-db-fra.com

Comment utiliser Head JS avec tous les scripts mis en file d'attente?

Je veux d'abord charger head js puis tous les scripts mis en file d'attente dans sa fonction. Ainsi...

<script src=">/js/head.load.min.js" type="text/javascript" charset="UTF-8"></script>

<script type="text/javascript">
head.js("/path/to/jquery.js", "/google/analytics.js", "/js/site.js", function() {

   // all done

});
</script>

Comment je ferais ça?

Pour ceux qui ne connaissent pas HeadJS, le script de 2,30 Ko accélère, simplifie et modernise votre site ...

http://headjs.com/

javascriptperformancewp-enqueue-script
7
agileapricot

Vous devez être averti que tous les plugins/thèmes n'utilisent pas la file d'attente. Lorsque j'ai commencé à gérer tous les fichiers JavaScripts et CSS générés, je me suis tout simplement accroché aux fichiers en file d'attente. Cela m'a permis de ne recevoir que 2 fichiers JavaScript sur 10 et 1 fichier CSS sur 3.

Voici quelques PoC rapides. Ni testé, mais destiné à vous mettre dans la bonne direction, si vous pouvez coder. Une fois rentré chez moi, je trouverai quelque chose de plus approprié et fonctionnel.

add_action('wp_print_scripts','head_files');
function head_files(){

    global $wp_scripts, $auto_compress_scripts;

    print 'print out head.js';  

    $queue = $wp_scripts->queue;
        $wp_scripts->all_deps($queue);
        $to_do = $wp_scripts->to_do;
    $headArray = array();
        foreach ($to_do as $key => $handle) {
            $src = $wp_scripts->registered[$handle]->src;
        $headArray[] = $src;
    }

    print 'print out head.js("'.implode("'",$headArray.'")';
}

(Essuyé essentiellement la majeure partie du code de JS & CSS Script Optimizer )

add_filter('wpsupercache_buffer', 'head_files' );
function head_files($buffer){
    if ( $fileType == "js" ){
            preg_match_all('~<script.*(type="["\']text/javascript["\'].*)?src=["\'](.*)["\'].*(type=["\']text/javascript["\'].*)?></script>~iU',$content,$matches);
            $headArray = $matches[2];
    }


    print 'print out head.js';  

    print 'print out head.js("'.implode("'",$headArray.'")';
    return $buffer;
}

Utilisation de WP Mise en mémoire tampon de sortie du super cache.

9
Backie

Voici ce que j'essaie de faire pour intégrer head.js:

je mets ce code dans mon fichier modèle functions.php

define('THEME', get_bloginfo('template_url'), true);
define('THEME_JS', THEME . '/js/', true);

add_action('wp_print_scripts','head_js_files');
function head_js_files()
{
    if (is_admin()) return; //to preserve the admin

        global $wp_scripts;

    $in_queue = $wp_scripts->queue;

    if(!empty($in_queue))
    {
        $scripts = array();
        foreach($in_queue as $script)
        {

            $src = $wp_scripts->registered[$script]->src;
            $src = ( (preg_match('/^(http|https)\:\/\//', $src)) ? '' : get_bloginfo('url') ) . $src;
            $scripts[] = '{' . $script . ':"' . $src . '"}';
        }

        echo "<script type=\"text/javascript\" src=\"".THEME_JS."head.js\"></script>\n";
        echo "<script type=\"text/javascript\">head.js(\n". implode(",\n", $scripts). "\n);</script>\n";
    }

    $wp_scripts->queue = array();
}

Il génère quelque chose comme ceci:

<script type="text/javascript">head.js(
    {jquery:"/wp-includes/js/jquery/jquery.js"},
    {jquery_lastfm:"http://localhost/lucianomammino/wp-content/plugins/lastfm-recent-tracks-widget/js/jquery.lastfm.js"},
    {nav:"http://localhost/lucianomammino/wp-content/themes/lmtheme/js/jquery.dropdown.js"}
);</script>

Notez qu'il utilise également un étiquetage de script qui peut s'avérer très utile parfois pour identifier les scripts (et quand) chargés.

2
Luciano Mammino

Voici ma solution pour cela. J'utilise Yepnope au lieu de head.js, mais la théorie est à peu près la même.

https://wordpress.stackexchange.com/a/40325/9802

J'espère que cela aide, et laissez-moi savoir si vous avez des commentaires sur cet autre sujet.

0
Dominic P

Vous pouvez aussi essayer ce plugin (ou au moins regarder le code qu'il contient):

http://wordpress.org/extend/plugins/headjs-loader/

Il crée une expression rationnelle sur la sortie avant son impression à l'écran, de sorte qu'il fonctionne même avec les scripts qui n'ont pas été mis en file d'attente.

0
user2969