你知道 JS 中的模塊導入有一個缺點嗎？

做者：Dmitri Pavlutin 譯者：前端小智 來源：Dmitri Pavlutin

---

點贊再看，養成習慣

本文 GitHub github.com/qq449245884… 上已經收錄，更多往期高贊文章的分類，也整理了不少個人文檔，和教程資料。歡迎Star和完善，你們面試能夠參照考點複習，但願咱們一塊兒有點東西。

1.命名導入和自動完成

假設我信編寫了一個簡單的JavaScript模塊：

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

模塊stringUtils具備導出了一個函數exequalsIgnoreCase，該函數比較兩個忽略大小寫的字符串。

看起來沒啥問題，挺好的。

如今在 app.js 文件中導入函數 exequalsIgnoreCase

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

equalsIgnoreCase('Hello', 'hello'); // => true
複製代碼

咱們大多數會這樣來引入：

首先，您必須編寫導入名稱import {}。 在此步驟中，IDE沒法提供有關要導入的可用名稱的任何建議。

而後，繼續寫入 from './stringUtils'，而後移回大括號並展開自動完成以選擇要導入的名稱。

儘管 ES6 模塊優勢不少，但導入模塊語法使自動完成功能難以使用。

2.Python 中的模塊

如今讓咱們嘗試在 Python 中導入命名組件。它有一樣的問題嗎？

下面用 Python 實現的相同模塊stringUtils和函數equalsIgnoreCase：

# stringUtils.py
def equalsIgnoreCase(string1, string2):
  return string1.lower() == string2.lower()
複製代碼

在 Python 中，沒必要顯式地指出要導出的函數。

如今，在另外一個Python模塊app內部，將stringUtils導入equalsIgnoreCase函數：

在Python中，首先指出要從:from stringUtils哪裏導入的模塊。

若是你想知道能夠導入的函數，編輯器已經知道了模塊名並給出了必要的建議，這種方式會更加友好。

3.解決方法

我能找到的在JavaScript中對命名導入啓用自動完成的惟一解決方案是調用IDE以得到幫助。

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

啓用插件後，經過使用imd代碼段並按tab鍵，光標首先跳到編寫模塊路徑的位置。而後，在按下tab鍵後，光標會跳轉回花括號內的導入位置。它是這樣工做的:

總結

在JavaScript中，導入語法會強制咱們先指出要導入的項目（函數，類，變量），而後再指明模塊的路徑。 這種方法不太友好。

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

經過使用IDE的擴展插件，例如 ES6 code snippet 插件，能夠減輕JavaScript中命名導入自動完成的問題, 總比沒有好。

---

原文：dmitripavlutin.com/javascript-…

交流

文章每週持續更新，能夠微信搜索「 大遷世界 」第一時間閱讀和催更（比博客早一到兩篇喲），本文 GitHub github.com/qq449245884… 已經收錄，整理了不少個人文檔，歡迎Star和完善，你們面試能夠參照考點複習，另外關注公衆號，後臺回覆福利，便可看到福利，你懂的。