完整示例

Question

多么糟糕的标题。也许有人可以为我编辑它。这是独家新闻：

我需要在jQuery无冲突模式下工作，但我仍然想利用$快捷方式，所以我的所有函数等都在(function($){ ... })(jQuery);的典型闭包中定义

所有这些都是在我的HTML网页顶部包含的外部source.js文件中定义的。

稍后，我需要添加一些内联<script>，它使用我在闭包中定义的一个实用函数。显然，我已将自己命名为一个框，无法访问该功能。

这里使用的模式是什么？

Answer 1

要控制在全局命名空间中显示的内容和内容，可以自定义通过一个全局对象公开所需内容，通常以全部大写字母显示。

FOO.module1.init();
FOO.module2.init();

您可以通过确保FOO存在来实现此目的，如果不存在：创建它。

var FOO = this.FOO || {};

模块名称空间相同：

FOO.module1 = FOO.module1 || {};

然后在匿名函数内部，展示你想要的东西。

完整示例

<强> module1.js：

var FOO = this.FOO || {};
FOO.module1 = FOO.module1 || {};

(function ($) {
    var my, local, data;

    function init() {
        // use my, local and data here.
    }

    FOO.module1.init = init;
}(jQuery));

<强> module2.js：

var FOO = this.FOO || {};
FOO.module2 = FOO.module2 || {};

(function ($) {
    var some, other, data;

    function init() {
        // use some, other and data here.
    }

    FOO.module2.init = init;
}(jQuery));

<强> controller.js：

FOO.module1.init();
FOO.module2.init();

Answer 2

Magnar的答案是找到任何复杂的方法。但只是为了完整起见，对于非常简单的事情，你可以像以下那样使它全球化：

$.noConflict();

(function($){
    window.doSomething = function(){
        $("body").css("background-color","red");
    }        
})(jQuery);


doSomething();

通过将函数添加到window，它变为全局。

http://jsfiddle.net/cxTYV/

如何使用jQuery无冲突模式和多个脚本位置

2 个答案:

完整示例