摘要:前言難得有空,今天開始重新規范的學習一下編程。簡而言之,區分他們之間的區別就是只是的引用,輔助后者添加內容用的。導出了方法導出了集合成對象導出因為導出是把零散的聚集在一起作為一個對象,而是導出為屬性。
前言
難得有空,今天開始重新規范的學習一下node編程。
但是引入模塊我看到用 require的方式,再聯想到咱們的ES6各種export 、export default。
阿西吧,頭都大了....
頭大完了,那我們坐下先理理他們的使用范圍。
require: node 和 es6 都支持的引入
export / import : 只有es6 支持的導出引入
module.exports / exports: 只有 node 支持的導出
這一刻起,我覺得是時候要把它們之間的關系都給捋清楚了,不然我得混亂死。話不多少,咱們開干!!
node模塊Node里面的模塊系統遵循的是CommonJS規范。
那問題又來了,什么是CommonJS規范呢?
由于js以前比較混亂,各寫各的代碼,沒有一個模塊的概念,而這個規范出來其實就是對模塊的一個定義。
CommonJS定義的模塊分為: 模塊標識(module)、模塊定義(exports) 、模塊引用(require)
先解釋 exports 和 module.exports
在一個node執行一個文件時,會給這個文件內生成一個 exports和module對象,
而module又有一個exports屬性。他們之間的關系如下圖,都指向一塊{}內存區域。
exports = module.exports = {};
那下面我們來看看代碼的吧。
//utils.js let a = 100; console.log(module.exports); //能打印出結果為:{} console.log(exports); //能打印出結果為:{} exports.a = 200; //這里辛苦勞作幫 module.exports 的內容給改成 {a : 200} exports = "指向其他內存區"; //這里把exports的指向指走 //test.js var a = require("/utils"); console.log(a) // 打印為 {a : 200}
從上面可以看出,其實require導出的內容是module.exports的指向的內存塊內容,并不是exports的。
簡而言之,區分他們之間的區別就是 exports 只是 module.exports的引用,輔助后者添加內容用的。
用白話講就是,exports只輔助module.exports操作內存中的數據,辛辛苦苦各種操作數據完,累得要死,結果到最后真正被require出去的內容還是module.exports的,真是好苦逼啊。
其實大家用內存塊的概念去理解,就會很清楚了。
然后呢,為了避免糊涂,盡量都用 module.exports 導出,然后用require導入。
ES中的模塊導出導入說實話,在es中的模塊,就非常清晰了。不過也有一些細節的東西需要搞清楚。
比如 export 和 export default,還有 導入的時候,import a from ..,import {a} from ..,總之也有點亂,那么下面我們就開始把它們捋清楚吧。
首先我們講這兩個導出,下面我們講講它們的區別
export與export default均可用于導出常量、函數、文件、模塊等
在一個文件或模塊中,export、import可以有多個,export default僅有一個
通過export方式導出,在導入時要加{ },export default則不需要
export能直接導出變量表達式,export default不行。
下面咱們看看代碼去驗證一下
testEs6Export.js"use strict" //導出變量 export const a = "100"; //導出方法 export const dogSay = function(){ console.log("wang wang"); } //導出方法第二種 function catSay(){ console.log("miao miao"); } export { catSay }; //export default導出 const m = 100; export default m; //export defult const m = 100;// 這里不能寫這種格式。index.js
//index.js "use strict" var express = require("express"); var router = express.Router(); import { dogSay, catSay } from "./testEs6Export"; //導出了 export 方法 import m from "./testEs6Export"; //導出了 export default import * as testModule from "./testEs6Export"; //as 集合成對象導出 /* GET home page. */ router.get("/", function(req, res, next) { dogSay(); catSay(); console.log(m); testModule.dogSay(); console.log(testModule.m); // undefined , 因為 as 導出是 把 零散的 export 聚集在一起作為一個對象,而export default 是導出為 default屬性。 console.log(testModule.default); // 100 res.send("恭喜你,成功驗證"); }); module.exports = router;
從上面可以看出,確實感覺 ES6的模塊系統非常靈活的。
代碼地址參考文獻GitHub: https://github.com/XuXiaoGH/e...
1.老樹新芽,在ES6下使用Express
2.exports 和 module.exports 的區別
3.module.exports與exports,export與export default之間的關系
感謝這三位前輩的分享。
寫在最后如果文章對你有所幫助,不妨點個贊或者收藏一下,這將是支持我繼續寫下去的動力。
謝謝親們。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/84505.html
摘要:中有多種的方式,而中針對這種情況做了多種語法,最常見的就是這種。這篇文章主要來講解中不同的具有什么意義。因為中的模塊大部分都是通過語法進行導出的。從而達到針對的兼容。個人建議將重命名。 JavaScript 中有多種 export 的方式,而 TypeScript 中針對這種情況做了多種 import 語法,最常見的就是 import * as path from path 這種。這篇...
摘要:前端日報精選掌握開發工具新一代前端開發技術和到底是咋回事第期深入淺出高階組件基于的移動頁面緩存解決方案譯保護我們的,立刻停止狐步舞中文譯中和之間的區別個人文章譯什么是個人文章譯個人文章熱身實戰過渡與動畫實現炫酷下拉, 2017-08-01 前端日報 精選 掌握Chrome開發工具:新一代前端開發技術exports、module.exports和export、export default...
摘要:平時有使用過和開發的同學,應該能體會到模塊化開發的好處。原因很簡單打包出來的使用了關鍵字,而小程序內部并支持。是一個模塊打包器,可以將小塊代碼編譯成大塊復雜的代碼,例如或應用程序。官網的這段介紹,正說明了就是用來打包的。 博客地址 最近有個需求,需要為小程序寫一個SDK,監控小程序的后臺接口調用和頁面報錯(類似fundebug) 聽起來高大上的SDK,其實就是一個JS文件,類似平時開發...
閱讀 1123·2023-04-26 00:12
閱讀 3249·2021-11-17 09:33
閱讀 1061·2021-09-04 16:45
閱讀 1186·2021-09-02 15:40
閱讀 2146·2019-08-30 15:56
閱讀 2951·2019-08-30 15:53
閱讀 3548·2019-08-30 11:23
閱讀 1932·2019-08-29 13:54