将jQuery与HTML/PHP分离的最佳实践

时间:2013-05-28 作者:William

我正在创建几个jQuery脚本,以帮助在表单提交之前进行验证。我已经读到,最好总是将jQuery脚本分离到一个单独的文件中,这样就可以用wp_enqeue_script.

但是,如果我正在做这样的事情:

jQuery(function()
{
    var ButtonSelector = "#submit-button";

    jQuery(document).on(\'click\', ButtonSelector, function()
    {
        var ValidEntry = true;

        ClearError(\'#venue_name\');
        var name = jQuery("#venue_name").val();
        if (name == "")
        {
            CreateError("#venue_name", "Name is Required");
            ValidEntry = false;
        }

        if (!ValidEntry)
        {
            jQuery(\'html, body\').animate({scrollTop:0}, \'slow\');
        }

        EnableButton(ButtonSelector);
        return false;
    });
});
由于此函数只在一个单独的表单中使用,因此将其分离出来是否仍有意义?如果我把它分开,难道这不意味着它会为每个页面加载吗?

3 个回复
最合适的回答,由SO网友:RRikesh 整理而成

您可以使用is_page() 当您将JS文件排入队列时。

function my_scripts_method() {
    if( is_page(\'your page title\') ){
      wp_enqueue_script( \'your-js-script\' );
    }
}

add_action( \'wp_enqueue_scripts\', \'my_scripts_method\' ); 
这样,您将有条件地enqueue your JSthat page only.

SO网友:Nicolai Grossherr

您仍然可以将脚本放在一个单独的js文件中,但也可以与脚本的其余部分(-文件)分开,并有条件地将其排队,例如:

if (is_page_template(\'abc-xyz.php\')) {
    wp_enqueue_script(\'your_script-js\', get_template_directory_uri() . \'/inc/js/your_script.js\', array(\'jquery\'), \'1.00\', true);
}
那会在你的functions.php, 将脚本排入队列的位置

SO网友:Chief Alchemist

使用时is_page() 我还建议使用|| 因为页面标题和页面名称(又名page slug)可能会更改-如果只是偶然的话。您也可以使用页面ID,但这在开发和生产之间也可能不一致。

例如:

if ( is_page( $name ) || is_page( $id ) || is_page( $title ) ) {}
过度杀戮?可能但这是需要注意的。

结束

相关推荐

使用jQuery FancyBox从前端发出AJAX请求

我希望能够使用jQuery Fancybox的Ajax特性从前端请求数据。下面是我在插件部分使用的代码的一部分:wp_localize_script( \'wpPluginjs\', \'ajax_vars\', array( \'url\' => admin_url( \'admin-ajax.php\' ), \'nonce\' => wp_create_nonce( \'ajax-nonce\' ) )&