快捷導(dǎo)航

NodeJS模塊與ES6模塊系統(tǒng)語(yǔ)法及注意點(diǎn)詳解

更新時(shí)間：2019年01月04日 10:27:40 作者：傻傻噠的卷卷

這篇文章主要給大家介紹了關(guān)于NodeJS模塊與ES6模塊系統(tǒng)語(yǔ)法及注意點(diǎn)的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

社區(qū)模塊規(guī)范:

1.CommonJS規(guī)范

規(guī)范實(shí)現(xiàn)者：

NodeJS 服務(wù)端

Browserify 瀏覽器

2.AMD規(guī)范全稱異步模塊定義

規(guī)范實(shí)現(xiàn)者：

RequireJS 瀏覽器

3.CMD規(guī)范通用模塊定義

規(guī)范實(shí)現(xiàn)者：

seaJS 服務(wù)端和瀏覽器通用

官方模塊規(guī)范

1.ESM規(guī)范就是ES6 Module

各瀏覽器和服務(wù)端

目前常用的就是瀏覽器端的RequireJS、NodeJS、以及ESM

CommonJS語(yǔ)法分析

module.export

關(guān)鍵

1.module.exports實(shí)質(zhì)上是一個(gè)對(duì)象,最后模塊導(dǎo)出的對(duì)象就是這個(gè)引用指向的對(duì)象

 module.export.key = value
 // eg: 
 module.export.a = 1; 
 // 整體管理導(dǎo)出，此時(shí)exports與module.exports指向斷開(kāi)，導(dǎo)致exports上的屬性被忽略
 module.export = {
 a:1,
 b:1
 }

2.exports是一個(gè)module.export的助手變量，用于就地導(dǎo)出,兩者默認(rèn)指向同一對(duì)象，即module.exports === exports true

 // 像比較長(zhǎng)的程序,寫完所有之后，再去找到需要導(dǎo)出的變量再移到低端的export.module上逐個(gè)添加，是相當(dāng)麻煩，一般在變量下決定是否導(dǎo)出
 //eg 
 let fA = function () {

 }
 module.exports.fA = fA
 let fB = function () {

 }
 module.exports.fB = fB

 // exports 簡(jiǎn)潔很多
 let fA = function () {

 }
 module.fA = fA
 let fB = function () {

 }
 module.fB = fB

3.在逐個(gè)導(dǎo)出時(shí)使用exports,而在導(dǎo)出一個(gè)對(duì)象時(shí)，使用module.exports，不建議混用，如果需要，可以作一下處理:

 // 在最后導(dǎo)出時(shí)將exports對(duì)象和module.exports對(duì)象合并
 exports.a = 1
 module.exports = Object.assign({
 b : 1
 },exports)

require

關(guān)鍵:

1.模塊區(qū)分，知道即可

let f = require('url')

 // 核心模塊,第三方模塊(npm安裝),指定模塊名即可
 let f = require ('modulename')
 // 自定義模塊，需指定相對(duì)或者絕對(duì)路徑
 let f = require('absolutePATH/relativeAPTH')

2.查找時(shí),沒(méi)有后綴名的會(huì)嘗試添加.js、.json、.node,這里可以稍微偷個(gè)懶

 let f = require('./circle')
 // 等同于
 let f = require('./circle.js')

ESM語(yǔ)法分析：

export var/function/class

關(guān)鍵:

1.導(dǎo)出值和內(nèi)部值要有對(duì)于關(guān)系,即

 // error
 export 1

 // error
 let m = 1
 export m

 // correct
 export let m = 1

 // correct
 let m = 1;
 export {m}

直接在聲明時(shí)導(dǎo)出或者用一個(gè){}包裹導(dǎo)出

2.export default 用于導(dǎo)出一個(gè)默認(rèn)值，使得用戶可以不需要知道內(nèi)部導(dǎo)出變量名稱即可使用

PS: 一個(gè)模塊只能有一個(gè)默認(rèn)導(dǎo)出

 export default 等同 export {add as default}
 // 不能接變量聲明語(yǔ)句
 export default let a = 1

普通導(dǎo)出與默認(rèn)導(dǎo)出使用的區(qū)別

 // 普通導(dǎo)出的導(dǎo)入使用
 export {f}
 import {f} from 'fmod'

 // 默認(rèn)導(dǎo)出的導(dǎo)入使用,可以無(wú)需知道導(dǎo)出模塊的內(nèi)部變量名,任意重命名
 export default f
 import c from 'fmod'

3.導(dǎo)出值與模塊值是動(dòng)態(tài)綁定的

export let foo = 'bar';
// 500毫秒后,其他模塊拿到的foo值會(huì)變成bar
setTimeout(() => foo = 'baz', 500);

import用法

關(guān)鍵:

1.導(dǎo)入非默認(rèn)變量時(shí)需要使用{}語(yǔ)法，并且變量要與導(dǎo)出時(shí)變量一致

 // 普通導(dǎo)出的導(dǎo)入使用
 export {f}
 import {f} from 'fmod'

2.導(dǎo)入默認(rèn)變量時(shí)，省略{},并且可以重命名導(dǎo)出變量

 // 默認(rèn)導(dǎo)出的導(dǎo)入使用,可以無(wú)需知道導(dǎo)出模塊的內(nèi)部變量名,任意重命名
 export default f
 import c from 'fmod'

3.可以使用*導(dǎo)出整體模塊

 // circle.js
 export let radius = 1
 export let area = 2*PI*radius
 // main.js
 import * as circle from './circle.js'
 circle.radius
 circle.area

4.可以使用,同時(shí)導(dǎo)出默認(rèn)導(dǎo)出和常規(guī)導(dǎo)出

import _,{each, forEach} from 'lodash'

5.多次import同一模塊，只會(huì)執(zhí)行一次

6.import可以與require混用，但是其在靜態(tài)分析階段執(zhí)行，也就是會(huì)先于require加載,這在要求一定的導(dǎo)入順序時(shí)要注意

export { foo, bar } from 'my_module';

// 可以簡(jiǎn)單理解為,但是合并寫法等同于沒(méi)有在當(dāng)前模塊中導(dǎo)入my_module，即無(wú)法使用
import { foo, bar } from 'my_module';
export { foo, bar };

ESM加載CommmonJS

關(guān)鍵：

1.CommonJS模塊輸出對(duì)象module.exports將會(huì)被Node轉(zhuǎn)換成默認(rèn)導(dǎo)出

 // 導(dǎo)出
 export default module.exports
 // 導(dǎo)入,類似導(dǎo)入默認(rèn)
 import m from './m'

2.此時(shí)CommonJS模塊變量遵循其規(guī)則，不會(huì)動(dòng)態(tài)綁定

 module.exports = 123;
 setTimeout(() => module.exports = null,500)
 //500毫秒后，module.exports仍然是123

3.由于CommonJS模塊運(yùn)行時(shí)，才會(huì)確定輸出的module.exports對(duì)象，而ESM在編譯時(shí)就要確定接口，導(dǎo)入時(shí)，不允許解構(gòu)語(yǔ)法

 import {readFile} from 'fs'

解決方案：

 //整體導(dǎo)入 
 import * as express from 'express'
 const app = express.default()
 
 //默認(rèn)導(dǎo)入,更優(yōu)
 import express from 'express'
 const app = express()

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)腳本之家的支持。

您可能感興趣的文章: