javascript模块化编程之CommonJS与EsModule

目录

区别

环境 

两种模式互相加载 

 同时兼容加载两种格式

总结


模块化以及模块化开发

模块化开发的目的是将程序划分成一个个小的结构,这个结构有属于自己的代码逻辑,有自己的作用域,不会影响到其他的结构,这个结构希望暴露的变量,函数,对象给其他结构使用,也可以通过某种方式导入其他结构的变量,函数,对象。

这种结构叫模块,按照这种结构划分开发的过程,就是模块化开发的过程

区别

语法:

   CommonJS模块使用require()引入模块,使用module.exports导出模块
   EsModule模块使用import引入模块,使用export导出模块

// CommonJs -------
// 引入模块
var path = require("path")
// 导出模块
const path = ()=>{}
module.exports = path

// EsModule ----------
// 引入模块
import path from "path"
import { doSomeThing } from "path"
// 导出模块
export const doSomeThing = ()=>{}
export default path

用法: 

require()同步加载模块,js是单线程,会阻塞加载
import是异步加载模块

node.js使用的是CommonJS模块规范。
浏览器使用的是EsModule模块异步加载,因为如果使用CommonJS同步加载资源时会有卡顿现象

值:

    CommonJS是基于值的拷贝
    EsModule是基于值的引用 

环境 

node.js环境中,.js后缀的文件默认使用的是CommonJS模块,如果想要使用ES6模块需要采用.mjs后缀的文件名。
如果想要不修改文件后缀名,但是又使用ES6模块,可以编辑项目的根目录package.json文件

{
    "type":"module"
}

修改package.json文件后,.js脚本文件就会使用ES6模块解析
如果修改package.json的同时想要使用CommonJS模块,需要将相应脚本文件后缀改成.cjs 

两种模式互相加载 

CommonJS模块加载EsModule模块:

  直接使用CommonJs的require加载EsModule模块会报错
  因为CommonJS是同步加载,可以使用async与await实现同步

// 使用匿名函数闭包
(async()=>{
    await import('./test.mjs')
})()

 EsModule加载CommonJs模块:

       EsModule可以使用import命令加载CommonJS,
    但是因为CommonJs导出是使用module.export导出整个模块对象,不能直接输出单一项
   如果想要输出单一项,可以使用对象的解构赋值

// test.cjs文件

const method1 = ()=>{}
const method2 = ()=>{}
module.exports = {
    method1,
    method2
}




import Test from "./test.cjs"
//对象解构赋值
const { method1,method2 } from Test

// 会报错
import { method1,method2 } from './test.cjs'

 同时兼容加载两种格式

// 原始模块是CommonJS 
// 嵌套一层,包装成esmodule模块

import Test from "./test.cjs"
export const method1 = Test.method1
export const method2 = Test.method2
export default Test


// 原始模块是EsModule

//提供一个统一输出接口export default
// CommonJS使用import()引入

总结

提示:这里对文章进行总结:

例如:以上就是今天要讲的内容,本文仅仅简单介绍了pandas的使用,而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。

你可能感兴趣的:(javascript,开发语言,ecmascript)