蜜桃精品成人影片,99国产精品偷窥熟女精品视频,啊灬啊灬啊灬快灬A片免费,b站大全永不收费免费下载软件吗,重囗味sM在线观看无码

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

時間:2018-11-14 14:48:24 類型:JS/JQUERY
字號:    

一、首先搞清楚一個基本問題

    module.exportsexports是屬于CommonJS模塊規(guī)范!

    exportexport default是屬于ES6語法!

    同樣importrequire分別屬于ES6CommonJS!

二、知道屬于哪一塊的語法了還有一個明確點:

module.exportsexports、exportexport default都是導出模塊;

importrequire則是導入模塊。

所以現(xiàn)在就不要弄混了,module.exports導出對應require導入,export導出對應import導入。

喂!等等,怎么才說到module.exports導出對應require導入,export導出對應import導入,那還有exports和export default呢???那我們繼續(xù)。

三、module.exportsexports的區(qū)別與聯(lián)系

講到這里就不得不稍微提一下模塊化:

Node應用由模塊組成,采用CommonJS模塊規(guī)范。

 

根據(jù)這個規(guī)范,每個文件就是一個模塊,有自己的作用域。在一個文件里面定義的變量、函數(shù)、類,都是私有的,對其他文件不可見。

CommonJS規(guī)范規(guī)定,每個模塊內部,module變量代表當前模塊。這個變量是一個對象,它的exports屬性(即module.exports)是對外的接口。加載某個模塊,其實是加載該模塊的module.exports屬性。

var x = 5; var addX = function (value) { return value + x; }; module.exports.x = x; module.exports.addX = addX; 

上面代碼通過module.exports輸出變量x和函數(shù)addX。

require方法用于加載模塊。

var example = require('./example.js'); console.log(example.x); // 5 console.log(example.addX(1)); // 6

 

看了剛剛這段commonjs規(guī)范上面的介紹可以知道以下區(qū)別與聯(lián)系:

 

其實exports變量是指向module.exports,加載模塊實際是加載該模塊的module.exports。這等同在每個模塊頭部,有一行這樣的命令。

 

var exports = module.exports; 

 

于是我們可以直接在 exports 對象上添加方法,表示對外輸出的接口,如同在module.exports上添加一樣。注意,不能直接將exports變量指向一個值,因為這樣等于切斷了exports與module.exports的聯(lián)系。

三、exportexport default的區(qū)別與聯(lián)系

模塊功能主要由:export和import構成。export導出模塊的對外接口,import命令導入其他模塊暴露的接口。

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

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 defaultimport語句不需要使用大括號;第二組使用export,對應的import語句需要使用大括號,一個模塊只能有一個默認輸出,所以export default只能使用一次。

四、import和require的區(qū)別與聯(lián)系

看了上面其實已經(jīng)清楚了,import和require是分別屬于ES6和CommonJS的兩種導入模塊的語法而已