关于javascript:前端模块ES6与commonJS区别

34次阅读

共计 3488 个字符,预计需要花费 9 分钟才能阅读完成。

一、概览

  1. 模块化就是将变量和函数 放入不同的文件中
  2. 模块的作用域是公有的 外部定义的代码只能在以后文件中应用
  3. 内部应用那么须要将此模块裸露进来
  4. 模块化的意义缩小全局变量, 防止变量名和函数命名抵触
  5. 进步代码的复用性和维护性

区别

  • commonJS 对模块依赖解决是“动静的”,ES6 Module 是动态的
  • commonjs 模块输入的是值的浅拷贝,ES6 模块输入的是值的援用 (cmmonjs 模块输入后被扭转,其援用模块不会扭转,而 ES6 模块会扭转)。
  1. commonJS 这个“动静的”指的是模块依赖关系的建设产生在代码运行阶段。
  2. ES6 这个“动态的”指的是模块依赖关系建设产生在代码编译阶段。
  3. webpack 的 tree-shaking 只能作用于 ES6 模块,就是因为 ES6 模块在编译时就能确定依赖

二、commonJS

CommonJS 标准,每个模块外部有两个变量能够应用 require 和 module

  1. require 用来加载某个模块
  2. module 代表以后模块,是一个对象,保留了以后模块的信息。exportsmodule 上的一个属性,保留了以后模块要导出的接口或者变量,应用 require 加载的某个模块获取到的值就是那个模块应用 exports 导出的值
  3. module.exports对象会作为 require 函数的返回值被加载。require的模块门路能够动静指定,反对传入一个表达式,也能够通过 if 语句判断是否加载某个模块。因而在 CommonJS 模块被执行前,并不能明确依赖关系,模块的导入导出产生在代码运行时。

CommonJS 的 exports

Node.js 中的 CommonJS 标准,每个模块都有一个 exports 公有变量,exports 指向 module.exports
exports 是模块内的公有局部变量,它只是指向了 module.exports,所以间接对 exports 赋值是有效的,这样只是让 exports 不再指向 module.exports 了而已

// 能够这么了解 每个模块开始的中央都默认增加了上面的代码
var exports = modules.exports

// test.js
const name = 'yang';
let age = 29;

exports.name = name;
exports.getAge = function () {return age;};

CommonJS 的 require

  • require 命令的基本功能是,读入并执行一个 js 文件,而后返回该模块的 exports 对象。如果没有发现指定模块,会报错。
  • 第一次加载模块的时候,Node 会缓存该模块,前面再次加载该模块,就间接冲缓存中读取 module.exports 属性。
  • CommonJS 模块的加载机制是,require 的是被导出的值的拷贝。也就是说,一旦导出一个值,模块外部的变动就影响不到这个值
// test.js
const name = 'yang';
let age = 29;
exports.name = name;
exports.age = age;
exports.setAge = function () {age++;}
 
// index.js
let p = require('./test.js');
 // yang
console.log(p.name);
 // 29
console.log(p.age);
p.name = 'yang++'
// yang++
console.log(p.name); 
// 外部 age++ 不影响导出的值
p.setAge(); 
console.log(p.age); // 29
// 导出的 age++ 会自增
p.age++; 
let b = require('./test.js');
 // yang++
console.log(b.name);
// 30
console.log(b.age); 

实现一个 commonJS

  • 向一个立刻执行函数提供 require,exports,module 三个参数,模块代码放在这个立刻执行函数外面。模块导出值放在 module.exports 中,这样即实现了模块化加载
(function(module, exports, require) {
    // b.js
    var a = require("a.js")
    console.log('a.name=', a.name)
    console.log('a.age=', a.getAge())
 
    var name = 'yang'
    var age = 29
    exports.name = name
    exports.getAge = function () {return age}
 
})(module, module.exports, require)
  • webpack 编译后的代码
// bundle.js
(function (modules) {// 模块治理的实现})({'a.js': function (module, exports, require) {// a.js 文件内容},
  'b.js': function (module, exports, require) {// b.js 文件内容},
  'index.js': function (module, exports, require) {// index.js 文件内容}
})
  • webpack 实现__webpack_require__,初始化一个 module 对象放入 installedModules 中,当这个模块再次被援用到时间接从 installedModules 外面取值,此时他就是一个空对象,解释了下面例子的景象。
function __webpack_require__(moduleId) {
/******/
/******/         // Check if module is in cache
/******/         if(installedModules[moduleId]) {/******/             return installedModules[moduleId].exports;
/******/         }
/******/         // Create a new module (and put it into the cache)
/******/         var module = installedModules[moduleId] = {
/******/             i: moduleId,
/******/             l: false,
/******/             exports: {}
/******/         };
/******/
/******/         // Execute the module function
/******/         modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/         // Flag the module as loaded
/******/         module.l = true;
/******/
/******/         // Return the exports of the module
/******/         return module.exports;
/******/     }

三、ES6 Module

ES6 Module 的导入导出都是申明式的,它不反对导入门路是一个表达式,所有导入导出必须位于模块的顶层作用域(不能放在 if 语句中)。因而 ES6 Module 是一个动态的模块构造,在 ES6 代码编译阶段就能够剖析出模块的依赖关系。

ES6 的改良

  • 死代码检测和排除,通过动态剖析工具检测出哪些模块没被调用过。比方引入工具类库时,工程可能只用到了某一个接口,但可能将整个工具包都加载进来了,未被调用的代码永远不会被执行。通过动态剖析 能够在打包时去掉这些未应用的模块,缩小打包资源体积。
  • 模块变量类型查看,js 属于动静类型语言,不会再代码执行前查看类型谬误。例如将字符串类型进行函数调用。ES6 Module 的动态模块构造能够确保模块之间传递的值或接口类型正确。
  • 编译器优化,CommonJS 实质上是导入一个对象,ES6 Module 反对导入变量,缩小了援用层级,程序效率更高。

值拷贝与动静映射

导入模块时,CommonJS 是导出值的拷贝,ES6 Module 是值的动静映射,并且这个映射是只读的。

  1. commonJS 在文件中批改导入的值不会使被导入的文件上的值产生扭转。因为它是一个拷贝的值。
  2. ES6 Module 中导入的变量时对原有值的动静映射,不能对 ES6 Module 导入的变量进行更改,因为这个映射是只读的。

循环依赖

循环依赖指模块 A 依赖于模块 B,同时模块 B 依赖于模块 A(工程中应该尽量避免循环依赖,复杂度会晋升,依赖关系不清晰)

阐明

以上局部内容起源与本人温习时的网络查找,也次要用于集体学习,相当于记事本的存在,暂不列举链接文章。如果有作者看到,能够分割我将原文链接贴出。

正文完
 0