【odoo | JavaScript | ES6】浅谈前端导入（import）和导出（export）

概要

        前端开发中的导入（import）和导出（export）是指在JavaScript模块系统中引入和输出代码的机制。ES6（ECMAScript 2015）引入了这种模块化系统，使开发者可以更加高效地组织和管理代码。

导出

导出是指在一个模块中定义并暴露一些变量、函数、类或其他代码，使得这些代码可以在其他模块中被导入和使用。导出有两种主要方式：

命名导出（Named Export）

• 使用 export 关键字，可以导出多个变量、函数或类。
• 语法:

  1. // 导出变量

  2. export const myVariable = 42;

  4. // 导出函数

  5. export function myFunction() {

  6. console.log('Hello, world!');

  7. }

  9. // 导出类

  10. export class MyClass {

  11. constructor(name) {

  12. this.name = name;

  13. }

  14. }

• odoo代码例子： 

  export class EmployeeProfileRecord extends Record {}

默认导出（Default Export）

• 使用 export default 关键字，每个模块只能有一个默认导出。
• 语法:

  1. // 导出变量

  2. const myVariable = 42;

  3. export default myVariable;

  5. // 导出函数

  6. export default function() {

  7. console.log('Hello, world!');

  8. }

  10. // 导出类

  11. export default class {

  12. constructor(name) {

  13. this.name = name;

  14. }

  15. }

• odoo代码例子：

1. const StandaloneM2OAvatarEmployee = Widget.extend(StandaloneFieldManagerMixin, {

2. className: 'o_standalone_avatar_employee',

3. });

5. export default StandaloneM2OAvatarEmployee;

导入 

导入是指在一个模块中引入另一个模块中导出的代码。导入有多种方式，取决于导出的内容类型。

导入命名导出（Import Named Exports） 

• 使用 import { ... } 语法导入命名导出。
• 语法:

  1. import { myVariable, myFunction, MyClass } from './myModule';

  3. console.log(myVariable); // 42

  4. myFunction(); // 输出 'Hello, world!'

  5. const obj = new MyClass('John');

  6. console.log(obj.name); // 'John'

• odoo代码例子： 

  import { Many2OneAvatarUserField, KanbanMany2OneAvatarUserField } from "@mail/views/fields/many2one_avatar_user_field/many2one_avatar_user_field";

导入默认导出（Import Default Export）

• 使用 import ... from 语法导入默认导出。
• 语法:

  1. import myVariable from './myModule';

  2. console.log(myVariable); // 42

  4. import myFunction from './myModule';

  5. myFunction(); // 输出 'Hello, world!'

  7. import MyClass from './myModule';

  8. const obj = new MyClass('John');

  9. console.log(obj.name); // 'John'

•  odoo代码例子：

  import StandaloneM2OAvatarEmployee from '@hr/js/standalone_m2o_avatar_employee';

组合导入（Combining Imports）

• 可以同时导入默认导出和命名导出。
• 语法:

  1. import defaultExport, { namedExport1, namedExport2 } from './myModule';

  3. console.log(defaultExport);

  4. console.log(namedExport1);

  5. console.log(namedExport2);

导入所有导出（Import All Exports）

• 使用 import * as 语法导入模块中的所有导出。
• 语法:

  1. import * as myModule from './myModule';

  3. console.log(myModule.myVariable); // 42

  4. myModule.myFunction(); // 输出 'Hello, world!'

  5. const obj = new myModule.MyClass('John');

  6. console.log(obj.name); // 'John'

优势

• 提高代码可维护性和可读性。
• 避免命名冲突。
• 支持代码重用。

注意点 

• 命名导出:

  • 可以有多个。
  • 导入时需要使用大括号 {}。

• 默认导出:

  • 每个模块只能有一个。
  • 导入时不需要使用大括号 {}。

小结

        多写多敲多思考，毕竟，知己知彼才能看懂源码。