Làm thế nào để sử dụng Head JS với tất cả các tập lệnh mê hoặc?

Tôi muốn tải js đầu tiên và sau đó tất cả các tập lệnh mê hoặc vào chức năng của nó. Giống như vậy ...

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

Làm thế nào tôi sẽ làm điều này?

Đối với những người không biết HeadJS là tập lệnh 2.30KB giúp tăng tốc, đơn giản hóa và hiện đại hóa trang web của bạn ...

http://headjs.com/

Bạn nên được cảnh báo trước rằng không phải tất cả các plugin / chủ đề đều sử dụng enqueue. Khi tôi lần đầu tiên bắt đầu xử lý tất cả các tệp JavaScripts và CSS được xuất ra, tôi chỉ nối vào các tệp được liệt kê. Điều này dẫn đến việc tôi chỉ nhận được 2 trên 10 tệp JavaScript và 1 trên 3 tệp CSS.

Đây là một số PoC nhanh chóng. Không được thử nghiệm nhưng có nghĩa là đưa bạn đi đúng hướng, nếu bạn có thể viết mã. Khi tôi trở về nhà, tôi sẽ cùng nhau làm một cái gì đó phù hợp và tiện dụng hơn.

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.'")';
}

(Về cơ bản đã vuốt hầu hết mã từ Trình tối ưu hóa tập lệnh JS & CSS )

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;
}

Sử dụng bộ đệm đầu ra WP Super Cache.

Đây là những gì tôi đang cố gắng để tích hợp head.js:

tôi đặt mã này trong functions.phptập tin mẫu của tôi

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();
}

Nó xuất ra một cái gì đó như thế này:

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

Lưu ý rằng đôi khi nó cũng sử dụng nhãn tập lệnh có thể thực sự hữu ích để xác định tập lệnh nào (và khi nào) được tải.

Bạn cũng có thể dùng thử plugin này (hoặc ít nhất là xem mã trong đó):

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

Nó thực hiện một regex trên đầu ra trước khi in ra màn hình, do đó, nó hoạt động ngay cả với các tập lệnh không được xử lý.

Đây là giải pháp của tôi cho việc này. Tôi đang sử dụng yepnope thay vì head.js, nhưng lý thuyết thì khá giống nhau.

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

Tôi hy vọng nó có ích, và cho tôi biết nếu bạn có bất kỳ bình luận nào về chủ đề khác đó.