export,export default,module.exports,import,require之間的區別和關聯

来源:https://www.cnblogs.com/deepthought/archive/2019/08/18/11373568.html
-Advertisement-
Play Games

module.exports Node應用由模塊組成,採用CommonJS模塊規範。根據這個規範,每個文件就是一個模塊,有自己的作用域。在這些文件裡面定義的變數、函數、類,都是私有的,對外不可見,因此規避掉了作用域污染。 根據CommonJS規定,每個模塊內部,module變數代表當前模塊,這個變數 ...


module.exports

Node應用由模塊組成,採用CommonJS模塊規範。根據這個規範,每個文件就是一個模塊,有自己的作用域。在這些文件裡面定義的變數、函數、類,都是私有的,對外不可見,因此規避掉了作用域污染。

根據CommonJS規定,每個模塊內部,module變數代表當前模塊,這個變數是一個對象,它的exports屬性(即module.exports)是對外的介面。載入某個模塊,其實就是載入該模塊的exports屬性。

舉例:通過module.exports輸出變數 age 和 sayHelloTo 函數。

./MyModule.js
    var age = 7; 
    var sayHelloTo= function (name) { 
        return "hello " + name;
    }; 
    module.exports.age = age; 
    module.exports.sayHelloTo=sayHelloTo;

require:用於載入模塊

var temp = require('./MyModule.js');  //這裡也可以使用 import myModule from './MyModule.js'
console.log(temp.age); // 7 
console.log(temp.sayHelloTo("Steve")); // hello Steve

額外說明:對於自定義的模塊,需要使用相對路徑,否則會提示找不到模塊/組件(預設情況下,非相對路徑的引用,會從node_modules文件夾中查找)

exports 與 module.exports

為了方便,node為每個模塊提供了一個exports變數,指向module.exports。這等同於在每個模塊頭部,有這麼一行代碼:

var exports = module.exports;

因此,我們可以直接在exports對象上添加方法(等同於在 module.exports 添加一樣)

./MyModule.js
    var age = 7; 
    var sayHelloTo= function (name) { 
        return "hello " + name;
    }; 
    exports.age = age;  //等效於:  module.exports.age = age;
    exports.sayHelloTo=sayHelloTo;  //等效於: module.exports.sayHelloTo=sayHelloTo;

P.S.不能直接將exports指向一個值,這會切斷 exports 與 module.exports 的聯繫(但是可以用module.exports來指向一個值)

./MyModule.js
    var age = 7; 
    var sayHelloTo= function (name) { 
        return "hello " + name;
    }; 
    exports = age;  //不要這麼乾。這麼做會切斷exports與module.exports的聯繫

不同於CommonJS,ES6使用 export 和 import 來導入、導出模塊

用 export 導出的模塊,需要用 import 來進行導入,而不能用 require。
P.S.:export 命令規定的是對外的介面,必須與模塊內部的變數建立一一對應的關係

const utils = {
    showSth : function(){
        console.log("showSth");
    },
    saySth : function(){
        console.log("saySth");
    }
}
//導出的3種方式
export var m = utils; // 方式1,這種方式在引用的時候需要這樣: import {m} from './utils.js';
export {utils}; // 方式2,用大括弧來導出變數,如果導出的變數有多個,則{變數1,變數2,變數3...,變數N}。這種方式在引用的時候需要這樣: import {utils} from './utils.js';
export {utils as myUtils}; // 方式3,這種方式在引用的時候需要這樣: import {myUtils} from './utils.js';
在引用的地方,也可以直接指定別名,如:import {myUtils as utils} from './utils.js';

MDN對於export和import的語法說明:

export語法:
    export { name1, name2, …, nameN };
    export { variable1 as name1, variable2 as name2, …, nameN };
    export let name1, name2, …, nameN; // also var, const
    export let name1 = …, name2 = …, …, nameN; // also var, const
    export function FunctionName(){...}
    export class ClassName {...}

    export default expression;
    export default function (…) { … } // also class, function*
    export default function name1(…) { … } // also class, function*
    export { name1 as default, … };

    export * from …;
    export { name1, name2, …, nameN } from …;
    export { import1 as name1, import2 as name2, …, nameN } from …;
    export { default } from …;
