问题描述
我正在开发一个依赖于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...
-
如果网页没有jQuery，我必须加载我自己的jQuery。然而，这样做时似乎有一个微妙的时间问题。例如，如果我的小部件在jQuery完成加载和执行之前加载并执行，我得到
jQuery未定义错误。
如果网页上有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小部件嵌入到未知环境中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！