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

資訊專欄INFORMATION COLUMN

module.exports,exports,export和export default,impor

mindwind / 2469人閱讀

摘要：指向的內(nèi)存有了變化，而指向的內(nèi)存并無變化，仍為空對象。返回的是而不是。關(guān)于和的關(guān)系可以總結(jié)為初始值為一個空對象，也指向這個空對象返回的是而不是和模塊功能主要由和構(gòu)成。導(dǎo)出模塊的對外接口，命令導(dǎo)入其他模塊暴露的接口。

基本問題

module.exports和exports是屬于CommonJS模塊規(guī)范，導(dǎo)出模塊！

export和export default是屬于ES6語法，導(dǎo)出模塊！

同樣import和require分別屬于ES6和CommonJS，導(dǎo)入模塊！

module.exports和exports

每一個Node.js執(zhí)行文件，都自動創(chuàng)建2個對象 exports 和 module, module 又有一個屬性 exports, 這個exports 屬性指向一個空對象 {}; 同時 exports這個對象也指向了這個空對象{}。

exports => {} <=module.exports

exports和module.exports指向同一塊內(nèi)存，但require()返回的是module.exports而不是exports。

var str = "difference"
exports.a = str;
exports.b = function () {
        ////////
}

給 exports 打點(diǎn)添加屬性其實(shí)也是給 module.exports 這個空對象打點(diǎn)添加了兩個屬性而已，上面的代碼相當(dāng)于：

var str = "difference"
module.exports.a = str;
module.exports.b = function () {
        ////////
}

來看下exports和module.exports的使用

使用exports

//app.js

var s = require("./log");
s.log("hello");

//log.js

exports.log =function (str) {
    console.log(str);
}

使用module.exports

//app.js

var s = require("./log");
s.log("hello");

//log.js

module.exports =function (str) {
    console.log(str);
}

上述兩種用法都沒問題，但如果這樣使用

 exports = function (str) {
    console.log(str);
}

運(yùn)行程序就會報錯。

前面的例子中給 exports 打點(diǎn)添加屬性，只是對 exports 指向的內(nèi)存做了修改。而上例則是對exports指向的內(nèi)存進(jìn)行了覆蓋，使exports指向了一塊新的內(nèi)存，這樣，exports和module.exports指向的內(nèi)存并不是同一塊，exports和module.exports并無任何關(guān)系。exports指向的內(nèi)存有了變化，而module.exports指向的內(nèi)存并無變化，仍為空對象{}。

require得到的會是一個空對象，則會有

TypeError: s.log is not a function

再看下面的例子

//app.js

var x = require("./init");
console.log(x.a)

//init.js

module.exports = {a: 2}
exports.a = 1

運(yùn)行app.js會有輸出

2

module.exports通過賦值方式已經(jīng)和exports對象指向的對象不同了，exports對象怎么改和module.exports對象沒關(guān)系了。require()返回的是module.exports而不是exports。

關(guān)于exports和module.exports的關(guān)系可以總結(jié)為

module.exports 初始值為一個空對象 {}，exports也指向這個空對象

require() 返回的是 module.exports 而不是 exports

export和export default

模塊功能主要由：export和import構(gòu)成。export導(dǎo)出模塊的對外接口，import命令導(dǎo)入其他模塊暴露的接口。

export其實(shí)和export default就是寫法上面有點(diǎn)差別，一個是導(dǎo)出一個個多帶帶接口，一個是默認(rèn)導(dǎo)出一個整體接口。使用import命令的時候，用戶需要知道所要加載的變量名或函數(shù)名，否則無法加載。這里就有一個簡單寫法不用去知道有哪些具體的暴露接口名，就用export default命令，為模塊指定默認(rèn)輸出。

使用export

// testA.js
var f = "Miel";
var name = "Jack";
var data= 1988;

export {f, name, data};

使用export命令定義了模塊的對外接口以后，其他 JS 文件就可以通過import命令加載這個模塊。

// main.js
import {f, name, data} from "./testA";

使用export default

