javascript - 检查页面是否有 jQuery、jQuery.ui 和 jQuery.ui.css 的最佳方法是什么

Question

我有一些小部件应该嵌入到页面中并且应该可以拖动和调整大小。所以目前的做法是检查页面是否已经包含了jQuery、jQuery.ui和jQuery.ui样式。如果它有所有这些，就使用它们，否则——从我们的服务站点插入它们，并适本地标记。我对它的实现方式有些怀疑，尤其是在这里 ─ 首先它检查 jQuery。如果找到，它会尝试查找 jQuery.ui 样式。它通过名称的子字符串查找 2 个公共(public)类:

for(var i = 0, j = stylesheets.length; i<j; i++){
    var classes = stylesheets[i].rules;
    if(classes){ console.log({classes:classes});
        for (var x = 0, y = classes.length; x < y; x++) {
            if( classes[x].selectorText.indexOf('.ui-draggable')!=-1
                || classes[x].selectorText.indexOf('.ui-resizable')!=-1) {
                if(classes[x].cssText){
                    console.log('found: '+classes[x].cssText);
                    classCount++;
                    if(classCount==2){
                        break checkStyles;
                    }
                }
            }
        }
    }else console.log('no classes');
}

重点来了。我怎么能确定，如果它找到 2 个类，这意味着有所有必要的类来保证正确的小部件行为？ 还是不管它们在页面上的存在，我都应该添加这些样式吗？但如果我这样做，那么它将使样式内容加倍。这看起来像是一个两难选择。那么是否有一个标准成熟的方法呢？

---

更新。重点不是检测 jQuery，而是如何最好地管理 jQuery.ui 样式。

---

Answer 1

jQuery 添加了一个全局“jQuery”对象(jQuery.ui 也是如此)，因此您可以这样做:

if (typeof jQuery != "undefined") {
    if (typeof jQuery.ui != "undefined") {
        // You've got jQuery with UI
    } else {
        // You've only got jQuery, no UI
    }
} else {
    // No jQuery
}