能否将自执行函数导出为命名空间？导入后值为undefined问题求助

问题描述 #

我尝试在一个文件中定义命名空间如下：

let editor = (()=>{
    var editorVisible = false;
    var toggleEditor = ()=>{};
    var initEditor = ()=>{};
})();
export default editor;

并在另一个文件中导入：

import {editor} from '@src/components/editor';
console.log(editor); //<= undefined

Webpack编译无报错，但无论如何editor始终为undefined。

更新1 #

我发现函数没有返回值，但大家建议逐个返回内部元素。想知道无需逐个返回内部函数或变量就能返回整个命名空间的方法。

更新2 #

导入后，我希望按如下方式使用editor：

editor.initEditor();

解决方法 #

1. 修复IIFE的返回值缺陷 #

你的立即执行函数（IIFE）没有返回任何内容，导致editor变量本身就是undefined。要一次性返回整个命名空间，只需把需要暴露的内部成员包装成一个对象返回即可，不用逐个单独导出：

let editor = (()=>{
    var editorVisible = false;
    var toggleEditor = ()=>{};
    var initEditor = ()=>{};
    // 返回包含所有需暴露成员的对象
    return {
        editorVisible,
        toggleEditor,
        initEditor
    };
})();
export default editor;

此时editor会变成包含指定成员的对象，不再是undefined。

2. 修正导入语法错误 #

你使用export default导出模块，因此导入时不能使用解构语法{editor}，应该直接导入：

import editor from '@src/components/editor';
console.log(editor); // 现在会输出包含成员的对象
editor.initEditor(); // 可以正常调用目标方法

简化写法（可选） #

如果不需要借助IIFE隐藏内部变量（比如editorVisible无需私有化），也可以直接导出对象，省去IIFE的包裹：

export default {
    editorVisible: false,
    toggleEditor: ()=>{},
    initEditor: ()=>{}
};

导入方式保持不变，依然可以通过editor.initEditor()正常调用方法。

内容的提问来源于stack exchange，提问作者mimic