CommonJS ES6 模块化开发_掌握es6,module,commonjs模块化开发-CSDN博客

本文链接：https://blog.csdn.net/Z___R/article/details/110386737

模块化开发

早期通过创建对象，返回模块的出口

var moduleA =  (function () {
  var obj={};
  obj.flag = true;
  obj.myFunc = function (info) {
    console.log(info);
  }
  return obj;

})();
//使用
if(moduleA.flag){
  console.log("sdsds");
}
moduleA.myFunc("sdsd");

CommonJS、 AMD、CMD 也有ES6 的Modules 常见的模块化

导出和导入

CommonJS

导出：

module.exports={
flag: flag,
sum:sum
}

导入：

var{flag,sum} = require("js的路径")

ES6

export

指令导出了模块对外提供的接口

import

<body>
    //引用的script  的类型必须是module 不然export 和import 不起作用
<script src="bbb.js" type="module"></script>
<script src="aaa.js" type="module"></script>
</body>

// 导出定义的变量
var flag = false;
var age = 12;
export {
  flag, age
}
// 导出export直接定义的变量
export var num1 = 1000;
export var height = 1.88;
// 导出function函数
export function mul(num1,num2) {
  return num1+num2;
}
// 导出class类
export class Person {
  run(){
    console.log('zaibenpao')
  }
  
}
//不命名导出，可以由导出者命名 只能有一个
const address = '北京市';
export default address;

// 导入定义的变量
import {flag,age} from "./aaa.js";
if(!flag){
  console.log(age);
}
// 直接导入export定义的变量
import {num1,height} from "./aaa.js";
console.log(num1+height);
//导入function
import {mul} from './aaa.js'
console.log(mul(10,20));
//导入类
import {Person} from './aaa.js';
const p = new Person();
p.run();
//默认接收export default 可以自定义名称
import addr from './aaa.js';
console.log(addr);
//统一全部导入
import * as aaa from './aaa.js'
console.log(aaa.height);