如何使用我自己版本的jQuery和browserified模块

 

（我应该先澄清一下：我的问题是关于Javascript中的闭包和客户端模块模式，而不是如何使用jQuery.noConflict（）。）

我有一些Javascript可以添加到他们的网站。 我希望我自己的代码能够访问$ variable，这个变量可以解析为独立于页面加载的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版本异步加载。 所以当我的模块需要（）正在处理我的jQuery版本还没有准备好。 这可以防止我简单地在模块关闭的顶层创建和分配$ var。

我看过的一些想法

  • 如果我可以推迟我的模块的初始化，直到jQuery运行之后，那么我的每个模块都可以定义它们自己的$ var。 但这似乎不可能。 它看起来像我的要求（...）调用积极遍历，即使我试图将它们隐藏在函数回调（browserify似乎实际上解析JS来查找require语句）。
  • 如果我可以定义一个动态代理对象，我可以用一个代理来初始化我自己的$ vars，然后委托给我加载的jQuery版本。 但Javascript不支持动态代理模式。
  • Browserify实际上定义了一个闭包，当它们被“转译”为单个文件时，封装了所有模块。 如果我能以某种方式给它一小段代码插入到这个闭包中（简单的说就是“var $;”），我就可以开始工作。 但我还没有找到任何方法来做到这一点。
  • 作为最后的手段，我想到我可以在browserify输出周围创建自己的闭包，并定义我需要的范围变量。 通过处理输出文件或者通过在browserify内容周围对几个简单文件进行hacky连接（例如“（function（）{var $;”+ bundle.js +“}）（）;”。太hacky。

    • 有没有人有任何想法？ 你如何在多个文件中开发客户端Javascript模块，但是仍然可以将所有代码关闭在一起？

    可能是因为我是唯一一个遇到过这种情况的人（Browserify +我想在所有模块中使用异步加载的库），但我将分享我刚刚提出的解决方法案件...

    我最终定义了一个异步加载jQuery的模块，然后在准备就绪时通知监听器。 它基本上是对异步'require'的一个非常简单的支持。 我想要使​​用jQuery的所有模块最后都会包含一些这样的样板代码： 

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

    这并不完美，但很简单。 它的工作原理是因为我的库的入口点启动了我的'jQuery提供程序'，并在它调用所有其他模块之前等待一个准备好的回调。 因此尽管我的模块都被Browserify积极执行，因为它可以解决所有的依赖关系，但是我的模块中的任何函数都不会运行，直到我需要的库可用并已传递给它们。

    （如果这种模式对其他人有用，我可以分享更多的代码。）

    在我的app.js中我有这个 

    var $ = require('jquery')(window);  global.jQuery = require("jquery");

    然后使用从npm“plugin”下载并导入de模块并执行，就像这样。 

    var plugin    = require('plugin');
plugin();

    并且工作正常。

    链接地址: http://www.djcxy.com/p/32895.html

    上一篇: How to use my own version of jQuery with browserified modules

    下一篇: Submodules in Browserify