// export-default.js
export default function () {
  console.log("foo");
}

// 或者寫成

function foo() {
  console.log("foo");
}
export default foo;

// import-default.js
import customName from "./export-default";
customName(); // "foo"

下面比較一下export default和export 輸出。

// 第一組
export default function car() { // 輸出
  // ...
}

import car from "car"; // 輸入

// 第二組
export function car2() { // 輸出
  // ...
};

import {car2} from "car2"; // 輸入

可以看到第一組是使用export default，import語句不需要使用大括號；第二組使用export，對應(yīng)的import語句需要使用大括號，一個模塊只能有一個默認(rèn)輸出，所以export default只能使用一次。

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

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

相關(guān)文章

  • 從零開始搭建一個React項(xiàng)目

    摘要：優(yōu)化代碼拆分從入口文件開始，遞歸地構(gòu)建了整個應(yīng)用的模塊依賴圖表，然后通常會將所有的模塊打包成一個。 如果你還不知道什么是React，請點(diǎn)擊這里github源碼 安裝Node.js 如果你還不知道什么是ECMAScript，請點(diǎn)擊這里 如果你還不知道什么是Node.js，請點(diǎn)擊這里 下載Node.js并安裝；接著打開windows命令行窗口分別輸入node -v及npm -v如下圖所示，...

    HollisChuang 評論0 收藏0

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

    摘要：前言難得有空，今天開始重新規(guī)范的學(xué)習(xí)一下編程。簡而言之，區(qū)分他們之間的區(qū)別就是只是的引用，輔助后者添加內(nèi)容用的。導(dǎo)出了方法導(dǎo)出了集合成對象導(dǎo)出因?yàn)閷?dǎo)出是把零散的聚集在一起作為一個對象，而是導(dǎo)出為屬性。 前言 難得有空，今天開始重新規(guī)范的學(xué)習(xí)一下node編程。但是引入模塊我看到用 require的方式，再聯(lián)想到咱們的ES6各種export 、export default。 阿西吧，頭都大...

    Jaden 評論0 收藏0

  • JavaScript中AMD和ES6模塊的導(dǎo)入導(dǎo)出對比

    摘要：每個模塊內(nèi)部，變量代表當(dāng)前模塊。這個變量是一個對象，它的屬性即是對外的接口。加載某個模塊，其實(shí)是加載該模塊的屬性。為了方便，為每個模塊提供一個變量，指向。這等同在每個模塊頭部，有一行這樣的命令。 我們前端在開發(fā)過程中經(jīng)常會遇到導(dǎo)入導(dǎo)出功能，在導(dǎo)入時，有時候是require，有時候是import在導(dǎo)出時，有時候是exports，module.exports，有時候是export，expo...

    劉明 評論0 收藏0

  • 前端模塊化雜記

    摘要：入口模塊返回的賦值給總結(jié)在剖析了整體的流程之后，可以看到相關(guān)的技術(shù)細(xì)節(jié)還是比較清晰的，學(xué)無止境引用混合使用詳解的語法前端模塊化規(guī)范 前言 CMDAMD簡介 Commonjs簡介 Module簡介 Common和Module的區(qū)別 Module與webpack Module與Babel 一些問題 總結(jié) 引用 前言 前端模塊化在近幾年層出不窮，有Node的CommonJs,也有屬于cl...

    GitCafe 評論0 收藏0

  • node中 模塊導(dǎo)入和導(dǎo)出的探究

    摘要：模塊的文件名，帶有絕對路徑。返回一個布爾值，表示模塊是否已經(jīng)完成加載。返回一個對象，表示調(diào)用該模塊的模塊。表示模塊對外輸出的值。 我們在編寫js過程中，經(jīng)常會碰到 requrie和import的寫法，也會看到export default，exports的寫法，他們能不能混用呢，我們來探究一下 當(dāng)前環(huán)境： node版本 v9.6.1 操作系統(tǒng) Mac module 我們打印出modul...

    Anshiii 評論0 收藏0

發(fā)表評論

0條評論

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