如何有条件地加载jQuery插件？

Question

我有一个可以在页面上多次添加的asp.net UserControl。在这个UserControl上，我正在使用一个jQuery插件，我只想加载一次。我正在使用以下代码条件性地加载jQuery本身：

if (typeof jQuery == 'undefined') {
    // load jquery 
    var script = document.createElement('script');
    script.type = "text/javascript";
    script.src = "/_layouts/SprocketValidator/jQuery.js";
    document.getElementsByTagName('head')[0].appendChild(script);
} else {
    //already loaded
}

是否有相应的方法来检查jQuery插件是否未定义？我使用的插件是digitalBush masked input plugin。

- Abe Miessler

---

一旦加载了 jQuery，你只需要检查： [code]if (!plugin){ $.getScript('pluginurl');}[/code] - lucifurious

Answer 1

尝试：

if (typeof jQuery.fn.mask == 'undefined')

jquery方法（通常包括插件方法）被存储为$.fn的属性，因此您需要检查插件内是否已知某个方法（例如mask()）作为$.fn的成员。

- Dr.Molle

---

这看起来很有前途，但我应该把它放在哪里呢？我试着把它放在我上面的代码后面，但是我得到了一个错误：在你提供的条件中，“jQuery未定义”。我猜测jQuery还没有加载完成，但是正确的放置位置是哪里呢？ - Abe Miessler

最好使用document.write()将<script/>标签（包括jQuery和插件）注入到DOM中。否则（当使用DOM方法时），无法保证脚本以通常的方式/顺序加载（就像它们被硬编码一样）。 - Dr.Molle

或者：观察jQuery脚本的加载事件，并在其触发时加载插件。 - Dr.Molle

Answer 2

你可以使用类似于YepNope.js的工具，你可以在这里找到它。然后，你可以像这样编写你的JavaScript代码：

yepnope({
  test: window.JSON,
  nope: "/_layouts/SprocketValidator/jQuery.js",
  complete: function () {
    var data = window.JSON.parse('{ "json" : "string" }');
  }
});

- Alexandre Jobin