import語法:
    import defaultExport from "module-name";
    import * as name from "module-name";
    import { export } from "module-name";
    import { export as alias } from "module-name";
    import { export1 , export2 } from "module-name";
    import { export1 , export2 as alias2 , [...] } from "module-name";
    import defaultExport, { export [ , [...] ] } from "module-name";
    import defaultExport, * as name from "module-name";
    import "module-name";
    var promise = import(module-name);

export 和 export default

  1. export 和export default 均可用於導出(常量 | 函數 | 文件 | 模塊)等。
  2. 可以在其他文件中通過 import+(常量 | 函數 | 文件 | 模塊)名的方式,將其導入,以便能夠進行使用。
  3. 在一個文件或者模塊中,export、import 可以有多個,但 export default 僅有一個。
    ```javascript
    const utils = {
    showSth : function(){
    console.log("showSth");
    },
    saySth : function(){
    console.log("saySth");
    }
    }
    const name = "my name is Artech";
    export {name}; //命名導出
    export {utils};

    對於命名方式導出的,在導入的時候必須使用相應對象的相同名稱
    引用的時候:import {utils,name as myName} from './utils.js';
    ```
  4. 通過 export 方式導出,在導入時要用花括弧{ };而通過 export default 方式導出的,則不需要:
    ```javascript
    如通過 export default 導出
    export default utils;
    則在使用的時候不用加花括弧,且導入時的名字可以自定義,如:
    import myUtils from './utils.js'; 對於預設方式導出的,則導入的時候,名稱可以隨便取

    預設導出:不能使用 let,var 或 const 作為預設導出
    ```

import *

將一個js文件中定義的方法,模塊,對象等,全部導出,一般結合別名使用,如:

myModule.js
   export const fun1 = ()=>{}
   export const objInfo = {...};

使用:

demo.js:引用myModule.JS
    import * as myAlias from './myModule';
    //fun1()和objInfo都是定義在myModule中的方法和對象
    myAlias.fun1();
    myAlias.objInfo;

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 需要安裝Navicat軟體 可以複製百度雲鏈接,若失效,請聯繫我,我會儘快回覆 將鏈接中的破解文件複製到軟體安裝的位置即完成破解 鏈接:https://pan.baidu.com/s/1sIkjsd3TXyNZF9vdhOAnUQ 提取碼:kq7t 複製這段內容後打開百度網盤手機App,操作更方便哦 ...
  • Drawer(抽屜組件)可以實現類似抽屜拉出和推入的效果,可以從側邊欄拉出導航面板。通常Drawer是和ListView組件組合使用的。 Drawer組件可以添加頭部效果,用DrawerHeader和UserAccountsDrawerHeader這兩個組件可以實現。 DrawerHeade... ...
  • Groovy語法,變數定義,方法聲明,集合操作,閉包,運算符,斷言等基礎知識。 ...
  • 博客園美化首頁隨筆同時一天發佈內容分開分開版塊展示 一.直接上js代碼 二.缺點 1.編輯欄我把他刪了 因為我用不到 要修改區域在 ...
  • 深入Vue.js響應式原理 一、創建一個Vue應用 new Vue({ data() { return { name: 'yjh', }; }, router, store, render: h => h(App), }).$mount('#app'); 二、實例化一個Vue應用到底發生了什麼? v ...
  • 寫在前面: 該篇是個人平時對web前端小知識點的總結,會不定時更新...... 如有錯誤,敬請批評指正。 正文: 1、WWW是World Wide Web的縮寫。 2、HTML(Hyper Text Markup Language)是用於描述網頁文檔的超文檔標記性語言。 3、Web主要包括超文本傳輸 ...
  • jQuery知識梳理20190817 [TOC] 1. jQuery的特征 強大選擇器: 方便快速查找DOM元素 隱式遍歷(迭代): 一次操作多個元素 讀寫合一: 讀數據/寫數據用的是一個函數 鏈式調用: 可以通過.不斷調用jQuery對象的方法 事件處理 DOM操作(CUD) 樣式操作 動畫 瀏覽 ...
  • 隨機驗證碼: ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...