15 模块发开发-CSDN博客

本文链接：https://blog.csdn.net/xuhuimingc/article/details/115671499

本文详细介绍了前端模块化的常见规范，包括CommonJS的导出与导入，以及ES6模块化的使用，如export和import关键字。通过示例展示了变量、函数和类的导出与导入方式，以及default导出的用法。深入理解这些模块化机制对于前端开发至关重要。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

模块化

前端模块化

常见的模块化规范有：

CommonJS

导出：
语法：
module.exports={
	flag:flag,
	sum:sum
}
导入：
//从相应的js文件中导入
var {flag,sum}=require('./aaa,js')
AMD、CMD以及ES6的Modulesn

ES6模块化的导入和导出

export

import

name='小明';
var age=12;
var flag=true;

function sum(num1,num2) {
 return num1+num2
}

if (flag){
 console.log(sum(10, 20));
}

//导出方式1
export{
 flag,sum
}

//导出方式2
export var num1=1000;
export var height=1.88;

//导出函数
export function mul(num1,num2) {
  return num1*num2;
}

//导出对象
export class Person{
  run(){
    console.log('奔跑');
  }
}

// //导出default 使用者可以自己命名
// 在同一个模块中不允许存在多个
// const address='北京市';
// export default address

export default function(){
  return "你好啊"
}

//导入对象中定义的变量
import {flag,sum,num1,height} from "./aaa.js";

if(flag){
 console.log('你是真的狗');
 console.log(sum(33, 11));
}
console.log(num1);

//导入函数
import {mul} from "./aaa.js";

console.log(mul(20, 10));

//导入类
import {Person} from "./aaa.js";

const p=new Person();
p.run();

// //导入default 只能有一个
// import add from "./aaa.js";
// console.log(add);

import hello from "./aaa.js";

console.log(hello());

//统一全部导入
import * as aaa from "./aaa.js";

console.log(aaa.flag);