javascript - 如何在可能已经有 Bootstrap 脚本的环境中加载它们？

Question

我想在我的 WordPress 插件中使用来自 Bootstrap 的弹出窗口(及其工具提示依赖项)脚本。

插件很可能会出现在已经有 Bootstrap 的环境中，我正在尝试确定如何以稳健的方式实现它。

1. 我可以尝试检查插件定义并动态加载脚本(如果它们不存在)(否则使用环境所具有的)。然而，时间安排似乎具有挑战性，因为其中一个脚本依赖于另一个脚本，并且加载同名插件并不能保证它是兼容的版本，甚至根本不能保证 Bootstrap 脚本。

2. 脚本似乎包含 noConflict() 功能，我可以尝试使用它来隐藏我自己的副本并在任何情况下忽略全局副本的存在。然而，我又一次不确定如何获得正确的机制，因为 popover 需要工具提示才能工作。此外，从稍后查看 Bootstrap 问题跟踪器来看，工具提示中的 noConflict() 目前似乎已损坏，并且只会在 v3 中修复。 :(

3. 似乎额外的加载程序(例如 yepnope)可以为我处理这个问题，但感觉就像把自己挖得更深。

这些(或除了这些)方法中哪些是可行的？

Answer 1

使用 RequireJS 加载您自己的脚本并用一些闭包包装它们。

// let's say tooltip was defined already
$.fn.tooltip = function(data){
    $(this).mouseover(function(){
        console.log(data.title);
    });
};

// we'll apply the old tooltip to .tooltip1
$('.tooltip1').tooltip({
    title: 'tada',
    placement: 'bottom'
});

// what version of jquery did we have out here
console.log($.fn.jquery);

require({
    "paths": {
      "jquery": "//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min",
      "bootstrap": "//twitter.github.io/bootstrap/assets/js/bootstrap.min"
    },
    shim: {
        "bootstrap": {
            deps: ['jquery'],
            exports: '$.fn.tooltip'
        }
    }
}, ['jquery', 'bootstrap'], function($){
    // what version of jquery do we have in here
    console.log($.fn.jquery);

    // now we apply the bootstrap tooltip to .tooltip2
    $('.tooltip2').tooltip({
        title: 'tada',
        placement: 'bottom'
    });
});

http://jsfiddle.net/moderndegree/prSUF/