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

多多~益善 2024-06-27 12:03:01 阅读 50

概要

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

导出

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

命名导出(Named Export)

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

// 导出变量

export const myVariable = 42;

// 导出函数

export function myFunction() {

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

}

// 导出类

export class MyClass {

constructor(name) {

this.name = name;

}

}

odoo代码例子: 

export class EmployeeProfileRecord extends Record {}

默认导出(Default Export)

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

// 导出变量

const myVariable = 42;

export default myVariable;

// 导出函数

export default function() {

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

}

// 导出类

export default class {

constructor(name) {

this.name = name;

}

}

odoo代码例子:

const StandaloneM2OAvatarEmployee = Widget.extend(StandaloneFieldManagerMixin, {

className: 'o_standalone_avatar_employee',

});

export default StandaloneM2OAvatarEmployee;

导入 

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

导入命名导出(Import Named Exports) 

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

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

console.log(myVariable); // 42

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

const obj = new MyClass('John');

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 语法导入默认导出。语法:

import myVariable from './myModule';

console.log(myVariable); // 42

import myFunction from './myModule';

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

import MyClass from './myModule';

const obj = new MyClass('John');

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

 odoo代码例子:

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

组合导入(Combining Imports)

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

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

console.log(defaultExport);

console.log(namedExport1);

console.log(namedExport2);

导入所有导出(Import All Exports)

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

import * as myModule from './myModule';

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

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

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

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

优势

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

注意点 

命名导出:

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

默认导出:

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

小结

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

Tip:本人才学尚浅,如有纰漏,还请不吝赐教!



声明

本文内容仅代表作者观点,或转载于其他网站,本站不以此文作为商业用途
如有涉及侵权,请联系本站进行删除
转载本站原创文章,请注明来源及作者。