谷粒商城学习日记（16）——前端代码模块化

模块化就是把代码进行拆分，方便重复利用。类似于java中的导包，而JS换了个概念，是导模块。

模块功能主要有两个命令构成 export 和import

1. export用于规定模块的对外接口
2. import用于导入其他模块提供的功能

我在html的同级建立文件夹js
里面放置几个js

export

user.js

可以导出对象，属性，方法

var name = "jack"
var age = 21
function add(a,b){
    
    
    return a + b;
}
// 导出变量和函数
export {
    
    name,age,add}

导出也可以直接写在前面，default表示默认，导入时可以重命名

hello.js

// export const util = {
    
    
//     sum(a, b) {
    
    
//         return a + b;
//     }
// }

// 导出后可以重命名
export default {
    
    
    sum(a, b) {
    
    
        return a + b;
    }
}
// export {util}

//`export`不仅可以导出对象，一切JS变量都可以导出。比如：基本类型变量、函数、数组、对象。

import

main.js

import abc from "./hello.js"
import {
    
    name,add} from "./user.js"

abc.sum(1,2);
console.log(name);
add(1,3);

abc就是导入时候的重命名