问题描述

我想首先加载头 j，然后加载所有入队脚本到它的功能。像这样…

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

我该怎么做？

对于那些不知道 HeadJS 是 2.30KB 的脚本加快，简化和现代化你的网站…

http://headjs.com/

最佳解决方案

您应该预先警告，并非所有插件/主题都使用排队。当我第一次开始处理所有的 JavaScripts 和 CSS 文件输出我刚刚挂钩入队列文件。这导致我只得到 10 个 JavaScript 文件中的 2 个和 3 个 CSS 文件中的 1 个。

这是一些快速的 PoC 。没有测试，但是如果你可以编写代码，这意味着让你走向正确的方向。一旦我回家，我会把一些更加适合和功能的东西打在一起。

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

(基本上从 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;
}

使用 WP 超级缓存输出缓冲。

次佳解决方案

这是我正在努力集成 head.js：

我把这段代码放在我的模板 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();
}

它输出这样的东西：

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

请注意，它还使用脚本标签，有时候可以确定什么 (以及何时) 脚本加载。

参考文献

注：本文内容整合自 Google/Baidu/Bing 辅助翻译的英文资料结果。如果您对结果不满意，可以加入我们改善翻译效果：薇晓朵技术论坛。