前端模块化

模块化

1AMD和CMD适用于浏览器端的JavaScript模块化
2.CommonJS适用于服务器端的JavaScript模块化
3.大一统的ES6模块化诞生

commonjs

commonjs.js

const name = "xxx"
const age = 18;
const sex = "boy"

// commonjs中使用exports与modules.exports进行导出
// 使用require导入导出属性或方法的文件名
// 导出的格式是对象的形势
module.exports = {
        name,
        age
    }
    //如果单个暴露与整体暴露同时使用，单个暴露会失效，以整体暴露为准。
    // 底层原理是exports是module.exports的对象的一个引用。
    // 但是在代码执行完成后暴露出去的是module.exports
    // 相当于一开始就执了const exports=module.exports{} 
    //然后结尾处返回return module.exports
    //但是只有函数才能够有return 所以commonjs相当于是一个（）（）函数，
    //这个函数是node.js执行的。
exports.sex = sex;

commonjs02.js

const { name, age } = require('./commonJs');
const all = require('./commonJs');
console.log(all);
console.log(name, age);

在使用解构赋值时，这里里面的名称来源于要引入文件内部的名字

// 如果不加./会报招不到模块错误
const { fun } = require('./commonjs模块化开发')
console.log(fun());
// console.log(req.fun());

任何js文件都有一个隐秘的构造函数,下图中的function,变量或者函数不导出，不能够被外界所使用

ES6模块化

导出
默认导出
export default 默认导出成员
按需导出
export  let 变量名

导入
默认导入
import 接收名称 from ‘模块标识符’
按需导入
import {导出变量的名称} from ‘模块标识符’
导入的名称是导出的名称

默认导出

默认导入
按需导出
按需导入

注意

直接导入不接收，执行代码

//直接执行代码，不需要导出，导入自动执行
import ‘需要自动执行的代码，没有导出’