【HarmonyOS NEXT】ArkTs 模块的导出和引入

原创

已于 2024-12-20 10:07:00 修改 · 1.4k 阅读

27 ·

CC 4.0 BY-SA版权

文章标签：

#harmonyos #鸿蒙应用开发 #鸿蒙 #华为 #openharmony #harmonyos next

于 2024-12-20 10:02:49 首次发布

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