Why doesn't this jquery plugin need a shim in order to work?

瘦欲@ 提交于 2019-12-24 02:23:58

问题


Shimming a jQuery plugin appears to be only for geniuses who throw salt over the correct shoulder.

However I did this....

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

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

    $("body").Modal();

and it just works. (n.b. jquery is being loaded via debowerify)

Why does this work? Would shimming it mean I don't need to do the assignments to jquery and $?

And how is browserify able to handle my plugin code not being in the correct commonjs format?


回答1:


I assume you are talking about the browserify-shim.

Shimming is used for making commonjs-incompatible files browserifiable.

To be commonjs-compatible, a file must export something. Here is a simple commonjs module:

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

Now in some other file, you could require mystring.js and use it like this:

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

jQuery

In older versions of jQuery (pre 1.11 and 2.1) nothing was exported. Instead jQuery would attach itself to the window object. That goes against the whole concept of modularity, making your code depend on objects and values to be present in the global scope.

Loading files in the right order could be tricky in more complex environments. Especially if some config files change some global variables, and your script should be executed when window.foo is set to "bar" but before other script updates window.foo value to "qux".

When we try to use jQuery before it is loaded, we get a ReferenceError:

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

That is where browserify-shim comes into play.

Shim

In essence browserify-shim does something like this:

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

Now you can use jQuery anywhere in your code, without relying on it to be present in the global scope:

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

It is about modularizing your project and keeping your global scope clean.



来源:https://stackoverflow.com/questions/27974054/why-doesnt-this-jquery-plugin-need-a-shim-in-order-to-work

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!