当前位置: 首页 > Web前端 > HTML5

什么是JavaScript世界中的UMD

时间:2023-04-04 23:25:50 HTML5

UMD是JavaScript模块的通用模块定义模式。这些模块可以在任何地方工作,无论是在客户端、服务器还是其他地方。UMD模式通常尝试提供与当今最流行的脚本加载器(例如RequireJS等)的兼容性。在许多情况下,它使用AMD作为基础并添加特殊的外壳来处理CommonJS兼容性。所以首先要明白AMD.AMDAMD代表异步模块定义。它是CommonJS(CJS)规范的替代品。API指定了一种定义模块的机制,以便可以异步加载模块及其依赖项。这在浏览器环境中特别有用,在浏览器环境中同步加载模块会导致性能、可用??性、调试和跨源访问问题。AMD库公开了一个全局定义函数,其占用空间为:define(modulename?,[dependencyA?,dependencyB?,…],function(objectA,objectB,…){...varmyExportedObj=function(){…}returnmyExportedObj;});CommonJSCommonJS是一个项目,其目标是为浏览器之外的JavaScript指定一个生态系统(例如,在服务器上或在本地桌面应用程序中)。服务器端JavaScript已经存在了很长时间,并且可能提供一些优于其他语言的独特且有趣的优势,因为客户端和服务器都使用相同的语言。不幸的是,服务器端JavaScript非常分散。如果不修改rhino和V8,访问文件的脚本将无法工作。Spidermonkey和JavaScriptCore不能以相同的方式加载额外的模块。JavaScriptWeb框架与其解释器紧密相关,并且经常被迫创建一堆Python、Ruby和Java程序员认为理所当然的API。该项目的目标是创建一个标准库,最终允许Web开发人员从任意数量的Web框架和工具中进行选择,并在最适合其应用程序的平台上运行该代码。例如,foo.js在同一目录中加载模块circle.js。constcircle=require('./circle.js');console.log(`半径为4的圆的面积为${circle.area(4)}`);circle.js:constPI=Math.PI;exports.area=function(r){returnPI*r*r;};exports.circumference=function(r){return2*PI*r;};模块circle.js导出了函数area(..)和circle(..)。要将函数和对象添加到模块的根目录,您可以将它们添加到特殊的导出对象。模块的本地变量将是私有的,就好像模块被包装在一个函数中一样。在此示例中,变量PI是circle.js私有的。如果您希望模块导出的根是一个函数(例如构造函数),或者如果您想要在一次赋值中导出整个对象而不是一次构建一个属性,请将其分配给module.exports而不是exports.例子:constsquare=require('./square.js');varmySquare=square(2);console.log(`我的方块的面积是${mySquare.area()}`);square.js的实现://赋值给exports不会修改模块,必须使用module.exportsmodule.exports=function(width){return{area:function(){return(width*width);}};}下面通过一个实际的例子来加深理解:上图是一个自执行函数,在this和function(exports)中分别传入了global和factory这两个入参...的实现体要导出的功能日志只是一个简单的console.log。图中显示的require其实是Node.js的内部实现:当前模块是local.js,也就是node命令启动的模块,期望加载log.js:从paths数组中模块,可以看到Node.js解析模块的路径:从当前模块所在的文件夹开始,回到c盘根目录下node_moduleslog.js的路径:加载前编译:1157行的代码位置,变量content的内容就是log.js文件的内容:compile逻辑是执行log.js中的代码:在这个上下文中,factory指向图中绿色高亮的函数下面:define未定义,所以进入else分支:将log函数写入exports对象的log属性中:然后在我们的应用代码中,可以使用导出的log函数:更多Jerry的原创文章在这里:》Wang子溪”: