从一个对象导入属性

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"; 

当我这样做时，我从浏览器中得到以下错误。

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

据MDN文档，这应该进口作为工作是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); 
} 

至于另注：这是不是解构，即使它看起来simil AR。该标准将其命名为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

Answer 2

如果使用 '默认导出'，那么进口应该是：

import Functions from "../Utils/Functions"; 

实际上，你可以用你喜欢的任何标识符来导入它（不仅仅是'函数'）