ES6与CommonJS中如何对模块进行处理的

　　介绍

本篇文章为大家展示了ES6与CommonJS中如何对模块进行处理的,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。

ES6和CommonJS都有自己的一套处理模块化代码的措施,即JS文件之间的相互引用。

为了方便两种方式的测试,使用nodejs的环境进行测试

<强> CommonJS的模块处理

使用需要来引入其他模块的代码,使用模块。出口来引出

//, exportDemo.js 　　时间=count  1; 　　时间=module.exports.count 计算; 　　时间=module.exports.Hello 函数(),{ 　　,var 名称;=,this.setName 函数(新名称),{=,name 新名称; 　　,}=,this.sayHello 函数(),{ 　　先生,console.log (“hello 干净,+,名称); 　　,}=,this.getId 函数(),{ 　　return 数+ + 　　,} 　　} //, requireDemo.js 　　var {你好},=,要求(“。/exportDemo") 　　var  hello =, new  Hello (); 　　 　　hello.setName (“Blank"); 　　hello.sayHello ();

在终端执行requireDemo <代码>节点。js代码>

导出的你好函数是原函数的一次拷贝,修改喂函数的属性值不会对其他需要的地方造成影响

var {,你好,count },=,要求(& # 39;。/exportDemo& # 39;) 　　var  hello =, new  Hello ();//,让数自增 　　console.log (hello.getId ()); 　　console.log (hello.getId ());//,发现获取的还数是原值 　　console.log(计数)//,真正的计数其实是已经改了的 　　var  newHello =, new  Hello (); 　　console.log (newHello.getId ()) 　　 　　var {,你好:newHello,,数:,newCount },=,要求(& # 39;。/exportDemo& # 39;) 　　console.log (newCount, & # 39; newCount& # 39;);//,再次要求取得的newHello和之前需要的你好指向同一个拷贝 　　console.log (newHello ===,你好)

<强> ES6的模块处理

<强> nodejs中运行ES6风格的代码

nodejs默认是不支持ES6的模块处理方案的。

但是在8.5.0之后,ES6代码的文件格式定为乔丹后,可使用<代码>节点——experimental-modules xxx。乔丹运行。

//, exportDemo.mjs=export  let  a  1; //, importDemo.mjs 　　{一}import 得到& # 39;。/exportDemo.mjs& # 39; 　　console.log (a)

<强>与CommonJS模块处理的区别

CommonJS模块输出的是一个值的拷贝(已在上一章验证),ES6模块输出的是值的引用。

//, exportDemo.mjs 　　时间=export  let  counter  1; 　　export  function  incCounter (), { 　　,counter  + +; 　　} //, importDemo.mjs 　　import {,计数器,incCounter },得到& # 39;。/exportDemo.mjs& # 39; 　　 　　incCounter (); 　　console.log(柜台)//,打印结果为2,而不是初始值的1

CommonJS模块是运行时加载,ES6模块是编译时输出接口

Nodejs此类的运行环境会在一个闭包中运行CommonJS模块代码

(函数(出口,,,,模块,__filename,, __dirname), {//,Module  code  actually  lives 拷贝 　　});

ES6模块不会缓存运行结果,而是动态地去被加载的模块取值,并且变量总是绑定其所在的模块。

//, exportDemo.mjs 　　时间=export  let  a  1; 　　export  const  b =, 2; 　　export  let  obj =, {};//importDemo.mjs 　　import  {,, b },得到& # 39;。/exportDemo.mjs& # 39; 　　console.log (a, b) 　　a =, 1,//,报错,TypeError:, Assignment 用constant 变量,出口出来的值是一个只读引用 　　obj.x =, 1//,可以改变属性值

在ES6模块中我们更多地要去考虑语法的问题出口

有违约时候我们会在代码发现<代码>出口默认obj>

默认是ES6引入的与出口配套使用的关键字,用来给匿名对象,匿名函数设置默认的名字用的

出口出来的值必须要有一个命名,否则从语法层次便会报错

让我们看一下以下几个会报错的错误例子

出口匿名对象

export  {, x: 1,}//,报错,SyntaxError: Unexpected 令牌,这是一个编译阶段的错误//,正确写法 　　export  default  {, x: 1,}

出口匿名函数

export 函数(),{}//,报错,SyntaxError:, Unexpected  token  (//,正确写法 　　export  default 函数(),{}

ES6与CommonJS中如何对模块进行处理的