疯狂的技术宅

以前出于工作目的,编写和翻译了大量的技术文章,以前端为主,删掉了过时的、毫无营养的内容,留下的都是精华。


  • 首页

  • 分类

  • 标签

  • 归档

  • 关于本站

  • 回到主站

  • 搜索

JavaScript 模块导入的一个小麻烦

时间: 2020-04-03 分类: 前端技术   字数: 832 字 阅读: 2分钟
标签: #JavaScript# #import# #模块#
  • 本文译自:https://dmitripavlutin.com/javascript-import-module-drawback
  • 译者:疯狂的技术宅

img

1.命名导入和自动完成

假设你编写了一个简单的 JavaScript 模块:

// stringUtils.js
export function equalsIgnoreCase(string1, string2) {
  return string1.toLowerCase() === string2.toLowerCase();
}

这是一个模块 stringUtils。该模块有一个导出为 equalsIgnoreCase 的函数,该函数用来比较 2 个忽略大小写的字符串。

一切看起来都没什么问题。

现在让我们尝试在另一个 JavaScript 模块 app 中,从 stringUtils 模块导入 equalsIgnoreCase 函数:

// app.js
import { equalsIgnoreCase } from './stringUtils';

equalsIgnoreCase('Hello', 'hello'); // => true

你很可能会通过以下方式编写代码:

JavaScript 导入模块操作时很难自动完成

首先,你必须先写好 import {}。在此步骤中,IDE 无法提供任何有关要导入的模块名称的建议。

然后,你继续敲下 from './stringUtils'。然后移回大括号并展开自动完成提示来选择要导入的名称。

尽管 ES2015 的模块优点很多,但 import module 语法使自动完成功能难以使用。

2. Python 是怎么做的

现在,让我们看看在 Python 中导入命名组件是否存在同样的问题。

这是在 Python 中实现的相同模块 stringUtils 和函数 equalsIgnoreCase 的代码:

# stringUtils.py
def equalsIgnoreCase(string1, string2):
  return string1.lower() == string2.lower()

在 Python 中,你无需明确指出要导出的函数。

现在,在另一个 Python 模块 app 内,让我们尝试从 stringUtils 中导入函数 equalsIgnoreCase:

# app.py
from stringUtils import equalsIgnoreCase

equalsIgnoreCase('Hello', 'hello') # => true

你很可能会通过以下方式编写 app 模块:

Python 导入模块的自动完成功能很好

在 Python 中,首先指出要从中导入的模块:from from stringUtils。然后再编写要导入的内容 import ...。

如果你想了解更多可以导入的函数,实际上编辑器早已经知道模块名称并能够提供必要的建议。做的不错!

3. 解决方案

对 JavaScript 中的命名导入启用自动完成功能,我可以找到的唯一解决方案是向 IDE 寻求帮助。

例如,在 Visual Studio Code 中,你可以安装 JavaScript (ES6) code snippets 插件。

启用插件后,通过先敲下 imd 并按 tab 键,光标会首先跳到你编写模块路径的位置。然后再按 tab 键,光标跳回到大括号内的导入位置。运作方式如下:

带插件的 JavaScript 导入模块自动完成

4. 结论

在 JavaScript 中,import 语法会强制你先指出要导入的项目(函数、类、变量),然后再指明模块的路径。这种方法对自动完成是很不友好的。

相反,在 Python 中首先指定模块名称,然后指定要导入的组件:from stringUtils import equalsIgnoreCase。使用此语法可以轻松自动完成导入的项目。

通过使用 IDE 的可能性,例如 ES6 code snippet 插件,你可以部分解决 JavaScript 中命名导入自动完成的问题。总比没有好。

标签: #JavaScript# #import# #模块#

标题:JavaScript 模块导入的一个小麻烦

链接:https://fe-tech.viewnode.com/post/202004/03/

作者:疯狂的技术宅

声明: 本博客文章除特别声明外,均采用 CC BY-NC-ND 4.0 国际许可协议( 知识共享署名-非商业性使用-禁止演绎 4.0),转载请注明出处!

ReactJS与VueJS:两种最流行的前端 JS 框架之战
WebAR 如何改变增强现实的未来
  • 文章目录
  • 站点概览
疯狂的技术宅

疯狂的技术宅

退休程序员,硬件发烧友,人工智能爱好者。写写代码喝喝茶,晒晒太阳带带娃。

457 日志
8 分类
583 标签
GitHub
友情链接
  • viewnode
  • mofish
标签云
  • Javascript 172
  • Node.Js 62
  • Vue 36
  • Typescript 28
  • 实战项目 28
  • 面试 21
  • React 20
  • Css 17
  • 面试题 16
  • 教程 13
  • Promise 12
  • Chrome 9
  • Debug 9
  • 调试 9
  • 资源 9
  • Deno 8
  • Dom 8
  • 杂谈 8
  • 正则表达式 8
  • 测试 8
  • 1.命名导入和自动完成
  • 2. Python 是怎么做的
  • 3. 解决方案
  • 4. 结论
© 2018 - 2022 疯狂的技术宅 All Rights Reserved
Powered by - Hugo v0.99.0 / Theme by - NexT
Storage by 俺的服务器 / 冀ICP备2022010157号
0%