现在的位置: 首页 > web前端 > 正文

模块化的前端框架

2020年07月06日 web前端 ⁄ 共 980字 ⁄ 字号 评论关闭

  定义模块,即一个单独的文件就是一个模块,切该文件中的作用域独立,当中的变量是无法被其他文件引用的,如果要使用需要将其定义为global。先判断是否支持Node.js模块格式(exports是否存在),存在则使用Node.js模块格式。


  主流模块化框架


  commonJS


  AMD(AsynchronousModuleDefinition)


  CMD(CommonModuleDefinition)


  UMD(UniversalModuleDefinition)


  ES6规范


  commonJS


  commonJS模块化


  输出模块:模块只有一个出口,即使用module.exports对象,将需要输出的内容放入到该对象中;


  加载模块:通过require加载,例如:varmodule=require('./moduleFile.js');该module的值即对应文件内部的module.exports对象,然后就可以通过module名称去引用模块中的变量和函数了;


  commonJS是基于服务器端开发的,由于require是同步加载,所以当在浏览器中是无法运行的,所以就有了下面的异步模块的出现。


  AMD(AsynchronousModuleDefinition),异步模块定义


  AMD是一套基于浏览器端模块化开发的规范,在进行页面开发时需要用到该规范的库函数,即:requireJS


  requireJS解决了两个问题


  多文件依赖关系处理,被依赖的需要早一步被加载;


  加载js时候页面会停止渲染,如果加载的文件越多,页面失去响应的时间就会越长;


  CMD(CommonModuleDefinition)通用模块定义


  就近依赖,需要时再进行加载,所以执行顺序和书写顺序一致;这点与AMD不同,AMD是在使用模块之前将依赖模块全部加载完成,但由于网络等其他因素可能导致依赖模块下载先后顺序不一致这就导致了,执行顺序可能跟书写顺序不一致的情况。


  UMD(UniversalModuleDefinition)


  总之,希望提供一个前后端跨平台的解决方案(支持AMD与CommonJS模块方式)。再判断是否支持AMD(define是否存在),存在则使用AMD方式加载模块。前两个都不存在,则将模块公开到全局(window或global)。


  

抱歉!评论已关闭.