JavaScript 模塊導入的一個小麻煩

做者：Dmitri Pavlutin

翻譯：瘋狂的技術宅

原文：https://dmitripavlutin.com/ja...

未經容許嚴禁轉載

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

你極可能會經過如下方式編寫代碼：

首先，你必須先寫好 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 中，首先指出要從中導入的模塊：from from stringUtils。而後再編寫要導入的內容 import ...。

若是你想了解更多能夠導入的函數，實際上編輯器早已經知道模塊名稱並可以提供必要的建議。作的不錯！

3. 解決方案

對 JavaScript 中的命名導入啓用自動完成功能，我能夠找到的惟一解決方案是向 IDE 尋求幫助。

例如，在 Visual Studio Code 中，你能夠安裝 JavaScript (ES6) code snippets 插件。

啓用插件後，經過先敲下 imd 並按 tab 鍵，光標會首先跳到你編寫模塊路徑的位置。而後再按 tab 鍵，光標跳回到大括號內的導入位置。運做方式以下：

4. 結論

在 JavaScript 中，import 語法會強制你先指出要導入的項目（函數、類、變量），而後再指明模塊的路徑。這種方法對自動完成是很不友好的。

相反，在 Python 中首先指定模塊名稱，而後指定要導入的組件：from stringUtils import equalsIgnoreCase。使用此語法能夠輕鬆自動完成導入的項目。

經過使用 IDE 的可能性，例如 ES6 code snippet 插件，你能夠部分解決 JavaScript 中命名導入自動完成的問題。總比沒有好。

---

本文首發微信公衆號：前端先鋒

歡迎掃描二維碼關注公衆號，天天都給你推送新鮮的前端技術文章

歡迎繼續閱讀本專欄其它高贊文章：

• 深刻理解Shadow DOM v1
• 一步步教你用 WebVR 實現虛擬現實遊戲
• 13個幫你提升開發效率的現代CSS框架
• 快速上手BootstrapVue
• JavaScript引擎是如何工做的？從調用棧到Promise你須要知道的一切
• WebSocket實戰：在 Node 和 React 之間進行實時通訊
• 關於 Git 的 20 個面試題
• 深刻解析 Node.js 的 console.log
• Node.js 到底是什麼？
• 30分鐘用Node.js構建一個API服務器
• Javascript的對象拷貝
• 程序員30歲前月薪達不到30K，該何去何從
• 14個最好的 JavaScript 數據可視化庫
• 8 個給前端的頂級 VS Code 擴展插件
• Node.js 多線程徹底指南
• 把HTML轉成PDF的4個方案及實現

---

• 更多文章...