Es6/CommonJs/AMD模块系统的差异以及用法

参考链接:https://www.cnblogs.com/chinabin1993/p/10565816.html#03-AMD

一、什么是模块化?

  在js出现的时候,js一般只是用来实现一些简单的交互,后来js开始得到重视,用来实现越来越复杂的功能,而为了维护的方便,我们也把不同功能的js抽取出来当做一个js文件,但是当项目变的复杂的时候,一个html页面可能需要加载好多个js文件,而这个时候就会出现各种命名冲突,如果js也可以像java一样,把不同功能的文件放在不同的package中,需要引用某个函数或功能的时候,import下相关的包,这样可以很好的解决命名冲突等各种问题,但是js中没有模块的概念,又怎么实现模块化呢

  模块化开发是一种管理方式,是一种生产方式,一种解决问题的方案,一个模块就是实现特定功能的文件,有了模块,我们就可以更方便地使用别人的代码,想要什么功能,就加载什么模块,但是模块开发需要遵循一定的规范,否则就都乱套了,因此,才有了后来大家熟悉的AMD规范,CMD规范,CommonJs规范

  CommonJs/ES6/AMD等等叫法只是一种规范,不用的规范中,模块化有不同的实现方式

二、模块加载方式

  1. ES6
  2. CommonJs
  3. AMD
  4. CMD

(1)ES6规范

参考地址:阮一峰老师讲解的 ES6规范

ES6 模块的设计思想是尽量的静态化,使得编译时就能确定模块的依赖关系,以及输入和输出的变量。CommonJS 和 AMD 模块,都只能在运行时确定这些东西。

用法:

  模块功能主要由两个命令构成:exportimportexport命令用于规定模块的对外接口,import命令用于输入其他模块提供的功能。

一个模块就是一个独立的文件。该文件内部的所有变量,外部无法获取。如果你希望外部能够读取模块内部的某个变量,就必须使用export关键字输出该变量。下面是一个 JS 文件,里面使用export命令输出变量。

export const one = '这是第一种导出方法'
const two = '这是第二种导出方法'
export {two} //这是第二种导出方法 {two}是ES6的简写 等于 {two:two}
function three(){
  console.log('这是第三种导出的方法')
}
export {three}
// 或者
// export function three(){
//   console.log('这是第三种导出的方法')
// }

需要特别注意的是,export命令规定的是对外的接口,必须与模块内部的变量建立一一对应关系。

const four = '这是错误的方法'
export four //错误
export 1 //错误

另外,export语句输出的接口,与其对应的值是动态绑定关系,即通过该接口,可以取到模块内部实时的值。

export let five = '这是第五种导出的方法'
setTimeout(() => {
  five = '第五种'
}, 5000);

上面代码输出 这是第五种导出的方法,后面就变成了第五种

 

 

运行时可能会报错,Warning: To load an ES module, set "type": "module" in the package.json 

 

解决方法:https://blog.csdn.net/weixin_44505553/article/details/108830616

是要配置package.json

这一点与 CommonJS 规范完全不同。CommonJS 模块输出的是值的缓存,不存在动态更新,详见CommonJs规范

 最后,export命令可以出现在模块的任何位置,只要处于模块顶层就可以。如果处于块级作用域内,就会报错,import命令也是如此。这是因为处于条件代码块之中,就没法做静态优化了,违背了 ES6 模块的设计初衷。

function foo() {
  export default 'bar' // SyntaxError
}
foo()

上面代码中,export语句放在函数之中,结果报错。

posted @ 2021-01-13 21:08  lonelyshy  阅读(196)  评论(0编辑  收藏  举报