commonJs规范,ES6规范 exports require import 使用

33 篇文章 2 订阅
12 篇文章 0 订阅

commonJs规范,ES6规范 exports require import 使用

ES6模块运行机制完全不一样,JS 引擎对脚本静态分析的时候,遇到模块加载命令import,就会生成一个只读引用。等到脚本真正执行的时候,再根据这个只读引用,到被加载的那个模块里去取值。
CommonJS输出的是值的拷贝,换句话说就是,一旦输出了某个值,如果模块内部后续的变化,影响不了外部对这个值的使用。CommonJS其实加载的是一个对象,这个对象只有在脚本运行时才会生成,而且只会生成一次

模块化解决的问题是:
- 加载顺序
- 污染全局

commonJs规范: 
同步加载,引用进来后变成立即执行函数
exports 
module.exports
require()

AMD
异步

CMD
依赖就近 按需加载

ES6规范:
export 
import { xxx } from './components'

export default {}
import xxx from './components'

@import   " "
总结

写到这里,本文也就基本结束了。我们总结一下文中涉及到的内容:

  1. 因为CommonJS的require语法是同步的,所以就导致了CommonJS模块规范只适合用在服务端,而ES6模块无论是在浏览器端还是服务端都是可以使用的,但是在服务端中,还需要遵循一些特殊的规则才能使用 ;
  2. CommonJS 模块输出的是一个值的拷贝,而ES6 模块输出的是值的引用;
    CommonJS 模块是运行时加载,而ES6 模块是编译时输出接口,使得对JS的模块进行静态分析成为了可能;
  3. 因为两个模块加载机制的不同,所以在对待循环加载的时候,它们会有不同的表现。
  4. CommonJS遇到循环依赖的时候,只会输出已经执行的部分,后续的输出或者变化,是不会影响已经输出的变量。而ES6模块相反,使用import加载一个变量,变量不会被缓存,真正取值的时候就能取到最终的值;
  5. 关于模块顶层的this指向问题,在CommonJS顶层,this指向当前模块;而在ES6模块中,this指向undefined;
  6. 关于两个模块互相引用的问题,在ES6模块当中,是支持加载CommonJS模块的。但是反过来,CommonJS并不能requireES6模块,在NodeJS中,两种模块方案是分开处理的。
一、区别:

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

2.CommonJS 模块的require()是同步加载模块,ES6 模块的import命令是异步加载,有一个独立的模块依赖的解析阶段。

3.CommonJS是对模块的浅拷⻉,ES6 Module是对模块的引⽤,即ES6 Module只存只读,不能改变其值,具体点就是指针指向不能变,类似const 。

4.import的接⼝是read-only(只读状态),不能修改其变量值。 即不能修改其变量的指针指向,但可以改变变量内部指针指向。可以对commonJS对重新赋值(改变指针指向),但是对ES6 Module赋值会编译报错。

二、共同点:

1.CommonJS和ES6 Module都可以对引⼊的对象进⾏赋值,即对对象内部属性的值进⾏改变。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
CommonJSES6都是模块化的实现方式,但是二者有以下区别: 1. CommonJS是同步加载模块,而ES6模块是异步加载模块。 2. CommonJS的模块输出的是一个值的拷贝,而ES6输出的是值的引用。 3. CommonJS模块是运行时加载,ES6模块是编译时输出接口。 以下是手写CommonJS的范例,其中MyModule.prototype.load()方法是用来加载模块的核心方法,包括了查找模块、读取模块代码、编译执行模块等步骤。MyModule._extensions['.js']方法是用来处理.js文件的: ```javascript const fs = require('fs'); const path = require('path'); const vm = require('vm'); function MyModule(id) { this.id = id; this.exports = {}; } MyModule._cache = {}; MyModule._extensions = { '.js'(module, filename) { const content = fs.readFileSync(filename, 'utf8'); module._compile(content, filename); } }; MyModule.prototype.load = function() { const ext = path.extname(this.id); MyModule._extensions[ext](this, this.id); }; MyModule.prototype._compile = function(content, filename) { const wrapper = `(function(exports,require,module,__filename,__dirname){${content}})`; const compiledWrapper = vm.runInThisContext(wrapper, { filename }); const dirname = path.dirname(filename); compiledWrapper.call(this.exports, this.exports, myRequire, this, filename, dirname); }; function myRequire(id) { const absPath = path.resolve(id); if (MyModule._cache[absPath]) { return MyModule._cache[absPath].exports; } const module = new MyModule(absPath); module.load(); MyModule._cache[absPath] = module; return module.exports; } ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端酱紫

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值