it-roy-ru.com

Асинхронные загрузчики JavaScript

Я хотел бы воспользоваться возможностью загрузки своих скриптов во время загрузки страницы. то есть. Yepnope , head.js etc ...

Но я также хочу иметь возможность ставить скрипт в очередь, чтобы другие плагины не пытались добавлять свои собственные. (а-ля JQuery)

У кого-нибудь есть предложения?

Заранее спасибо...

2
Adam

Вы не можете иметь оба: вы либо используете wp_enqueue_script () или head.js

Или вы делаете какой-то дурацкий взлом, чтобы преобразовать дерево зависимостей скрипта WP в вызовы head.js.

NB. Замените head.js той библиотекой, которую вы хотите использовать.

1
scribu

Это должен быть комментарий, но у меня пока нет этих привилегий.

Но если основной задачей является только предотвращение дублирования, отмените регистрацию сценария, затем зарегистрируйте тот же сценарий без источника и поставьте его в очередь. По сути, wp будет запускать пустой сценарий, чтобы заблокировать все остальные его версии.

Затем добавьте сценарий с методом по вашему выбору. Я не провел тщательного тестирования, но получил подсказку откуда-то еще, и теоретически он должен работать нормально.

1
David Hobs

Вот что я делаю, чтобы достичь этого. Я публикую это как возможное решение, а также чтобы получить обратную связь от любого, кто имеет больше опыта WP, чем я. Если вы видите какие-либо проблемы с моей реализацией или что-то, что я не рассматриваю, пожалуйста, дайте мне знать.

Известные ограничения:

  • Он работает только со сценариями, которые правильно поставлены в очередь с помощью wp_enqueue_script
  • Он выводит все скрипты в нижний колонтитул, даже если они были зарегистрированы для вывода только в разделе <head> страницы. Это может быть легко обойти, но для моей реализации я предпочитаю это так.

Проблема, с которой я столкнулся при использовании плагина head.js заключалась в том, что он, похоже, работал только над сценариями в разделе <head>, а также с тем, что он не допускал каких-либо простых функций восстановления CDN, что является действительно приятным преимуществом загрузка сценариев таким образом, на мой взгляд.

Хорошо, вот код Это часть класса, который входит в мой плагин общей функциональности, но он также может быть легко размещен в functions.php или организован как-то иначе. Я сейчас использую yepnope , но это можно легко изменить, чтобы использовать другой загрузчик скриптов.

class example {

    function __construct() {

        /*
        Hook into the script printing functionality and use our own resource loader to load
        scripts in a non-blocking, asynchronous, parallel fancy way
        */
        if( !is_admin() ) {

            add_action( 'wp_print_scripts',  array( &$this, 'deploy_script_loader' ) );
        }       
    }   

    /*
    If we have any javascripts queued for the page, grab the handles of
    all of the ones to be loaded in the header and dequeue them now. 
    Then, we will check again and reload any that weren't queued
    yet in the footer.
    */
    function deploy_script_loader( ) {
        global $wp_scripts;

        if ( !empty( $wp_scripts->queue ) && !is_admin() ) {

            // Get the queue in our class property, and dequeue everything
            foreach ( $wp_scripts->queue as $handle ) {

                /*
                Check if this script is supposed to be loaded in the header (group isn't 1).
                If it is, we'll grab it now and dequeue it. We'll save the rest of the dequeuing
                for the footer script or else we'll miss some scripts that are queued after
                this hook is run.
                */
                if ( 1 !== $wp_scripts->registered[$handle]->extra['group'] ) {

                    /*
                    Just dequeuing a script here isn't enough to prevent it from being
                    printed in the header if another script that we haven't dequeued (ie a footer
                    script) depends on it. So, we need to make sure that all of the
                    scripts we just dequeued will be ok loading in the footer (where they will
                    get dequeued for real before they are printed).
                    */
                    $wp_scripts->registered[$handle]->extra['group'] = 1;
                }
            }

            // Add our hook to load everything in the footer
            add_action( 'wp_footer', array( &$this, 'output_script_loader' ) );
        }       
    }

    /*
    Function to be ran in wp_footer to output the js script loader
    html content.
    */
    function output_script_loader() {
        global $wp_scripts;

    // Process the scripts dependency tree, but don't print anything
    ob_start();
    $script_queue = $wp_scripts->do_items();
    ob_clean();

        // Add our script loader
        echo '<script type="text/javascript" src="' . plugins_url( '/scripts/yepnope.1.0.2-min.js', __FILE__ ) . '"></script><script type="text/javascript">';

        // Loop through the queued scripts and get all of their localization output objects first
        foreach( $script_queue as $handle ) {

            echo $wp_scripts->registered[$handle]->extra['data'];
        }

        echo 'yepnope.errorTimeout = 4000; yepnope([';

        $i = 0;
        $count = count( $script_queue );

        // Loop through the queued scripts again, this time output the script loader syntax
        foreach( $script_queue as $handle ) {

            if ( 'jquery' === $handle ) {

                $jquery_cdn_url = ( is_ssl() ) ? 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' : 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js';

                echo ' { load: "'. $jquery_cdn_url .'", callback: function () { if (!window.jQuery) { yepnope("' . $wp_scripts->base_url . $wp_scripts->registered['jquery']->src . '"); } } },';
            } else {

                $src = $wp_scripts->registered[$handle]->src;

                // Check if this is a relative path or if we have the whole thing
                if( 'http' !== strtolower( substr( $src, 0, 4 ) ) ) {

                    $src = $wp_scripts->base_url . $src;
                } else {

                    $src = ( is_ssl() ) ? 'https' . substr( $src, strpos( $src, ':' ), strlen( $src ) ) : 'http' . substr( $src, strpos( $src, ':' ), strlen( $src ) );
                }

                $comma = ( $i == ( $count - 1 ) ) ? '' : ',';

                echo '{ load: "' . $src . '" }' . $comma;
            }

            $i++;
        }       

        echo ']);</script>';
    }
}

// Instantiate the class
new example;
1
Dominic P

Вот простой способ добавления асинхронных файлов во все пользовательские файлы js в WordPress.

Добавить в functions.php:

// Async load for all style
    function base_async_scripts($url)
    {
        if ( strpos( $url, '#asyncload') === false )
            return $url;
        else if ( is_admin() )
            return str_replace( '#asyncload', '', $url );
        else
        return str_replace( '#asyncload', '', $url )."' async='async"; 
        }
    add_filter( 'clean_url', 'base_async_scripts', 11, 1 );

//add or change in url as mentioned below
wp_enqueue_script( 'base-functions', get_template_directory_uri() . '/js/functions.js#asyncload', array( 'jquery' ), null, true );
0
user86710

Я только что выпустил плагин, который должен стать плагином для установок WordPress. Еще очень рано, и я уверен, что будут ошибки, но это сработало для меня на сайте, над которым я работаю:

http://wordpress.org/extend/plugins/asynchronous-javascript/

0
Paris Holley