Question

我想在我的WordPress插件中使用Bootstrap的popover（和它的工具提示依赖）脚本。

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

我可以尝试检查插件定义并动态加载脚本（如果它们不存在）（否则使用什么环境）。但是时间似乎很有挑战性，因为其中一个脚本依赖于另一个并且加载了相同名称的插件并不能保证它兼容版本甚至Bootstrap脚本。
脚本似乎包含noConflict()功能，我可以尝试使用它来隐藏我自己的副本，并在任何情况下忽略全局副本的存在。然而，我不知道如何获得正确的机制，因为popover需要工具提示才能工作。此外，通过查看Bootstrap问题跟踪器，似乎工具提示中的noConflict()目前已被破坏，并且仅在v3中修复。：（
似乎额外的装载机（例如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/

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

1 个答案: