Javascript小部件：检查jQuery和jQuery UI的可用性

Question

我需要开发一个Javascript Widget（几乎完成），并将其集成到第一个站点中，我发现了一些问题。 我的Widget需要加载一些库（jquery，jquery ui，mustache等）； 通过使用以下功能将新的脚本标签注入网站来执行此操作：

loadFile: function (filename, filetype) {
    if (filetype == "js") { //if filename is a external JavaScript file
        var fileref = document.createElement('script')
        fileref.setAttribute("type", "text/javascript")
        fileref.setAttribute("src", filename)
    } else if (filetype == "css") { //if filename is an external CSS file
        var fileref = document.createElement("link")
        fileref.setAttribute("rel", "stylesheet")
        fileref.setAttribute("type", "text/css")
        fileref.setAttribute("href", filename)
    }
    if (typeof fileref != "undefined")
        document.getElementsByTagName("head")[0].appendChild(fileref)
}

这是好习惯吗？ 现在，问题出在小部件的托管页面可能已经加载了jquery和jquery-ui。 我无需更改太多代码就可以做什么？ 我已经找到了描述jquery解决方案的页面 。 但是jQuery-ui呢？ 我目前有一个问题，我的日期选择器不起作用，因为该站点已经包含日期选择器和jquery-ui。 我可以更改我的窗口小部件，以使加载的javascript文件不会与包含站点发生冲突吗？ 而且还可以在同一站点上拥有窗口小部件的两个实例吗？ 对于CSS东西，我已经有了一个解决方案，方法是在小部件内容周围创建一个带有特定ID的diff，并在所有CSS选择器中使用该ID。

因此，我主要关心的是加载我的库，并在正确的版本中提供它们。 我的窗口小部件对托管站点没有任何影响，反之亦然。 我可能包括jquery，但该网站可能会将$用作其他任何内容。

我已经考虑过使用Basket Js执行javascript加载，但这不能解决注入问题。

有没有一种很好的方法可以将我的所有库都包含到我的widget.js中，而无需加载外部资源？ 这样我就可以对内部jquery使用§了？ 这必须是适用于所有类型JS库的通用解决方案。

我也发现了这一点，但它仅适用于jQuery，不适用于其他库。

这种解决方案有最佳实践吗？

Answer 1

最佳实践：使小部件保持简单。

无需包括自动加载功能，只需指定要求并允许实现的客户端包括正确的依赖项即可：

This widget requires:

+ jQuery 1.9+
+ jQuery UI 1.10.4+

通过在运行小部件时对jQuery进行检查，您可以快速失败并向实施该小部件的开发人员报告依赖项正在混乱：

if (!window.jQuery) {
    throw new Error('The widget requires jQuery, please check http://widget/docs');
}

便利套餐

诸如Grunt之类的构建工具可用于自动组合包含其他库的“便利”包。 我将提供这种方法作为替代方案，因为客户可能希望避免这种模式。 如果客户端使用CDN，则浏览器甚至可以跨站点使用流行库的缓存副本。 例如jQuery有一个jQuery CDN 。

别名的封闭

闭包可用于将小部件变量保留在全局名称空间之外，它也可用于将jQuery别名为$，即使$可能与页面的其余部分完全不同：

(function ($) {

    // Widget

}) (window.jQuery)

需求JS

RequireJS可以通过组织页面依赖项来提供帮助：

define(['jquery-ui'], function($) {

    // Widget

});

这意味着实施客户将需要使用RequireJS ，一种替代方法是将其作为另一种替代方法，并从主要来源进行构建。 对于较大的项目，使用RequireJS将组件保持较小和分离是一个非常有用的模式，如果沿这条路线走，可以将RequireJS包构建为可以使用的包，而无需客户端通过包含Almond来包含RequireJS。 匀

凉亭

Bower还可以用于注册您的窗口小部件并指定您的依赖关系，以便实施客户端可以通过运行简单的install命令来获取您的窗口小部件及其所需的所有依赖关系：

bower install my-widget

结论

即使仅实现前两个建议，它也将使您的小部件轻巧且易于使用。 假设开发人员只是将小部件添加到页面，他们将遇到一个错误，告诉他们缺少依赖项，并查阅文档，他们可以确切地找到使它起作用所需的内容。

据我所知，版本兼容性是一个问题，没有简单的直接解决方案，后两种工具确实可以最大程度地减少问题。 例如，假设您有两个小部件，它们需要一个根本不同且不兼容的库版本，并且彼此之间完全不了解。 只是宿主页面要做很多工作才能使两个小部件一起工作，或者必须升级一个小部件以使用该库的最新版本。