1. 前置学习文档2.前言

什么是模块？

模块可以理解为函数代码块的功能,是封装对象的属性和方法的javascript代码,它可以是某单个文件,变量或者函数

历史上，JavaScript 一直没有模块（module）体系，无法将一个大程序拆分成互相依赖的小文件，这对开发大型的、复杂的项目形成了巨大障碍。

在 ES6 之前，社区制定了一些模块加载方案，最主要的有 CommonJS 和 AMD/CMD 三种。前者用于服务器，后者用于浏览器。ES6 在语言标准的层面上，实现了模块功能，而且实现得相当简单，完全可以取代 CommonJS 和 AMD/CMD 规范，成为浏览器和服务器通用的模块解决方案。

ES6之后，官方制定了模块规范 【ES6 Module】 —— ES6标准规范中，以export指令导出接口，以import引入模块，ArkTS中的模块化也是基于此规范来实现的

关于更多关于前端模块化信息可以看这篇文章：

3.

关于export命令的详细文档介绍：

3.1 导出单个[类/函数/变量]

下面是一个ets[arkts]文件，里面使用export命令来导出变量，函数或类（class）

//A.ets
//导出变量
export let str = "export的内容";
//导出函数
export function add(x: number, y: number) {
  return x + y;
}
//导出类
export class Test {
  printHello() {
    console.log("你好 世界")
  }
}

3.2 导出列表[推荐写法]

除了上述的写法，还有一种推荐使用的，因为这样就可以在脚本尾部，一眼看清楚输出了哪些变量。

//A.ets
let str = "export的内容";
function add(x: number, y: number) {
  return x + y;
}
class Test {
  printHello() {
    console.log("你好 世界")
  }
}
//导出变量、函数、类
export {str,add,Test}

3.3 导出别名/重命名

通常情况下，export输出的变量就是本来的名字，但是可以使用as关键字重命名。

//A.ets
let str = "export的内容";
function add(x: number, y: number) {
  return x + y;
}
class _Test {
  printHello() {
    console.log("你好 世界")
  }
}
let test=new Test()
//导出变量、函数、类，并重命名
export {
  str as Str, add as Add, Test as TT
}

4.

关于import命令的详细文档介绍：

使用export命令定义了模块的对外接口以后，其他 【ets/ts/js】 文件就可以通过import命令加载这个模块。

单例模式： import 模块的代码只会执行一次，同一个url文件只会第一次导入时执行代码。后续任何地方import都不会执行模块代码了，也就是说，import语句是 Singleton 模式的。

只读-共享： 模块导入的接口的是只读的，不能修改。当然引用对象的属性值是可以修改的，不建议这么干，注意模块是共享的，导出的是一个引用，修改后其他方也会生效。

4.1 引入导出的内容

使用export命令定义了模块的对外接口以后，其他 JS 文件就可以通过import命令加载这个模块。

下面代码的import命令，用于加载A.ets文件,引入后便可以在B.ets文件中使用A.ets文件中的变量、函数或类等。import命令接受一对大括号，里面指定要从其他模块导入的变量名。大括号里面的变量名，必须与被导入模块（A.ets）对外接口的名称相同。

//A.ets
let str = "export的内容";
function add(x: number, y: number) {
  return x + y;
}
class Test {
  printHello() {
    console.log("你好 世界")
  }
}
//导出变量、函数、类，并重命名
export {
  str as Str, add as Add, Test as TT
}
//B.ets
import { Str, Add, TT } from './A';
class Test {
  print() {
    let string = Str //使用导出的变量
    let number = Add(0, 1) //使用导出的方法
    let class = new TT() //使用导出的类
  }
}
//也可以分开写两次，导入的时候带花括号，将每个变量函数名写清楚
import { Str } from './A';
import { Add} from './A';
import { TT } from './A';
//但是不能重复导入相同的，例如下面的例子
import { TT } from './A';
import { TT } from './A';

4.2 引入别名/重命名

如果想为输入的变量重新取一个名字，import命令要使用as关键字，将输入的变量重命名。

//A.ets
let str = "export的内容";
function add(x: number, y: number) {
  return x + y;
}
class Test {
  printHello() {
    console.log("你好 世界")
  }
}
//导出变量、函数、类，并重命名
export {
  str as Str, add as Add, Test as TT
}
//B.ets
import { Str as Str2, Add as Add2, TT as TT2 } from './A';
class Test {
  print() {
    let string = Str2 //使用导出的变量
    let number = Add2(0, 1) //使用导出的方法
    let class = new TT2() //使用导出的类
  }
}

4.3 批量引入

有的时候我们发现如果一个模块里面有多个导出的[类/函数/变量]，使用的时候发现需要一个一个声明，比较繁琐，此时就可以使用 import * as name 语法，该语法可以导入所有导出接口，即导入模块整体

建议按需导出，不用，这样有利于构建工具的优化，剔除没用到的代码。*

//B.ets
import  * as moduleA  from './A';
class Test {
  print() {
    let zoo = new moduleA.Zoo()//使用非默认导出的类
    zoo.printZoo()
    let string = moduleA.Str //使用非默认导出的变量
    let number = moduleA.Add(0, 1) //使用非默认导出的方法
    let tt2 = new moduleA.TT() //使用非默认导出的类
  }
}

5. export default 命令

