成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

exports、module.exports和export、export default到底是咋回事

Jaden / 2005人閱讀

摘要：前言難得有空，今天開始重新規(guī)范的學(xué)習(xí)一下編程。簡而言之，區(qū)分他們之間的區(qū)別就是只是的引用，輔助后者添加內(nèi)容用的。導(dǎo)出了方法導(dǎo)出了集合成對象導(dǎo)出因為導(dǎo)出是把零散的聚集在一起作為一個對象，而是導(dǎo)出為屬性。

前言

難得有空，今天開始重新規(guī)范的學(xué)習(xí)一下node編程。
但是引入模塊我看到用 require的方式，再聯(lián)想到咱們的ES6各種export 、export default。

阿西吧，頭都大了....

頭大完了，那我們坐下先理理他們的使用范圍。

require:  node 和 es6 都支持的引入
export / import : 只有es6 支持的導(dǎo)出引入
module.exports / exports: 只有 node 支持的導(dǎo)出

這一刻起，我覺得是時候要把它們之間的關(guān)系都給捋清楚了，不然我得混亂死。話不多少，咱們開干??！

node模塊

Node里面的模塊系統(tǒng)遵循的是CommonJS規(guī)范。
那問題又來了，什么是CommonJS規(guī)范呢？
由于js以前比較混亂，各寫各的代碼，沒有一個模塊的概念，而這個規(guī)范出來其實就是對模塊的一個定義。

CommonJS定義的模塊分為: 模塊標識(module)、模塊定義(exports) 、模塊引用(require)

先解釋 exports 和 module.exports
在一個node執(zhí)行一個文件時，會給這個文件內(nèi)生成一個 exports和module對象，
而module又有一個exports屬性。他們之間的關(guān)系如下圖，都指向一塊{}內(nèi)存區(qū)域。

exports = module.exports = {};

那下面我們來看看代碼的吧。

//utils.js
let a = 100;

console.log(module.exports); //能打印出結(jié)果為：{}
console.log(exports); //能打印出結(jié)果為：{}

exports.a = 200; //這里辛苦勞作幫 module.exports 的內(nèi)容給改成 {a : 200}

exports = "指向其他內(nèi)存區(qū)"; //這里把exports的指向指走

//test.js

var a = require("/utils");
console.log(a) // 打印為 {a : 200} 
從上面可以看出，其實require導(dǎo)出的內(nèi)容是module.exports的指向的內(nèi)存塊內(nèi)容，并不是exports的。
簡而言之，區(qū)分他們之間的區(qū)別就是 exports 只是 module.exports的引用，輔助后者添加內(nèi)容用的。

用白話講就是，exports只輔助module.exports操作內(nèi)存中的數(shù)據(jù)，辛辛苦苦各種操作數(shù)據(jù)完，累得要死，結(jié)果到最后真正被require出去的內(nèi)容還是module.exports的，真是好苦逼啊。

其實大家用內(nèi)存塊的概念去理解，就會很清楚了。

然后呢，為了避免糊涂，盡量都用 module.exports 導(dǎo)出，然后用require導(dǎo)入。

ES中的模塊導(dǎo)出導(dǎo)入

說實話，在es中的模塊，就非常清晰了。不過也有一些細節(jié)的東西需要搞清楚。
比如 export 和 export default，還有 導(dǎo)入的時候，import a from ..,import {a} from ..，總之也有點亂，那么下面我們就開始把它們捋清楚吧。

export 和 export default

首先我們講這兩個導(dǎo)出，下面我們講講它們的區(qū)別

export與export default均可用于導(dǎo)出常量、函數(shù)、文件、模塊等

在一個文件或模塊中，export、import可以有多個，export default僅有一個

通過export方式導(dǎo)出，在導(dǎo)入時要加{ }，export default則不需要

export能直接導(dǎo)出變量表達式，export default不行。

下面咱們看看代碼去驗證一下

testEs6Export.js 
"use strict"
//導(dǎo)出變量
export const a = "100";  

 //導(dǎo)出方法
