社區模塊規范:
1.CommonJS規范
規范實現者:
NodeJS 服務端
Browserify 瀏覽器
2.AMD規范 全稱 異步模塊定義
規范實現者:
RequireJS 瀏覽器
3.CMD規范 通用模塊定義
規范實現者:
seaJS 服務端和瀏覽器通用
官方模塊規范
1.ESM規范 就是ES6 Module
各瀏覽器和服務端
目前常用的就是瀏覽器端的RequireJS、NodeJS、以及ESM
CommonJS語法分析
module.export
關鍵
1.module.exports實質上是一個對象,最后模塊導出的對象就是這個引用指向的對象
module.export.key = value // eg: module.export.a = 1; // 整體管理導出,此時exports與module.exports指向斷開,導致exports上的屬性被忽略 module.export = { a:1, b:1 }2.exports是一個module.export的助手變量,用于就地導出,兩者默認指向同一對象,即module.exports === exports true
// 像比較長的程序,寫完所有之后,再去找到需要導出的變量再移到低端的export.module上逐個添加,是相當麻煩,一般在變量下決定是否導出 //eg let fA = function () { } module.exports.fA = fA let fB = function () { } module.exports.fB = fB // exports 簡潔很多 let fA = function () { } module.fA = fA let fB = function () { } module.fB = fB3.在逐個導出時使用exports,而在導出一個對象時,使用module.exports,不建議混用,如果需要,可以作一下處理:
// 在最后導出時將exports對象和module.exports對象合并 exports.a = 1 module.exports = Object.assign({ b : 1 },exports)require
關鍵:
1.模塊區分,知道即可
let f = require('url')
// 核心模塊,第三方模塊(npm安裝),指定模塊名即可 let f = require ('modulename') // 自定義模塊,需指定相對或者絕對路徑 let f = require('absolutePATH/relativeAPTH')2.查找時,沒有后綴名的會嘗試添加.js、.json、.node,這里可以稍微偷個懶
let f = require('./circle') // 等同于 let f = require('./circle.js')ESM語法分析:
export var/function/class
關鍵:
1.導出值和內部值要有對于關系,即
// error export 1 // error let m = 1 export m // correct export let m = 1 // correct let m = 1; export {m}直接在聲明時導出或者用一個{}包裹導出
2.export default 用于導出一個默認值,使得用戶可以不需要知道內部導出變量名稱即可使用
PS: 一個模塊只能有一個默認導出
export default 等同 export {add as default} // 不能接變量聲明語句 export default let a = 1
新聞熱點
疑難解答
圖片精選