jquery - 为什么这个 jquery 插件不需要垫片就可以工作？

Question

填充 jQuery 插件似乎只适合那些对正确的事情撒盐的天才。

但是我这样做了......

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

    require('./libs/jquery-modal');

    $("body").Modal();

而且它确实有效。 (注意，jquery 正在通过 debowerify 加载)

为什么这有效？填充它是否意味着我不需要对 jquery 和 $ 进行分配？

browserify 如何处理我的插件代码不采用正确的 commonjs 格式？

Answer 1

我假设您正在谈论browserify-shim。

Shimming 用于使与 commonjs 不兼容的文件可浏览器浏览。

为了与 commonjs 兼容，文件必须导出某些内容。这是一个简单的 commonjs 模块:

// mystring.js
module.exports = "Hello Stackoverflow";

现在在其他一些文件中，您可以需要 mystring.js 并像这样使用它:

var str = require('./mystring.js');
console.log(str); // > "Hello Stackoverflow"

jQuery

在旧版本的 jQuery(1.11 和 2.1 之前)中，不会导出任何内容。相反，jQuery 会将自身附加到 window 对象。这违背了模块化的整个概念，使您的代码依赖于全局范围内存在的对象和值。

在更复杂的环境中，以正确的顺序加载文件可能会很棘手。特别是如果某些配置文件更改了某些全局变量，并且您的脚本应该在 window.foo 设置为“bar”时但在其他脚本将 window.foo 值更新为“bar”时执行“qux”。

当我们在加载 jQuery 之前尝试使用它时，我们会得到一个 ReferenceError:

<!-- index.hmtl -->
<script>
    var $body = $('body'); // ReferenceError: Can't find variable: $
</script>
<script src="jquery.js">

这就是 browserify-shim 发挥作用的地方。

垫片

本质上browserify-shim做了这样的事情:

// jquery-shim.js
loadScript('jquery.js') // now, window.$ contains a reference to the jQuery object
module.exports = window.$; // exports that jQuery object
window.$ = null;

现在您可以在代码中的任何位置使用 jQuery，而无需依赖它出现在全局范围内:

<!-- product-page.hmtl -->
<script> <!-- script is inlined for demo purposes only -->
    var $ = require('./jquery-shim.js');
    var $body = $('body'); // this works now
</script>

它是关于模块化您的项目并保持全局范围干净。