Question

填充jQuery插件似乎只适用于在正确的肩膀上撒盐的天才。

但是我这样做了....

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

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

    $("body").Modal();

它只是有效。（n.b. jquery正在通过debowerify加载）

为什么这样做？填补它意味着我不需要对jquery和$进行分配吗？

浏览器如何能够处理我的插件代码不是正确的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之前将值设置为“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>

关于模块化您的项目并保持全球范围的清洁。

为什么这个jquery插件不需要垫片才能工作？

1 个答案:

的jQuery

沉