模块化Common JS 和 ES Module

目录

历程

1.几个函数:全局变量的污染,模块间没有联系

2.对象:暴露成员,外部可修改

3.立即执行函数:闭包实现模块私有作用域

common JS

module和Module

过程

模块依赖:深度优先遍历、父 -> 子 -> 父

导入:require

避免重复加载、循环引用:Module缓存

先加入缓存, 后执行模块内容

动态加载:任意位置,按需加载

导出

对象:exports=module.exports

非对象:module.exports

区别

CommonJS

运行时加载

ES Module

编译时加载

模块化规范:一个模块=实现特定功能一组方法

全局污染:共享时,同名变量冲突

依赖管理:下层 js 能调用上层 js 的方法,但是上层 js 无法调用下层 js 的方法

模块化Common JS 和 ES Module_第1张图片

历程

1.几个函数:全局变量的污染模块间没有联系

// 模块A
var ModuleA = {
  func1: function() {
    // ...
  },
  func2: function() {
    // ...
  }
};

// 模块B
var ModuleB = {
  func3: function() {
    // ...
  }
};

2.对象:暴露成员,外部可修改

后面提出了对象,通过将函数作为一个对象的方法来实现,但是这种办法会暴露所 有的所有的模块成员,外部代码可以修改内部属性的值

3.立即执行函数:闭包实现模块私有作用域

现在最常用的是立即执行函数的写法,通过利用闭包来实现模块私有作用域的建立,同时不会对全局作用域造成污染

//IIFE(立即调用函数表达式)
//创建一个私有作用域,避免变量之间的冲突。然后,通过返回一个对象或函数来暴露模块的公共部分
// 模块A
var ModuleA = (function() {
  var privateVar = "private";

  function privateFunc() {
    // ...
  }

  return {
    publicVar: "public",
    publicFunc: function() {
      // ...
    }
  };
})();

common JS

module和Module

module:在 commonjs 中每一个 js 文件都是一个单独的模块

module 上保存了 exports 等信息之外,还有一个 loaded(bool) 表示该模块是否被加载。

Module :以 nodejs 为例,整个系统运行之后,会用 Module 缓存每一个module的信息。

过程

//home.js
const sayName = require('./hello.js')
module.exports = function say(){
    return {
        name:sayName(),
    }
}
//编译进行首尾包装
(function(exports,require,module,__filename,__dirname){
   const sayName = require('./hello.js')
    module.exports = function say(){
        return {
            name:sayName(),
        }
    }
})
//包装函数
function wrapper (script) {
    return '(function (exports, require, module, __filename, __dirname) {' + 
        script +
     '\n})'
}
//runInThisContext
eavl(包装后的module)(module.exports, require, module, __filename, __dirname)

模块依赖:深度优先遍历、父 -> 子 -> 父

//a.js
const getMes = require('./b')
console.log('我是 a 文件')
exports.say = function(){
    const message = getMes()
    console.log(message)
}
//b.js
const getMes = require('./a')
console.log('我是 b 文件')
exports.say = function(){
    const message = getMes()
    console.log(message)
}
//main.js
const a = require('./a')
const b = require('./b')

console.log('node 入口文件')

模块化Common JS 和 ES Module_第2张图片

模块化Common JS 和 ES Module_第3张图片

const say = require('./a')
console.log('我是 b 文件')
console.log('打印 a 模块' , say)

setTimeout(()=>{
    console.log('异步打印 a 模块' , say)
},0)

exports.say = function(){
    const message = getMes()
    console.log(message)
}

模块化Common JS 和 ES Module_第4张图片

导入:require

避免重复加载、循环引用:Module缓存

先加入缓存, 后执行模块内容

加载之后的文件的 module 会被缓存到 Module 上,比如一个模块已经 require 引入了 a 模块,如果另外一个模块再次引用 a ,那么会直接读取缓存值 module ,所以a中的代码只会执行一次

动态加载:任意位置,按需加载

require 本质上就是一个函数,那么函数可以在任意上下文中执行,来自由地加载其他模块的属性方法。

导出

对象:exports=module.exports

module.exports 导出的是一个对象时,对象的引用关系是被保留的,这意味着其他模块引入这个对象后,即使该对象后续被修改,其他模块也能看到这些修改。这是因为对象在 JavaScript 中是引用类型,它们的引用关系是保持的。

exports.author = '7'
exports.say = function (){
    console.log(666)
}
module.exports ={
    author:'7',
    say(){
        console.log(666)
    }
}

非对象:module.exports

在循环引用的时候,就容易造成属性丢失的情况发生

module.exports = a // 导出变量

module.exports = [1,2,3] // 导出数组

module.exports = function(){} //导出方法

区别

CommonJS

运行时加载

在服务器端,同步加载模块的方式是可行的,因为模块通常都在本地。

ES Module

编译时加载

ES模块的结构在编译时就确定下来,模块的依赖关系在代码运行前就已经确定。静态导入导出:方便 tree shaking

「万字进阶」深入浅出 Commonjs 和 Es Module - 掘金

你可能感兴趣的:(前端面试,javascript,前端,开发语言)