1. 前置学习文档
2.前言
什么是模块？
模块可以理解为函数代码块的功能,是封装对象的属性和方法的javascript代码,它可以是某单个文件,变量或者函数
历史上，JavaScript 一直没有模块（module）体系，无法将一个大程序拆分成互相依赖的小文件，这对开发大型的、复杂的项目形成了巨大障碍。
在 ES6 之前，社区制定了一些模块加载方案，最主要的有 CommonJS 和 AMD/CMD 三种。前者用于服务器，后者用于浏览器。ES6 在语言标准的层面上，实现了模块功能，而且实现得相当简单，完全可以取代 CommonJS 和 AMD/CMD 规范，成为浏览器和服务器通用的模块解决方案。
ES6之后，官方制定了模块规范【ES6 Module】 —— ES6标准规范中，以export指令导出接口，以import引入模块，ArkTS中的模块化也是基于此规范来实现的
关于更多关于前端模块化信息可以看这篇文章：https://mp.weixin.qq.com/s/15sedEuUVTsgyUm1lswrKA
3. export命令
关于export命令的详细文档介绍：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/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命令
关于import命令的详细文档介绍：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/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 只能有一个
- 因为export default本质上是别名【as】的语法糖
本质上，下面的，A.ets 文件的export default输出一个叫做default的变量，然后系统允许你为它取任意名字。 自然default只能有一个值，所以一个文件内不能有多个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()，内存引用是否是一个？
- 因为ES6模块输出的是值的引用，所以如果export new class，则多个位置引用的其实是相同的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
