问

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

考试大试题网发布于 2022-11-15 10:03

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

但是使用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，望各位帮帮忙。

2 个回答

恭喜，题主自己解决了问题！
嗯，你这个跟命名冲突没关系，而是加载顺序。
命名冲突的话，注意你的paths设置，当然这个只能解决文件(模块)加载的冲突，处理不了模块中方法名的冲突。

我也写过一个模块管理的东东，原理和require，seajs采取了不一致的处理，貌似也不能很好的解决方法名冲突的问题(其实从某种意义上来说，方法名冲突这种是模块设计不合理)

2022-11-15 10:13 回答

温艺海
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();
    });
});
```
2022-11-15 10:13 回答

与人无缘-

撰写答案

今天，你开发时遇到什么问题呢？

立即提问

热门标签