javascript-如何在浏览器化的模块中使用我自己的jQuery版本

(我应该事先澄清一下：我的问题是关于Java语言中的闭包和客户端模块模式的.不是关于如何使用jQuery.noConflict()的.)

我有一些人们可以添加到其网站的Javascript.我希望自己的代码可以访问$变量,该变量解析为特定版本的jQuery,而该版本与页面加载的内容无关.如果我所有的代码都在我定义的闭包中的单个文件中,则这很容易.但是我正在努力寻找一种干净的方法来使用模块模式来实现此目的,其中我的代码位于单独的闭包中.

背景(即不是问题的显而易见的事物)

当我所有的代码都放在一个文件中时,这很容易.我可以在最外层的闭包中创建一个$var并使用$.noConflict(…)来确保外页保留自己的jQuery版本.像这样：

// This is easy and works as you'd expect
(function() {

    var $; // The $var in my local scope that the rest of my code can use.

    function loadMyVersionOfjQuery() {
        insertTheAppropriateScriptTagAndWaitForTheScriptToLoad(function() {
            // Set the $in my local scope and restore the global jQuery.
            $= jQuery.noConflict(true);
        }
    }

    loadMyVersionOfjQuery();

    ... etc. ...
})();

现在,我正在使用browserify将代码分解为单独的文件,这不再那么容易了.最麻烦的是我的jQuery版本是异步加载的事实.因此,在处理我的模块require()时,我的jQuery版本尚未就绪.这使我无法在模块闭包的顶层简单地创建和分配$var.

我研究过的一些想法

>如果我可以将模块的初始化推迟到运行jQuery之后,那么我的每个模块都可以定义自己的$var.但这似乎不可能.即使我试图将它们隐藏在函数回调中(browserify似乎实际上解析JS来查找require语句),也似乎遍历了我的require(…)调用.
>如果可以定义一个动态代理对象,则可以使用一个代理初始化我自己的$vars,该代理以后将委托给我的已加载版本的jQuery.但是Javascript不支持动态代理模式.
> Browserify实际上定义了一个闭包,当我的所有模块“转译”成一个文件时,它会将它们包装起来.如果我能以某种方式为它插入此闭包中的代码片段(简称为“ var $;”),那我就做生意了.但是我还没有找到任何方法可以做到这一点.
>作为最后的选择,我想到可以在browserify输出周围创建自己的闭包,并在那里定义所需的作用域变量.通过处理输出文件或通过围绕浏览器内容的几个简单文件的混合(例如“((function(){var $;“ bundle.js”})();“之类).).哈克.

有人有什么想法吗？如何在多个文件中开发客户端Javascript模块,但仍然在一起关闭所有代码？

解决方法:

可能是我是唯一遇到这种情况的人(浏览我想在所有模块中使用的异步加载的库),但是我将分享我想出的解决方法,以防万一…

我最终定义了一个模块,该模块异步加载jQuery,然后在就绪时通知侦听器.基本上,它是对异步“需求”的非常简单的支持.我所有想使用jQuery的模块都以一小段样板代码结束,如下所示：

var $; require('./jquery-provider').onLoad(function(jQuery) { $=jQuery; });

它并不完美,但很简单.它之所以有效,是因为我的库的入口点启动了我的“ jQuery提供程序”,并在调用其他所有模块之前等待就绪的回调.因此,尽管我的所有模块在解决所有依赖关系时都被Browserify积极执行,但是在我所需的库可用并传递给它们之前,模块中的所有功能都无法运行.

(如果此模式对其他人有用,则可以共享更多代码.)

标签：javascript,jquery,closures,browserify
来源： https://codeday.me/bug/20191012/1903483.html