javascript - 使用require时如何解决命名空间冲突

问题描述

问 题

最近在尝试require，但是在使用过程中发现有问题。
就是不知道如何解决命名空间冲突的问题。
举一个简单的例子：
JqueryUI中有tooltip，bootstrap里面也有，而基于某种特殊的原因，要把这两个框架都使用在同一个页面中。
普通（非模块化）的方法很好解决：

<script src="jquery-ui/jquery-ui.min.js" type="text/javascript"></script>
<script>
$.widget.bridge('uitooltip', $.ui.tooltip);  //重命名tooltip为uitooltip
</script>
<script src="bootstrap.min.js" type="text/javascript"></script>

但是使用require就不知道如何解决命名空间冲突了：

require.config({
    paths: {
        'jquery': 'jquery.min',
        'bootstrap': 'bootstrap',
        'jqueryUI': 'jquery-ui/jquery-ui.min'
    },
    shim: {
        'bootstrap': {
            deps: ['jquery'],
            exports: 'bs'
        },
        'jqueryUI': {
            deps: ['jquery'],
            exports: 'jqUI'
        }
    }
});
require(['jquery','jqueryUI','bootstrap'], function (){
    $(function(){
        $.widget.bridge('uitooltip', $.ui.tooltip);
        $('#a').uitooltip();    //使用jqui的tooltip装饰
        $('#b').tooltip();      //使用bootstrap的tooltip装饰
    });
});

试过调换require中获取顺序，也无法得到预期结果。
新学require，望各位帮帮忙。

解决方案

Ok，我知道了，原来是调用顺序的问题。
在经过了不断刷新页面的过程中，发现偶尔会产生正确的结果（即#a使用uitooltip，#b使用bootstraptooltip）。
原因是jqueryui.js(下称jqui)文件的大小是235kb，bootstrap.js(下称bs)文件大小是66kb，jqui需要较多时间去加载，因此，无论如何调换require的顺序，jqui总是后加载完成的。因此此时，在全局环境中的tooltip就是后加载完成的juqi tooltip了。所以$('#b').tooltip();就无法使用bs tooltip了。
解决方法很简单，定义加载顺序，要求bs一定要在jqui加载完之后才载入，最后改成如下即可：

require.config({
    paths: {
        'jquery': '../jquery.min',
        'bootstrap': 'bootstrap',
        'jqueryUI': 'jquery-ui/jquery-ui.min'
    },
    shim: {
        'bootstrap': {
            deps: ['jquery','jqueryUI'],
        }
    }
});
require(['jquery','jqueryUI','bootstrap'], function (){
    $(function(){
        $.widget.bridge('uitooltip', $.ui.tooltip);
        $('#a').uitooltip();
        $('#b').tooltip();
    });
});

这篇关于javascript - 使用require时如何解决命名空间冲突的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！