CommonJS 和 ES6 模块化

最新推荐文章于 2024-08-25 18:43:02 发布

hsdjhaiwhdnjw

最新推荐文章于 2024-08-25 18:43:02 发布

阅读量138

点赞数 3

文章标签： es6 javascript 前端

本文链接：https://blog.csdn.net/qq_41604686/article/details/141066214

版权

CommonJS

index.js

// 导入
// 方式一：直接导入
// const student = require('./student')
// const school = require('./school')
// console.log(student)
// console.log(school)

// 方式二：解构导入
const { name, slogan, getTel } = require('./school')

// 方式三：解构导入+重命名
const { name: stuName, motto,  getTel: stuGetTel } = require('./student')


console.log(name)
console.log(slogan)
console.log(getTel)

console.log(stuName)
console.log(motto)
console.log(stuGetTel)


// 该文件使用 require() 引入文件，只能在 nodejs 环境中执行，
// 不能在浏览器中使用，不过可以借助 browserify 打包成新的可供浏览器识别的js文件
// 使用：
// 1、下载安装 browserify  =》 npm i browserify -g
// 2、编译 index.js 输入为 build.js  =》 browserify index.js -o build.js
// 3、页面中引入使用  =》 <script src='./build.js'></script>

// commomjs 是社区模块化规范，是node环境的模块化规范，可以通过工具编译支持浏览器

school.js

const name = '清华'
const slogan = '知识改变命运'

function getTel() {
  return '0372-6688999'
}
function getCities() {
  return ['北京', '上海', '广州', '深圳']
}
// 导出方式一：module.exports = value
module.exports = { name, slogan, getTel }

// 导出方式二：exports.key = value
// exports.name = name
// exports.motto = motto
// exports.getTel = getTel

student.js

const name = '章三'
const motto = '好好学习'

function getTel() {
  return '0372-7788999'
}
function getCities() {
  return ['北京', '上海', '广州', '深圳']
}
// 导出方式一：module.exports = value
module.exports = { name, motto, getTel }

// 导出方式二：exports.key = value
// exports.name = name
// exports.motto = motto
// exports.getTel = getTel

ES6 模块化

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- type="module" 将 js 模块化引入，js 中的变量不在全局上面 -->
  <script type="module" src="./index.js"></script>
  <button id="btn">动态导入</button>
</body>
</html>

index.js

// 导入
// 方式一：导入全部（通用）
// import * as student from './student.js'
// console.log(student)

// 方式二：命名导入（对应导出方式：分别导出、统一导出）
// import { name as stuName, motto as stuMotto, getCities } from './student.js'
// console.log(stuName, stuMotto, getCities)

// 方式三：默认导入
// import student from './student.js'
// console.log(student)    // {age: 19, getTel: ƒ}


// 方式四：命名导入和默认导入可以混合使用
// import getTel, { motto, getCities } from './student.js'
// console.log(getTel())
// console.log(motto)
// console.log(getCities())

// 方式五：动态导入
// document.querySelector('#btn').onclick = async () => {
//   const stu = await import('./student.js')
//   console.log(stu)  // 将 student.js 中所有导出的内容都导入了进来
// }

// 方式六：import 可以不接受任何数据
import './template.js'

student.js

// 分别导出
export const name = '章三'
const age = 19
const motto = '好好学习'

function getTel() {
  return '0372-7788999'
}
function getCities() {
  return ['北京', '上海', '广州', '深圳']
}
// 默认导出
// export default {
//   age, getTel
// }
export default getTel
// 全部（统一）导出
export {
  motto, getCities
}
// 以上三种方式导出的内容为：
/*{
    default: {getTel }
    getCities
    motto,
    name
}
*/