如何在浏览器中使用UMD而无需任何附加依赖项 [英] How to use UMD in browser without any additional dependencies
问题描述
假设我有一个这样的UMD模块（保存在'js / mymodule.js'中）：
（function（global，factory）{
typeof exports ==='object'&& typeof module！=='undefined'？factory（exports）：
typeof define == ='function'&& define.amd？define（['exports']，factory）：
（factory（（global.mymodule = global.mymodule || {}）））;
}（this，function（exports）{'use strict';
function myFunction（）{
console.log（'hello world'）;
}
}））;
如何在像这样的HTML文件中使用此模块？ （不包括requirejs，commonjs，systemjs等）。
pre $ <！doctype html>
< html>
< head>
< title>使用MyModule< / title>
< script src =js / mymodule.js>< / script>
< / head>
< body>
< script>
/ *如何从mymodule.js使用myFunction？ * /
< / script>
< / body>
< / html>
非常感谢您提供任何帮助。
好的，所以你在一个没有RequireJS，CommonJS，SystemJS等的环境中运行。
$ b
关键是 factory（（global.mymodule = global.mymodule || {}））这会做几件事：
-
如果
global.mymoduletruthy，那么它相当于
global.mymodule = global.mymodule //一个noop。
factory（global.mymodule）
-
否则它相当于：
global.mymodule = {}
factory（global.mymodule）
工厂内部：您的工厂应该导出要导出的内容从你的模块分配给 exports 。因此，您可以通过执行 exports.myFunction = myFunction 来导出 myFunction 。
工厂外：外部，导出的值将位于导出到全局空间的 mymodule 中。例如，当您要使用 myFunction 时，您可以执行 mymodule.myFunction（...）。
如果不清楚。您的代码中的工厂是以函数（exports）{>开头的函数，您正确地将 myFunction 。
Suppose I have an UMD module like this (saved in 'js/mymodule.js'):
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
typeof define === 'function' && define.amd ? define(['exports'], factory) :
(factory((global.mymodule = global.mymodule || {})));
}(this, function (exports) { 'use strict';
function myFunction() {
console.log('hello world');
}
}));
How can I use this module in an HTML file like this? (without requirejs, commonjs, systemjs, etc...)
<!doctype html>
<html>
<head>
<title>Using MyModule</title>
<script src="js/mymodule.js"></script>
</head>
<body>
<script>
/* HOW TO USE myFunction from mymodule.js ??? */
</script>
</body>
</html>
Many thanks in advance for any help.
Ok, so you are running in an environment without RequireJS, CommonJS, SystemJS, etc.
The key line is factory((global.mymodule = global.mymodule || {})) this does a few things:
If
global.mymoduletruthy, then it is equivalent toglobal.mymodule = global.mymodule // A noop. factory(global.mymodule)Otherwise it is equivalent to:
global.mymodule = {} factory(global.mymodule)
Inside the factory: Your factory you should export what you want to export from your module by assigning to exports. So you'd export myFunction by doing exports.myFunction = myFunction.
Outside the factory: Outside, the exported values will be on mymodule which was exported to the global space. When you want to use myFunction, for instance, you do mymodule.myFunction(...).
In case that's not clear. The factory in your code is the function that starts with function (exports) {, where you've correctly put myFunction.
这篇关于如何在浏览器中使用UMD而无需任何附加依赖项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
