javascript中import和export的區別及用法總結

2021-01-07 億仁網

import 和require的區別,import 和js的發展歷史息息相關,歷史上 js沒有模塊(module)體系,無法將一個大程序拆分成互相依賴的小文件,再用簡單的方法拼裝起來。 在 ES6 之前,社區制定了一些模塊加載方案,最主要的有 CommonJS 和 AMD 兩種。前者用於伺服器,後者用於瀏覽器。ES6 在語言標準的層面上,實現了模塊功能,而且實現得相當簡單,完全可以取代 CommonJS 和 AMD 規範,成為瀏覽器和伺服器通用的模塊解決方案。也就是我們常見的 require 方法。 比如 `let { stat, exists, readFile } = require('fs');ES6 在語言標準的層面上,實現了模塊功能。ES6 模塊不是對象,而是通過export命令顯式指定輸出的代碼,再通過import命令輸入。

import 的幾種用法:

import用法解釋

import後面的from指定模塊文件的位置,可以是相對路徑,也可以是絕對路徑,.js後綴可以省略。如果只是模塊名,不帶有路徑,那麼必須有配置文件,告訴 JavaScript 引擎該模塊的位置。某些打包工具可以允許或要求使用擴展名。上面代碼使用的 ==as== 關鍵字,相當於import 進來的『值』的別名。import * from 'xx' 將導入整個模塊的內容,而 import defaultName 和 import { export1, export2 } 將導入export的某個對象或值最後一種方式 import 'modules' 將運行模塊中的全局代碼,而不導入任何值。import的形式需要export的支持,比如 import defaultName from 'module.js 將導出 在modules.js中export default的對象或值。

如上,export也是es6的內容,和import是一對。export的幾種用法:

export用法解釋,命名導出

對應的import 寫法:import { ex1, demoFun, ex2, multiply } from 'module.js';

默認導出,export 命名導出需要export 名字和import名字嚴格一致。而export default命令,為模塊指定默認輸出,在import 的時候可以隨意命名名字。一個模塊只能有一個默認輸出,也就是說 export default 一個模塊只能用一次。 用法:

export 和 import 混合使用(模塊重定向)也就是在一個模塊之中,先輸入後輸出同一個模塊。比如:

相關焦點

  • 如何使用JavaScript實現前端導入和導出excel文件
    1.2 實現一鍵導入excel文件並生成table表格導入excel文件的功能我們可以用javascript原生的方式實現解析, 比如可以用fileReader這些原生api,但考慮到開發效率和後期的維護, 筆者這裡採用antd的Upload組件和XLSX來實現上傳文件並解析的功能.
  • JavaScript 模塊介紹
    但隨著代碼規模的增大,開始把代碼整理到模塊中,出現了一些庫:AMD - 最早期的一個模塊規範,最開始由 require.js 實現了這個規範。CommonJS - Node.js 指定的規範UMD - 統一模塊規範,和 AMD, CommonJS 規範兼容。
  • 用Java語言巧妙實現javascript的運行
    Java前言在學習開發的過程中javascript是每位程式設計師小盆友都得掌握的一種方法,他們可以說是貫穿了整個Java開發的語言,下面給大家演示一下在Java中如何完美運行javascript案例,跟著小編一起來學習一下吧
  • vue高級進階系列——用typescript玩轉vue和vuex
    接下來,我不會過多介紹vuex的用法,而是介紹如何基於typescript,用class的方式來使用vue和vuex進行項目開發,相信使用過react的朋友們對class的寫法不會陌生,那就讓我們開始吧!為了省去一些配置上的麻煩,我們直接採用vue-cli3來搭建項目。在創建項目的時候選中typescript即可。
  • JavaScript引入模塊的歷史簡介
    模塊可以相互加載,並可以使用特殊的指令 export 和 import 來交換功能,從另一個模塊調用一個模塊的函數:export 關鍵字標記了可以從當前模塊外部訪問的變量和函數。import 關鍵字允許從其他模塊導入功能。
  • ...attention to compliance with controlled goods export
    It is the first special law on China’s export control.Nanning Customs, as one of the departments dealing with export control, will strictly carry out outbound supervision in accordance with regulations, and rigidly check export licenses in accordance
  • php和javascript通用的數據加解密踩坑記
    微信公眾號:PHP在線最新我想搞個小應用***,前端用的vue,後端是自己寫的php api框架,前後端分離,api數據傳輸想保密,雖然用上了https,但是數據還是可以被抓包看見的,心裡不安,於是就想數據加密傳輸,那就要使用javascript和php通用的加解密方式了,js加密的數據可以通過php解密,php加密的數據可以被js解密
  • ES2020中JavaScript 10個你應該知道的新功能
    這就意味著,現在對 ES2020 中 Javascript 的新增和改進要有一個完整的了解。讓我們來看看都有哪些改變。1: BigIntBigInt,Javascript 中最期待的新功能終於落地。它允許開發者在 JS 中使用更大的整數進行數據處理。
  • 解讀高考3500詞——harmony,ignore,import,impress,indicate
    忽視,不理He ignored the speed limit and drove too fast.他無視限速開得飛快I could no longer ignore his rudeness我對他的無禮忍無可忍了38.importv.進口
  • React知識點總結
    和 DOM 事件不一樣,和 Vue 事件也不一樣}結果如下:表單受控組件:通過change事件來改變stateimport React from 'react'class FormDemo extends React.Component
  • Java中Arrays的3種用法(toString、binarySearch、copyOf)
    來源:https://blog.csdn.net/weixin_52142731/article/details/112687272目錄:ArraystoString()binarySearch()copyOf()總結ArraysArrays類位於 java.util 包中,主要包含了操縱數組的各種方法
  • Javascript去除字符串中的點或其他符號
    今天在寫一個前端頁面的時候遇到了一個ip參數問題,我想把ip值中的點替換成 - 的形式。在前端上使用javascript進行操作的。測試了兩次沒有好用,程序直接把整個字符串都進行了替換,在考慮這個是為什麼呢?
  • 小介詞大用法之at用法總結
    前面我們講過in的常用用法,有一點需要補充,in還可以加一段時間,比如in two days,一般表示在兩天之內,是一般將來時的時間標誌。正式進入今天的主題,at有很多用法,首先可以加時間點——at 6 O'clock 在六點整,其次,at還可以加小地方,這一點區別於in的用法,舉例,常用的有:at home, at school等,再其次,at還可以加節日,比如at Christmas,.at Halloween,
  • 初中英語知識點總結:初中英語語法——連詞and和or在句中的用法和...
    新東方網小編給各位初三考生整理了各學科的複習攻略,本文是初中初中英語知識點總結:初中英語語法——and和or在句中的用法和區別,幫助各位考生梳理知識脈絡,理清做題思路,希望各位考生可以在考試中取得優異成績!   and和or是初中英語的常見並列連詞,用於引導兩個並列的詞、詞組或句子。and的基本意思是「和,與」,or的基本意思是「或者,還是」。
  • 幾個非常有意思的javascript知識點總結
    本文轉載自【微信公眾號:趣談前端,ID:beautifulFront】經微信公眾號授權轉載,如需轉載與原文作者聯繫作為一名前端愛好者, 筆者利用空餘時間研究了幾個國外網站的源碼,發現不管是庫,還是業務代碼,都會用到了一些比較有意思的API,雖然平時在工作中部分接觸過,但是經過這次的研究,覺得很有必要總結一下,畢竟已經2020
  • 70個常用行業類英語單詞總結,各行各業及英語考試必備,快收藏學習
    70個常用行業類英語單詞總結,各行各業,日常生活交流及各種英語考試必備,單詞分類記憶,英語輕鬆學。一、名詞(Nouns)assembly line 裝配線;流水線;生產線banking [bk] n.建築業engineering [endnr] n.工程行業export [ekspt] n. 輸出品;出口物factory [fktri] n.
  • 精通react/vue組件設計之實現一個Tag(標籤)和Empty(空狀態)組件
    .作為數據驅動的領導者react/vue等MVVM框架的出現,幫我們減少了工作中大量的冗餘代碼, 一切皆組件的思想深得人心.所以, 為了讓工程師們有更多的時間去考慮業務和產品迭代,我們不得不掌握高質量組件設計的思路和方法.所以筆者將花時間去總結各種業務場景下的組件的設計思路和方法,並用原生框架的語法去實現各種常用組件的開發,希望等讓前端新手或者有一定工作經驗的朋友能有所收穫.
  • VUE 新語法糖魔改 JavaScript 引爭議
    同時在 <script setup> 中引入了一個消除 ref 的 value 屬性的語法糖,該語法糖在編譯期間自動將語法糖轉為正常代碼。此外,尤雨溪也承認自己是從 Svelte 框架得到了啟發,Svelte 早前就魔改了 JS 的語義, export let $ 的語義都被 Svelte 賦予了更強大更方便的功能。