javascript - 在我的 WordPress 主题中将 jQuery 重新映射到 $ 后，我无法再从 js 文件外部触发函数

Question

我正在开发一个包含大量 jQuery 的 WordPress 主题。默认情况下，WordPress 不允许您使用 $ 快捷方式，您必须使用完整的 jQuery 代替 - 例如jQuery('.class') 而不是 $('.class')。

这几行代码并不算太麻烦，但我现在已经掌握了很多，所以我使用以下方法将 jQuery 重新映射到 $:

(function($){

    ...my functions here...

})(window.jQuery);

这适用于从该文件中触发的函数，但如果我在 PHP 中使用任何内联触发器，它们将不再起作用。例如:

<a onclick="loadFullPost('<?=get_permalink()?>?ajax=true','<?=$post->post_name?>',<?=$post->ID?>)">Read more</a>

在重新映射之前工作正常，但现在不行。我无法像往常一样在 js 文件中绑定(bind)事件，因为我将无法访问我需要的 PHP 和 WordPress 函数 - 除非我遗漏了什么。例如，这是行不通的:

$( "#target" ).click(function() {    
    loadFullPost('<?=get_permalink()?>?ajax=true','<?=$post->post_name?>',<?=$post->ID?>)    
});

有什么办法解决这个问题吗？

Answer 1

问题是您的函数不再是全局函数。这是一件好事™。 (原因见下文。)

Is there any way around this?

到目前为止，最好的方法是不像这样连接事件。相反，将您的代码和标记分开，并使用 jQuery 的 on 和类似的方法连接您的函数。有关更多信息，请参见下文。

但是如果您觉得必须这样做，您可以通过将函数分配为 window 上的属性来使它们成为全局函数:

(function($) {
    window.loadFullPost = function() {
        // ...
    };
)(jQuery);

或

(function($) {
    function loadFullPost() {
        // ...
    }

    window.loadFullPost = loadFullPost;
)(jQuery);

---

那你会怎么做

<a onclick="loadFullPost('<?=get_permalink()?>?ajax=true','<?=$post->post_name?>',<?=$post->ID?>)">Read more</a>

...不使用全局函数？像这样:

<a class="load-full-post" data-permalink="<?=get_permalink()?>" data-ajax=true data-post-name="<?=$post->post_name?>" data-post-id="<?=$post->ID?>">Read more</a>

然后是他们的一个处理程序

$(document).on("click", ".load-full-post", function() {
    var link = $(this);
    // Use the values from link.attr("data-permalink") and such
    // to do the work
});

或者，如果您想使用现有的 loadFullPost 函数:

$(document).on("click", ".load-full-post", function() {
    var link = $(this);
    return loadFullPost(
        link.attr("data-permalink"),
        link.attr("data-ajax") === "true",
        link.attr("data-post-name"),
        +link.attr("data-post-id")  // (+ converts string to number)
    );
});

我应该提一下，人们会告诉您通过 data 函数访问那些 data-* 属性。您可以这样做，但是除非您使用data 的各种附加功能，否则这是不必要的开销(为数据创建 jQuery 缓存等)。 data 不是 data-* 属性的访问器函数，它远不止于此。

您还可以将您的信息作为 JSON 传递:

<a class="load-full-post" data-postinfo="<?=htmlspecialchars(json_encode(array("permalink" => get_permalink(), "ajax" => true, "name" => $post->post_name, "id" => $post->ID))0?>">Read more</a>

(或者类似的东西，我的 PHP 功能很弱)

然后:

$(document).on("click", ".load-full-post", function() {
    var postInfo = JSON.parse($(this).attr("data-postinfo"));
    return loadFullPost(
        postInfo.permalink,
        postInfo.ajax,
        postInfo.name,
        postInfo.id
    );
});

---

为什么使您的函数成为非全局函数是一件好事™:全局命名空间非常拥挤，尤其是当您处理多个脚本和插件以及 Wordpress 本身时。您创建的全局变量越多，与另一个脚本中的全局变量发生冲突的可能性就越大。通过将您的函数很好地包含在您的作用域函数中，您可以避免踩踏其他人的函数/元素/任何东西的可能性，反之亦然。