如何将依赖于 jQuery 的 Javascript 小部件嵌入到未知环境中

问题描述

我正在开发一个依赖于 jQuery 的 javascript 小部件.小部件可能会或可能不会加载到已经加载了 jQuery 的页面上.在这种情况下会出现很多问题......

I'm developing a javascript widget that depends on jQuery. The widget may or may not be loaded onto a page that already has jQuery loaded. There are many problems that come up in this case...

1. 如果网页没有jQuery，我必须加载我自己的jQuery.然而，这样做似乎存在一个微妙的时间问题.例如，如果我的小部件在 jQuery 完成加载和执行之前加载和执行，我会收到 jQuery is not defined 错误.

如果网页确实有 jQuery，我通常可以使用它.但是，如果 jQuery 版本较旧，我想加载我自己的.但是，如果我确实加载了自己的，我需要这样做，以免踩到他们的 $ 变量.如果我设置了 jQuery.noConflict() 并且他们的任何脚本都依赖于 $，那么我刚刚破坏了他们的页面.

If the web page does have jQuery, I can usually work with it. If the jQuery version is old, however, I would like to load my own. If I do load my own, however, I need to do it in such a way as to not stomp on their $ variable. If I set jQuery.noConflict() and any of their scripts depend on $, then I have just broken their page.

如果网页使用另一个 javascript 库(例如原型)，我还需要对原型的 $ 变量敏感.

If the web page uses another javascript library (e.g. prototype), I needed to be sensitive of prototype's $ variable also.

由于以上所有因素，不依赖 jQuery 似乎更容易.但在我走这条路之前，主要是重写我的小部件代码，我想先征求意见.

Because of all of the above, it is seeming easier to not depend on jQuery. But before I go down that road, which will involve mostly rewriting my widget code, I wanted to ask for advice first.

我的代码的基本框架，包括计时错误，有时还有 $ 错误，如下所示:

The basic skeleton of my code, including the timing bug and sometimes $ bugs, follows:

<script type="text/javascript" charset="utf-8">
// <![CDATA
 if (typeof jQuery === 'undefined') {
  var head = document.getElementsByTagName('head')[0];
  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = '{{ URL }}/jquery.js';
  head.appendChild(script);
 }
// ]]>
</script>
<script type="text/javascript" src="{{ URL }}/widget.js"></script>

我的小部件具有以下结构:

My widget has the following structure:

(function($) {
 var mywidget = {
  init: function() {
   ...
  }
 };
 $(document).ready(function() {
   mywidget.init();
 });
})(jQuery);

如果有任何指针或资源可用于实现可以在所有提到的环境中工作的小部件，我们将不胜感激.

If there are any pointers or resources for achieving a widget that can work in all the mentioned environments, they would be greatly appreciated.

推荐答案

在查看了一些答案和指针，并找到了一些有用的 jQuery 黑客后，我最终得到了如下的结果:

After reviewing some answers and pointers, and finding some helpful jQuery hackers, I ended up with something like the following:

(function(window, document, version, callback) {
    var j, d;
    var loaded = false;
    if (!(j = window.jQuery) || version > j.fn.jquery || callback(j, loaded)) {
        var script = document.createElement("script");
        script.type = "text/javascript";
        script.src = "/media/jquery.js";
        script.onload = script.onreadystatechange = function() {
            if (!loaded && (!(d = this.readyState) || d == "loaded" || d == "complete")) {
                callback((j = window.jQuery).noConflict(1), loaded = true);
                j(script).remove();
            }
        };
        (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script);
    }
})(window, document, "1.3", function($, jquery_loaded) {
    // Widget code here
});

这将加载尚未加载的 jQuery，并将其封装在回调中，这样它就不会与页面上预先存在的 jQuery 冲突.它还检查最低版本是否可用，或者加载已知版本——在本例中为 v1.3.它向回调(我的小部件)发送一个布尔值，以确定是否加载了 jQuery，以防需要进行任何触发器.只有在加载 jQuery 之后，它才会调用我的小部件，将 jQuery 传递给它.

This will load jQuery if it's not already loaded and encapsulates it in the callback so it doesn't conflict with a pre-existing jQuery on the page. It also checks that a minimum version is available or else loads a known version -- in this case, v1.3. It sends a boolean value to the callback (my widget) on whether or not jQuery was loaded in case there are any triggers needed to be made. And only after jQuery is loaded does it call my widget, passing jQuery into it.

这篇关于如何将依赖于 jQuery 的 Javascript 小部件嵌入到未知环境中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！