亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

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

Jaden / 2056人閱讀

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

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

node模塊

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

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

先解釋 exports 和 module.exports
在一個(gè)node執(zhí)行一個(gè)文件時(shí)，會(huì)給這個(gè)文件內(nèi)生成一個(gè) exports和module對象，
而module又有一個(gè)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} 
從上面可以看出，其實(shí)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的，真是好苦逼啊。

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

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

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

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

export 和 export default

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

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

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

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

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

下面咱們看看代碼去驗(yàn)證一下

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 , 因?yàn)? as 導(dǎo)出是 把 零散的 export 聚集在一起作為一個(gè)對象，而export default 是導(dǎo)出為 default屬性。
  console.log(testModule.default); // 100
  res.send("恭喜你，成功驗(yàn)證");
});

module.exports = router;

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

代碼地址 
GitHub:   https://github.com/XuXiaoGH/e...
參考文獻(xiàn)

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

感謝這三位前輩的分享。

寫在最后

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

謝謝親們。

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

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

相關(guān)文章

  • TypeScript 中的多種 import 解義

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

    chanthuang 評論0 收藏0

  • 2017-08-01 前端日報(bào)

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

    gclove 評論0 收藏0

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

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

    aristark 評論0 收藏0

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

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

    AprilJ 評論0 收藏0

發(fā)表評論

0條評論

最新活動(dòng)
閱讀需要支付1元查看
<