在 CommonJs 的模块化规范中,每一个文件就是一个模块,拥有自己独立的作用域、变量、以及方法等,对其他的模块都不可见。CommonJS规范规定,每个模块内部,module 变量代表当前模块。这个变量是一个对象,它的 exports 属性(module.exports)是对外的接口。加载某个模块,其实是加载该模块的 module.exports 属性。require 方法用于加载模块。
模块化规范给项目带来极大的好处,在业务复杂,模块众多的大型项目中,开发者都遵循相同的规则来开发各自的模块,他们通过规范来约束模块的定义,大家不需要太多的沟通或者大量的文档来说明自己的模块使用规则,成千上万的模块就这样生产,并能够容易的使用。它的意义不仅是让模块看起来很规范,在合作开发、社区中传播中也起到了重大的作用。
一.commonjs 是什么
是作用于服务端应用程序,让js程序具有模块化功能的一种语法规范,执行方式是同步且运行时加载,
如何使用:
1.module.exports 导出
定义一个匿名对象,将需要导出的成员 赋值到这个匿名对象上,然后再赋值到module.exports 导出
2.exports 导出
exports在每个模块中扮演着一个对象,如同每次在模块中默认执行了let exports = module.exports,那么exports如何使用导出功能呢,只要在exports对象上声明一个要导出去的属性名,将要导出的值赋值进去,
但不能直接赋值给exports对象,否则就和module.exports没有关系,例如:exports=function fn() {},
导入时拿到的是一个undefind
3.require 导入
导入得到是一个对象,对象里面是导出模块所导出的成员,也可以同结构的方式按需导入
二.ES6模块化
es6模块化也是和commonjs一样是具有将js模块化功能的语法规范,不过只能用于在能识别es6语法浏览器环境,es6模块由两个命令构成:export, importexport 是向外提供输出对外接口,import是使用其他模块向内提供输入接口
1.export
使用export 导出想要导出的值,可以是对象,变量,函数
声明 的同时 且导出
将要导出的值赋值给对象的方式导出
那么以exports导出的模块该如何 导入到其他js文件呢?
1.2 导入模块 语法 import
import 是提供接收对外导入的接口
格式: import 以结构的额方式使用大括号包起来,里面填写按需导入的成员,必须和必须和对应模块导出的成员名一致,如果需要更改成员名,需要使用as关键词, from 对接的模块路径
如果需要把一整个模块的所有对象都导入成一个对象 使用 as 关键词,自定义一个对象名
2.0 export default
同样是和export一样暴露指定的变量或者对象函数
但是导入到 其他模块会稍微方便一些,可以不用像export 需要使用{}接收,直接使用一个自定义的对象名接收即可
commonjs与es6模块化直接的差别
commonjs导出是值的拷贝,es6模块化是导出的值的引用
commonjs加载是运行时加载,而es6模块化是编译时加载会比commonjs更加高效