export default命令用于指定模块的默认输出，一个模块只能有一个默认输出，因此export default命令只能使用一次。

所以，import命令后面才不用加大括号，因为只可能唯一对应export default命令。一个文件内不能有多个export default，另外，import的时候, 还可以起任何变量名表示引入变量

5.1 导出默认变量

//A.ets
export default "export的内容"
//或者可以声明一个变量，然后在导出这个变量
const xxx="export的内容"
export default xxx
//B.ets
import str from './A';
class Test {
  print() {
    let string = str //使用导出的变量
  }
}

5.2 导出默认函数

//A.ets
export default function() {
  console.log('我是默认函数');
}
//或者还可以声明一个函数，然后导出这个函数 【推荐写法】
let add= (x: number, y: number) => {
  return x + y;
}
export default add
//或者还可以这样写
function add(x: number, y: number) {
  return x + y;
}
//等同于 export default add;
export {add as default};
//B.ets
import func from './A';
class Test {
  print() {
    let string = func(0, 1)//使用导出的方法
  }
}

5.3 导出默认类

//A.ets
export default class Test {
  printHello() {
    console.log("你好 世界")
  }
}
//或者还可以声明一个类，然后导出这个类
class Test {
  printHello() {
    console.log("你好 世界")
  }
}
export default Test
//B.ets
import Classics from './A';
class Test {
  print() {
    let classics = new Classics()

    classics.printHello()
  }
}

5.4 导出默认模块+非默认模块

//A.ets
let str = "export的内容";
function add(x: number, y: number) {
  return x + y;
}
class Test {
  printHello() {
    console.log("你好 世界")
  }
}
export class Zoo {
  printZoo() {
    console.log("你好 大象")
  }
}
export {
  str as Str, add as Add, Test as TT
}
export default Test
//B.ets
import Classics, { Str as Str2, Add as Add2, TT as TT2, Zoo } from './A';
class Test {
  print() {
    let classics = new Classics()//使用默认导出的类
    classics.printHello()
  }
}

5.5 批量导出

这种场景在使用ArkTS中的hsp模块时非常有用。可能被多个业务module使用的har库，可以使用hsp模块进行管理，然后使用hsp进行批量导出har对外暴露的模块.

//A.ets
let str = "export的内容";
function add(x: number, y: number) {
  return x + y;
}
class Test {
  printHello() {
    console.log("你好 世界")
  }
}
export class Zoo {
  printZoo() {
    console.log("你好 大象")
  }
}
export {
  str as Str, add as Add, Test as TT
}
export default Test
//B.ets
export * from './A';
//C.ets
import * as ModuleA  from './B';
class Test {
  print() {
    let zoo = new ModuleA.Zoo()//使用非默认导出的类
    zoo.printZoo()
    let string = ModuleA.Str //使用非默认导出的变量
    let number = ModuleA.Add(0, 1) //使用非默认导出的方法
    let tt2 = new ModuleA.TT() //使用非默认导出的类
  }
}

6. 一些常见模块化导出和引入的写法6.1 写法1 [默认写法]

//Person.ets
class _Person {
  age: number
  constructor() {
    this.age = 18
  }
  getAge(): number {
    return this.age
  }
}
const Person = new _Person();
export default Person;
import Person from './Person.ets'
Person.age
Person.getAge()

6.2 写法2[默认写法]

//Person.ts
export default {
  age: 0,
  getAge(): number {
    return this.age
  }
};
import Person from './Person.ts'
Person.age
Person.getAge()

6.3 写法3 [别名写法]

//Person.ets
export let age = 0;
export function getAge(): number {
  return age
}
import * as Person from './Person.ets'
Person.age
Person.getAge()

6.4 写法4 [分组批量导出写法]

这个方法的好处是不用再维护library的index.ets ，只需要维护要导出模块文件夹下的index.ets 即可

//【1】批量导出login 模块下的所有方法
// 1.1、src/main/ets/login/Login.ets
export class Login
{
}
export class PwdLogin
{
}
//1.2、src/main/ets/login/index.ets
export  * from './Login'
//【2】批量导出login 模块下的所有方法
// 2.1、src/main/ets/login/Login.ets
export class Register
{
}
export class RegisterPwd
{
}
//2.2、src/main/ets/login/index.ets
export  * from './Register'
//【3】批量导出所有模块下的所有方法 
//3.1 src/index.ets
export * from './src/main/ets/login'

7. 疑问7.1 为什么export default 只能有一个

// A.ets
// 导出函数
export default function() {}
// 等效于：
function a() {};
export {a as default};
//B.ets
import a from './A'; // a 是 {defalut as a}的替代写法。
//另外一个例子
//A.ets
let a = 1;
let b = 2;
export { a };
export default b;
//B.ets
import * as all from "./A";
console.log(JSONUtils.bean2Json(all)) //输出 {"a":1,"default":2}

7.2 导出new Class()，内存引用是否是一个？

//MyClass.ets
class MyClass {
    count: number
    constructor() {
        this.count = 0;
    }
    increment():number {
        this.count++;
        return this.count
    }
}
// 导出类的对象
export const obj = new MyClass();
//Test.est
import { obj as objA } from './TestClass' new MyClass();
import { obj as objB } from './TestClass' new MyClass();
console.log(objA.increment() + "")
console.log(objB.increment() + "")
因为export 输出的是值的引用，所以此处输出的是
1
2
而不是
1
1