javascript - 从对象导入属性

Question

我正在尝试从函数文件中导入单个函数。函数文件如下所示。

const Functions = {
    url(path = '') {
        path = path.replace(/^\/+/, '');
        return `${document.baseURI}/${path}`;
    },

    asset(path = '') {
        return this.url(path);
    }
};

export default Functions;

然后我尝试像这样导入 url 函数。

import {url} from "../Utils/Functions";

当我这样做时，我在浏览器中收到来自 browserify 的以下错误。

Uncaught TypeError: (0 , _Functions.url) is not a function

根据 MDN docs，这个导入应该工作，因为 url 在 Functions 对象中。

我做错了什么？

Answer 1

您所做的是导出一个对象。

在这种情况下，您需要导入一个对象并访问其属性:

import Functions from "../Utils/Functions";
Functions.url();

如果你想进行命名导出——你需要改变你导出和定义它的方式:

function url(path = '') {
    path = path.replace(/^\/+/, '');
    return `${document.baseURI}/${path}`;
}

function asset(path = '') {
    return this.url(path);
}

export { url, asset };

或

export function url(path = '') {
    path = path.replace(/^\/+/, '');
    return `${document.baseURI}/${path}`;
}

export function asset(path = '') {
    return this.url(path);
}

作为另一个注意事项:它不是解构的，即使它看起来很相似。该标准将其命名为 ImportsList 并定义了自己的语义，与解构语义不同。

引用资料:

• https://developer.mozilla.org/en/docs/web/javascript/reference/statements/export
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import
• http://www.ecma-international.org/ecma-262/6.0/#sec-imports