处理jQuery组件冲突

时间:2012-04-14 作者:Volomike

在插件开发中,防止jQuery组件在前端发生冲突的最佳实践是什么?

例如,假设我在一个插件中包含jQuery Apprise对话框,该插件将此对话框加载到前端,另一个插件可能也会这样做。因为这会被加载和声明两次,或者其中一个是分叉和自定义的,而我的不是,所以我们在前端会出现Javascript错误(我假设)。

(注意,为了在前端加载jQuery组件,我正在通过wp\\u head()操作事件使用wp\\u register\\u script()和wp\\u enqueue\\u script()策略的最佳实践。)

3 个回复
SO网友:dbeja

我的建议是在匿名函数中混合使用代码隔离和检查jquery是否已经存在。

下面是一个示例:

(function() {

var jQuery;  // your jquery variable

// check if jquery is present and if it has the version you want
if (window.jQuery === undefined || window.jQuery.fn.jquery !== \'1.8.3\') {

    // load jquery lib from google hosted libraries
    var script_tag = document.createElement(\'script\');
    script_tag.setAttribute("type","text/javascript");
    script_tag.setAttribute("src","http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js");

    // wait for jquery lib to load
    if (script_tag.readyState) {
      script_tag.onreadystatechange = function () { // old versions of IE
          if (this.readyState == \'complete\' || this.readyState == \'loaded\') {
              jqueryLoadHandler();
          }
      };
    } else { // for other browsers
      script_tag.onload = jqueryLoadHandler;
    }

    // Try to find the head, otherwise default to the documentElement
    (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag);

} else {

    // The current site is already using the jquery you want, so just point your variable to that jquery
    jQuery = window.jQuery;
    main();
}

// as soons as jquery is loaded
function jqueryLoadHandler() {
    // Restore $ and window.jQuery to their previous values and store the
    // new jQuery in our local jQuery variable
    jQuery = window.jQuery.noConflict(true);

    // Call plugin main function
    main(); 
}

// plugin main function
function main() { 
    jQuery(document).ready(function($) { 
        // Here you can use the $ without any problems
    });
}

})(); // We call our anonymous function immediately
这样,即使其他插件使用jQuery时没有wp\\u enqueue\\u脚本,也可以使用jQuery而不会出现插件问题。在这个匿名函数中使用的每个变量和函数都不会干扰页面的其余部分。

如果将其与wp\\u enqueue\\u脚本集成,可能效果会更好。

您可以在中阅读更多关于在异常函数中加载jquery的方法的信息http://alexmarandon.com/articles/web_widget_jquery/

SO网友:Maciej Płusa

jQuery核心的问题很常见,许多插件都有很多方法来防止它。

当我们谈论jQuery插件时,还有另一个问题,但您可以用类似的方式删除它。

在您的情况下,我更喜欢在插件的设置页面上添加include switch的常见解决方案-我认为这对于具有jQuery核心的插件非常流行,但您也可以将其用于jQuery插件。

另一种解决方案是在js中编写一个脚本,检查是否定义了jQuery额外方法(来自插件),如果没有定义,则可以在脚本中包含插件。只有在为优先级非常低的脚本添加挂钩时,此解决方案才会起作用。它将在其他插件之后运行,并且这种情况将起作用。

SO网友:Ralf912

排队或注册脚本的最佳实践是使用wp_register_scriptwp_enqueue_script. 不应使用不使用此功能添加脚本的插件和主题。

原因很简单:有wp_register_script() 我们能够检索有关已注册脚本的大量信息。尤其是如果给定的源已注册或未注册。

我写了一个simple class 测试源是否已注册。该类可以取消注册脚本并注册新脚本或跳过新脚本。这门课应该是你自己发展的起点。是的not 用于生产环境!

How do the class work?

该类使用应注册的脚本检索数组。然后比较文件名(和only 每个已注册脚本的文件名),以及应注册脚本的文件名。如果脚本/文件名尚未注册,则其句柄将添加到数组中,并将在稍后注册。

可以对该类进行扩展,以比较脚本的完整路径、版本或决定是否应注册脚本所需的任何内容。

A simple example

    $my_scripts = array(

            \'foo\' => array(
                    \'src\' => \'external/ressource/foo.js\',
                    \'deps\' => array( \'jquery\' ),
                    \'version\' => false,
                    \'in_footer\' => true
                    ),

            \'bar\' => array(
                    \'src\' => home_url( \'/wp-admin/js/common.min.js\' ),
                    \'deps\' => false,
                    \'version\' => false,
                    \'in_footer\' => true
                    ),

            \'jquery\' => array(
                    \'src\' => \'//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js\',
                    \'deps\' => false,
                    \'version\' => \'1.8.3\',
                    \'in_footer\' => true
                    ),

    );

    $safe_register = new Safe_Registering_Scripts( $my_scripts, true );

    global $wp_scripts;

    var_dump( $wp_scripts->registered[\'jquery\'] );
首先,我们定义一个数组,其中包含要注册的所有脚本。该类将遍历我们的脚本,并比较源代码是否已注册。

foo 脚本将始终注册,因为源未注册

  • bar 脚本将永远不会注册,因为它的源已经注册
  • jquery 脚本是一个特例。已存在名为jquery 但是类调用中的第二个参数表示必须用新的源代码替换此脚本源代码
  • 正如您在var_dump(), 的来源jquery 脚本已被类替换。因此,如果您扩展该类并调整测试(源、js文件名、版本、排队脚本等),就可以帮助最小化js冲突。

    结束

    相关推荐

    我需要帮助将jQuery脚本添加到WP和调用脚本到页面

    我编写了一个非常简单的jQuery脚本,但我不知道如何调用它。它在自己的目录中。首先,如何注册它,然后如何将其排队?我假设这就是它的完成顺序,注册它基本上意味着它可以使用,并且排队应用它。我知道我必须将代码添加到functions.php, 但不确定具体是什么。我读了一些东西,但没有说得更清楚。例如,WP。org说,如果我想使用谷歌的jQuery库,那么我应该注销WP的安装。这个论坛上有人说不要注销它。使用WP的版本很好,所以这就是我的functions.php:<?php function