js模块化：简述 exports 和 import 用法

写于 2022年3月23日

exports用于js的模块化导出,import用于导入。
一般用法，也就是你搜一下exports关键字就能找到的用法，这里根据两条规则筛一下比较好的实践：
第一，必须是具名的写法，这样代码可读性会好一些
第二，exports必须写在最上方，这样如果文件很长，你不需要往下滑滚轮或者按End键就知道导出的对象名称是什么。
综上，得到的写法是：

// 导出一个变量
module.exports.age = 18

// 导出一个函数
module.exports.setAge = (age)=>{
  console.log(age)
}

对应的导入写法是(花括号包围模块名，多个变量用逗号分割)：

import {age} from "../../xxx.js"
import {setAge} from "../../xxx.js"

个人不推荐使用 as 别名语法，多个名字指向同一个文件是个很糟心的事。

不那么一般用法：实际开发中，不推荐这种一个变量，一个函数的导出方式。文件会变得又多又乱，多个函数隶属于同一领域或近似业务范畴而又不在一个文件内，也是个很糟心的事。
建议合并成的对象形式导出。如下：

module.exports.person = {
    age:18,
    name:'李白',
    setAge:(age)=>{
        console.log(age)
    }
}

狠一点的可以封成类导出使用

module.exports.Person = class Person {
    constructor(age, name) {
      this.age = age;
      this.name = name;
    }
    toString() {
      return '(' + this.age + ', ' + this.name + ')';
    }
}

那么问题来了，如果模块中的函数存在调用关系，对于导出类我们可以通过this来保证，对于导出对象该怎么写？

module.exports.person = {
    age:18,
    name:'李白',
    setAge:(age)=>{
        // 答案就是这个, module.exports.导出的模块名称.方法名
        let fakeAge = module.exports.person.fakeAge(age)
        console.log(fakeAge)
    },
    fakeAge:(age)=>{
        return age + 10
    }
}