ES Module、CommonJS、AMD、CMD规范

 对于我这种前端小白,接触的时间短对于一些前端历史不是很了解,我也是特意翻了下原来学习的东西,对这些规范整合了一下。

  1. 先说一下CommonJS规范吧,对于熟悉node.js的应该知道,node使用的规范就是CommonJS规范。既然是node的规范,为什么前端不能沿用呢,CommonJS规范使得每个文件或者说是每个模块都有了单独的作用域,解决了作用域这一个大问题。但是CommonJS是对文件的依赖在加载的时候进行全部引入并且导入的操作是同步导入的,这对于node来说是没问题的,但是对于前端来说是不能够接受的,毕竟加载一次重新加载所有依赖,这对于页面是不友好的。总结了一下CommonJS的特点:一个文件代表一个模块、每个模块有自己单独的作用域、通过require引入依赖、通过module.exports导出依赖

  2.再说一下AMD规范,AMD是通过define来引入文件以及插件,define方法有三个参数,第一参数代表的自己模块的命名,第二个参数是一个数组,代表的是依赖的文件及插件。第三个参数是一个方法,可以在这个方法中导出方法也可以在这个方法里初始化操作。AMD规范的依赖是异步导入的,先加载依赖然后执行第三个参数,这也就是为什么说AMD是依赖前置的原因。

  3. CMD规范,是sea.js和CommonJS形成了CMD规范,同样也是define方法,define方法参数传入一个方法,在这个方法里会内置三个方法,require、exports、module方法,通过require方法进行引入,通过module.exports方法进行导出,这样的导出引入方法就形成了CMD依赖就近的原则。还可以通过module.exports导出方法。

  4. ES Module规范,也是我们现在前端的规范,通过import引入文件,通过export导出文件,也可以通过export default导出文件,export default导出的文件是导出的默认文件,也就是不能通过import {}这种方式引入,import {}这种方式看着和es6的解构一样实际上不是一个东西,只是一种用法,千万别认为是解构。ES Module规范特点: 自动采用严格模式、运行在单独的私有作用域中、通过CORS的方式请求外部JS模块,也就是服务端必须支持CORS不然会报跨域错误、script标签会自动延迟加载,和script标签中加上type='module'是一样的,也和加上define是一样的,如果没有异步加载的话会阻塞页面的渲染,加载完成后才会渲染页面。

posted on 2021-11-26 11:14  要慢慢来  阅读(178)  评论(0编辑  收藏  举报

导航