export const dogSay = function(){ 
    console.log("wang wang");
}

 //導(dǎo)出方法第二種
function catSay(){
   console.log("miao miao"); 
}
export { catSay };

//export default導(dǎo)出
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"; //導(dǎo)出了 export 方法 
import m from "./testEs6Export";  //導(dǎo)出了 export default 

import * as testModule from "./testEs6Export"; //as 集合成對象導(dǎo)出



/* GET home page. */
router.get("/", function(req, res, next) {
  dogSay();
  catSay();
  console.log(m);
  testModule.dogSay();
  console.log(testModule.m); // undefined , 因為  as 導(dǎo)出是 把 零散的 export 聚集在一起作為一個對象，而export default 是導(dǎo)出為 default屬性。
  console.log(testModule.default); // 100
  res.send("恭喜你，成功驗證");
});

module.exports = router;

從上面可以看出，確實感覺 ES6的模塊系統(tǒng)非常靈活的。

代碼地址 
GitHub:   https://github.com/XuXiaoGH/e...
參考文獻

1.老樹新芽，在ES6下使用Express
2.exports 和 module.exports 的區(qū)別
3.module.exports與exports,export與export default之間的關(guān)系

感謝這三位前輩的分享。

寫在最后

如果文章對你有所幫助，不妨點個贊或者收藏一下，這將是支持我繼續(xù)寫下去的動力。

謝謝親們。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/84505.html

相關(guān)文章

  • TypeScript 中的多種 import 解義

    摘要：中有多種的方式，而中針對這種情況做了多種語法，最常見的就是這種。這篇文章主要來講解中不同的具有什么意義。因為中的模塊大部分都是通過語法進行導(dǎo)出的。從而達到針對的兼容。個人建議將重命名。 JavaScript 中有多種 export 的方式，而 TypeScript 中針對這種情況做了多種 import 語法，最常見的就是 import * as path from path 這種。這篇...

    chanthuang 評論0 收藏0

  • 2017-08-01 前端日報

    摘要：前端日報精選掌握開發(fā)工具新一代前端開發(fā)技術(shù)和到底是咋回事第期深入淺出高階組件基于的移動頁面緩存解決方案譯保護我們的，立刻停止狐步舞中文譯中和之間的區(qū)別個人文章譯什么是個人文章譯個人文章熱身實戰(zhàn)過渡與動畫實現(xiàn)炫酷下拉， 2017-08-01 前端日報 精選 掌握Chrome開發(fā)工具：新一代前端開發(fā)技術(shù)exports、module.exports和export、export default...

    gclove 評論0 收藏0

  • H5學(xué)習(xí)

    摘要：為此決定自研一個富文本編輯器。本文，主要介紹如何實現(xiàn)富文本編輯器，和解決一些不同瀏覽器和設(shè)備之間的。 對ES6Generator函數(shù)的理解 Generator 函數(shù)是 ES6 提供的一種異步編程解決方案，語法行為與傳統(tǒng)函數(shù)完全不同。 JavaScript 設(shè)計模式 ② 巧用工廠模式和創(chuàng)建者模式 我為什么把他們兩個放在一起講？我覺得這兩個設(shè)計模式有相似之處，有時候會一個設(shè)計模式不能滿...

    aristark 評論0 收藏0

  • 使用模塊化工具打包自己開發(fā)的JS庫

    摘要：平時有使用過和開發(fā)的同學(xué)，應(yīng)該能體會到模塊化開發(fā)的好處。原因很簡單打包出來的使用了關(guān)鍵字，而小程序內(nèi)部并支持。是一個模塊打包器，可以將小塊代碼編譯成大塊復(fù)雜的代碼，例如或應(yīng)用程序。官網(wǎng)的這段介紹，正說明了就是用來打包的。 博客地址 最近有個需求，需要為小程序?qū)懸粋€SDK，監(jiān)控小程序的后臺接口調(diào)用和頁面報錯(類似fundebug) 聽起來高大上的SDK，其實就是一個JS文件，類似平時開發(fā)...

    AprilJ 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<