异步Java脚本加载器

时间:2011-04-16 作者:Adam

我想在页面加载时利用加载脚本的优势。ie。Yepnope, head.js

但我也希望能够将脚本排队,这样其他插件就不会尝试添加自己的插件。(a la jquery)

有人有什么建议吗?

提前感谢。。。

4 个回复
SO网友:scribu

不能两者兼有:要么使用wp\\u enqueue\\u script()要么使用head。js公司

或者,您可以进行一些古怪的黑客操作,将WP脚本依赖关系树转换为head。js调用。

注意:更换缸盖。js和您想要使用的任何库。

SO网友:Dominic P

以下是我为实现这一目标所做的工作。我将此作为一个可能的解决方案发布,也是为了从任何比我有更多WP经验的人那里获得反馈。如果您发现我的实现有任何问题或我没有考虑的任何问题,请告诉我。

Known limitations:

<它只适用于通过wp_enqueue_script<head> 页面的节。这可能很容易解决,但对于我的实现,我更喜欢这种方式我看到的head.js plugin 它似乎只在<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;

SO网友:David Hobs

这应该是一个评论,但我还没有这些特权。

但是,如果主要考虑的只是防止重复,请取消注册脚本,然后在没有源的情况下注册相同的脚本并将其排队。从本质上讲,wp将运行一个空白脚本来阻止它的每一个其他注册/排队版本。

然后使用您选择的方法添加脚本。我还没有做过彻底的测试,但从其他地方得到了提示,理论上应该可以。

SO网友:Paris Holley

我刚刚发布了一个插件,它应该是wordpress安装的一个插件。虽然时间还早,但我确信会有漏洞,但在我正在开发的一个网站上,它对我起到了作用:

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

结束

相关推荐

用Wordpress制作基于jQuery的画廊而不需要插件?

我一直在绞尽脑汁寻找在Wordpress中创建一个简单图库的最佳方法,而不必依赖NextGen图库这样的插件,而且我认为一个短代码将是一个很好的方法,它与内置的将图像“附加”到帖子的方法相结合。这样,用户就可以“附加”他们上传的图像,并且图像的描述可以用作标题。那是,直到我意识到,除非你删除图片本身(意味着它会从你插入的其他帖子/页面中消失),否则无法从帖子中“取消附加”图片。此外,它不允许您将图像链接到站点的不同部分。因此,我现在认为自定义字段或其他一些方法,包括在模板中对区域进行短代码或硬编码,可能是