什么是重用jQuery的最佳方法?

时间:2013-05-17 18:42:17

标签: jquery onload document-ready

好的,有很多方法,但是,我只对1感兴趣,但使用哪种方法?说不上...

基本上,这就是困境。随后将在页面正文中调用jQuery。它需要知道jQuery之前是否已经定义过,如果是,请不要重新加载,但如果没有,则加载jQuery。现在,除此之外,我还需要运行任何jQuery代码,直到jQuery确实被定义为止。

以下是我一直在使用的内容,但是我在谷歌Chrome中对此后续调用中出现错误的意义上存在缺陷(声明jQuery未定义)

这是我的代码:

if(!window.jQuery)
{
   var script = document.createElement("script");
   script.type = "text/javascript";
   script.async = false;
   script.src = "//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js";
   var oScripts = document.getElementsByTagName("script");
   var s = oScripts[0];

   s.parentNode.insertBefore(script, s);
}

function dpmodPollBgColor()
{
    jQuery(document).ready(function($){
    // Uncaught ReferenceError: jQuery is not defined
        $.cssHooks.backgroundColor = {
            get: function(elem) {
                if (elem.currentStyle)
                    var bg = elem.currentStyle["backgroundColor"];
                else if (window.getComputedStyle)
                    var bg = document.defaultView.getComputedStyle(elem,
                        null).getPropertyValue("background-color");
                if (bg.search("rgb") == -1)
                    return bg;
                else {
                    bg = bg.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
                    function hex(x) {
                        return ("0" + parseInt(x).toString(16)).slice(-2);
                    }
                    return "#" + hex(bg[1]) + hex(bg[2]) + hex(bg[3]);
                }
            }
        }

        $(".bar-container").each(function() {
            if($(this).children(":first").css("width") != "0px")
            {
                var hexColor = $(this).children(":first").css("background-color");
                var bgColor = shadeColor(hexColor, 50);
                $(this).css({"background-color": bgColor});
            }
        });
    });
}

if (document.addEventListener)
    window.addEventListener("DOMContentLoaded", dpmodPollBgColor, false);
else
    addLoadEvent(dpmodPollBgColor);

我不想使用onReadyStateChange,因为我不希望它干扰同一页面上的其他AJAX调用。

基本上,我需要一个GUARANTEE的方法:1。如果没有加载jQuery,它将加载它。 2.在jQuery实际完成加载之前,它不会执行jQuery所在的功能。 3.无论为jQuery定义了什么变量,它都不会干扰页面上的任何其他jQuery代码。例如,如果其他一些代码将jQuery定义为usin,而不是默认的$

我发现自己很难让多个jQuery实例相互协调工作。

我现在使用的方法是:

  1. 如果未通过if(!window.jQuery)语句加载,则使用定义jQuery的if语句。

  2. 定义一个函数,并将所有jQuery包装在此函数中:

    function FunctionName() { jQuery的(文件)。就绪(函数($){

    //这里的所有jQuery代码;

    }); }

  3. 尝试加载函数onLoad,如果可能,使用if window.addEventListener,否则使用名为AddLoadEvent()的内置函数

  4. 实施中有一个缺陷,但逻辑对我来说似乎是正确的。我如何在谷歌浏览器中使用不同的功能名称来处理相同代码的多个实例?在所有其他浏览器中看起来都很好,谷歌Chrome浏览器。

    由于

1 个答案:

答案 0 :(得分:-2)

你有严重的错误。其中一些:

我现在使用的方法是这样的: 如果没有通过if(!window.jQuery)语句加载,则使用定义jQuery的if语句。

当然,由于JQuery对象不存在,它会给你一个错误。当你还没有使用偶数JQuery文件时,你试图使用JQuery对象。

if(!window.jQuery)//requesting JQuery object but..
{
   var script = document.createElement("script");
   script.type = "text/javascript";
   script.async = false;
   script.src = "//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js";//here is when you are loading its file.
   var oScripts = document.getElementsByTagName("script");
   var s = oScripts[0];

   s.parentNode.insertBefore(script, s);
}


****Define a function, and wrap all jQuery inside of this function:**

    function FunctionName() { jQuery(document).ready(function($){

    }); }*

*

为什么地球上有人将.ready()函数包装在函数中? .ready()功能是针对其名称所代表的:当文档准备好时不将其放在函数中。