第三方是否应该使用$wp_脚本/$wp_Style->Add_Data?

时间:2012-05-10 作者:tollmanz

WP_Dependencies 类存在一个名为add_data. 此函数用于将数据添加到WordPress加载期间排队的脚本/样式中。此函数的一个常用用法是在添加针对不同版本IE的样式表时添加条件。例如,针对IE8及更低版本:

function test_wp_print_styles() {
    global $wp_styles;

    wp_enqueue_style( \'test-style\', get_template_directory_uri() . \'/css/test.css\', array(), 1, \'all\' );
    $wp_styles->add_data( \'test-style\', \'conditional\', \'lte ie8\' );
}
add_action( \'wp_print_styles\', \'test_wp_print_styles\' );
这将呈现为:

<!--[if lte ie8]>
<link rel=\'stylesheet\' id=\'test-style-css\'  href=\'http://trunkosaurus.dev/wp-content/themes/twentyeleven/css/test.css?ver=1\' type=\'text/css\' media=\'all\' />
<![endif]--> 
当我查看Core时,我看到了使用此方法的几个地方:

  • WP_Styles->add_inline_style() : 在引用的样式表之后添加内联样式(通过WP_Styles->print_inline_style())

  • WP_Scripts->localize() : 添加json编码的对象(由更多“public”包装)wp_localize_script() 功能)

  • wp_plupload_default_settings() : 为“wp plupload”脚本添加json编码的对象(从多维数组创建)(请注意,这将在3.4中提供)

    注册/排队脚本和样式时为默认脚本添加数据(wp-includes/script-loader.php)

通过阅读该方法的使用,它似乎没有特定的用例。在里面wp_plupload_default_settings, 它似乎允许任意数据注入。在里面wp_register_script, 它似乎用于区分页眉和页脚脚本。在里面add_inline_style, 它用于表示应在指定样式表排队后添加的内联样式。

此函数的一个很好的用途是类似于以下代码的代码,其中您将外部脚本排队,但需要向其发送一些配置变量,其中一些来自DB:

function zdt_enqueue_add_this() {
    global $wp_scripts;

    wp_enqueue_script( \'zdt-add-this\', \'http://s7.addthis.com/js/250/addthis_widget.js#pubid=myidhere\' );

    // Contrived example of database call to get a twitter handle stored in the db
    $author_twitter_handle = zdt_get_twitter_handle();

    $js = "var addthis_share = { templates : { twitter: \'{{title}} {{url}} (by @" . sanitize_key( $author_twitter_handle ) . "\' } };\\n";
    $js .= \'var addthis_config = { ui_header_color: "#FFFFFF", ui_header_background: "#FA9628", ui_cobrand: "My Site" };\';

    $wp_scripts->add_data( \'zdt-add-this\', \'data\', $js );
}
add_action( \'wp_enqueue_scripts\', \'zdt_enqueue_add_this\' );
这将导致:

<script type=\'text/javascript\'>
/* <![CDATA[ */
var addthis_share = { templates : { twitter: \'{{title}} {{url}} (by @tollmanz\' } };
var addthis_config = { ui_header_color: "#FFFFFF", ui_header_background: "#FA9628", ui_cobrand: "My Site" };
/* ]]> */
</script>
<script type=\'text/javascript\' src=\'http://s7.addthis.com/js/250/addthis_widget.js?ver=3.4-beta4-20731#pubid=myidhere\'></script>
请注意,这无法通过wp_localize_script 因为addthis_share 对象在属性中具有属性(I did write about a somewhat hacky way around this before).

编辑:我说得不对。wp_localize_script 可以很好地处理多维数组

这种方法似乎非常有效,原因如下:

它允许您将数据附加到脚本句柄,以便它始终与脚本一起正确排队。此外,它还可以智能地取消查询脚本、脚本顺序和脚本位置wp_print_styles 打印一些任意脚本,这些脚本稍后由排队脚本执行对于这种方法,有些事情没有按预期工作,这让我很担心。其中一个问题是wp_localize_script 随着$wp_scripts->add_data, 您可能会得到意外的结果。例如:

// Contrived example of database call to get a twitter handle stored in the db
$author_twitter_handle = zdt_get_twitter_handle();

$js = "var addthis_share = { templates : { twitter: \'{{title}} {{url}} (by @" . sanitize_key( $author_twitter_handle ) . "\' } };\\n";
$js .= \'var addthis_config = { ui_header_color: "#FFFFFF", ui_header_background: "#FA9628", ui_cobrand: "My Site" };\';

$wp_scripts->add_data( \'zdt-add-this\', \'data\', $js );
wp_localize_script( \'zdt-add-this\', \'addthis_share\', array( \'var\' => \'val\' ) );
产生:

<script type=\'text/javascript\'>
/* <![CDATA[ */
var addthis_share = { templates : { twitter: \'{{title}} {{url}} (by @tollmanz\' } };
var addthis_config = { ui_header_color: "#FFFFFF", ui_header_background: "#FA9628", ui_cobrand: "My Site" };
var addthis_share = {"var":"val"};
/* ]]> */
</script>
<script type=\'text/javascript\' src=\'http://s7.addthis.com/js/250/addthis_widget.js?ver=3.4-beta4-20731#pubid=myidhere\'></script>
鉴于此脚本:

// Contrived example of database call to get a twitter handle stored in the db
$author_twitter_handle = zdt_get_twitter_handle();

$js = "var addthis_share = { templates : { twitter: \'{{title}} {{url}} (by @" . sanitize_key( $author_twitter_handle ) . "\' } };\\n";
$js .= \'var addthis_config = { ui_header_color: "#FFFFFF", ui_header_background: "#FA9628", ui_cobrand: "My Site" };\';

wp_localize_script( \'zdt-add-this\', \'addthis_share\', array( \'var\' => \'val\' ) );
$wp_scripts->add_data( \'zdt-add-this\', \'data\', $js );
产生:

<script type=\'text/javascript\'>
/* <![CDATA[ */
var addthis_share = { templates : { twitter: \'{{title}} {{url}} (by @tollmanz\' } };
var addthis_config = { ui_header_color: "#FFFFFF", ui_header_background: "#FA9628", ui_cobrand: "My Site" };
/* ]]> */
</script>
<script type=\'text/javascript\' src=\'http://s7.addthis.com/js/250/addthis_widget.js?ver=3.4-beta4-20731#pubid=myidhere\'></script>
Thedata 由设置的键wp_localize_script 最终被调用覆盖$wp_scripts->add_data, 如果你打电话wp_localize_script 对于同一脚本,字符串将被正确连接两次。

虽然所有这些都是打印任意脚本以便与排队脚本一起使用的一种非常方便的方法,但我认为它不应该被广泛使用,因为可能会发生冲突。我当然可以看到在个人项目中使用此功能的理由,因为这些代码不会在社区插件/主题中使用。

我还查看了Core-Trac,看看是否有任何关于函数用途的线索。我找到一张票(http://core.trac.wordpress.org/ticket/11520)(这是一部史诗般的作品),探索了添加任意JS的其他方法。因此,似乎有兴趣创建一种更好的方法来添加任意JS,但不确定是否add_data 应该是流程的一部分。

我的主要问题是:开发人员应该使用这个函数吗?在某些情况下(例如。,wp_register_script), 这似乎是第三方不应使用的“私有”功能;然而,在其他情况下(例如。,wp_plupload_default_settings), 在排队脚本之前注入任意JS似乎是一种非常合理的方法。

我不认为有一个“正确”的答案,但我很想听听其他开发人员的想法。我还认为,这个谜题中有一些我完全忽视了的部分,我很想听听其他人对它的看法。

2 个回复
SO网友:kaiser

此函数用于将数据添加到WordPress加载期间排队的脚本/样式中。

不是真的。它将数据添加到registered.

由设置的数据键wp_localize_script 最终被调用覆盖$wp_scripts->add_data, 如果你打电话wp_localize_script 对于同一脚本,字符串将被正确连接两次。

正当它们都调用底层(不可访问的内部)API,因此它会被覆盖(如您所述)。当它调用$this->get_data( $handle, \'data\' );.

我的主要问题是:开发人员应该使用这个函数吗?

答案只是说:是的,当你没有其他机会做你需要的事情时。

另一个示例:检查脚本是否已注册(例如。json2/jquery) 并将其移动到页脚(选中extra[\'group\']).

// Move scripts to the footer - in case it isn\'t already there
if ( ! $wp_scripts->get_data( \'json2\', \'group\' ) )
    $wp_scripts->add_data( \'json2\', \'group\', 1 );

if ( ! $wp_scripts->get_data( \'jquery\', \'group\' ) )
    $wp_scripts->add_data( \'jquery\', \'group\', 1 );
注:此↑ 仅适用于根据extra!

补充说明

反问题:您是否尝试过向core注册的脚本添加依赖项?例如:尝试添加JSON2 根据需要,deps至jQuery. 如果不拦截global $wp_scripts:

global $wp_scripts;

$scripts = array( 
     \'jquery\'      => array( \'json2\' )
    ,\'jquery-form\' => array( \'json2\' ) 
);

foreach ( $scripts as $handle => $deps )
{
    // Ugly hack: Intercept the global to force the "natural"/needed order: JSON2 » jQuery
    $deps_default =& $wp_scripts->registered[ $handle ]->deps;
    $wp_scripts->registered[ $handle ]->deps = array_merge( $deps_default, $deps );
}
全班有一大堆事情做不到。所以使用->add_data() imo完全有效。只要利用你所拥有的,因为这比生活在缺乏核心课程的环境中更好。

SO网友:scribu

WP 3.3中有一个关于如何处理脚本数据的大辩论:

http://core.trac.wordpress.org/ticket/11520

请注意,您可以将嵌套数组传递给wp_localize_data() 现在:

wp_localize_script( \'jquery\', \'jQueryL10n\', array(
    \'foo\' => array(
        \'bar\' => array( \'apple\', \'orange\' )
    ),
) );
所以,我会使用add_data() 如果没有更高级别的API来完成我需要做的事情,但要知道它的行为在某些边缘情况下可能会发生变化,例如当涉及连接时。

结束

相关推荐