js引入commonjs,Js引入split

本文目錄一覽：

• 1、CommonJS規範
• 2、什麼是【CommonJs】
• 3、CommonJS與ES6模塊化的具體使用方式

CommonJS規範

Node應用由模塊組成，採用CommonJS規範。每一個文件就是一個模塊，有自己的作用域。在一個文件裡面定義的變數、函數、類都是私有的，對其他文件不可見。

引入模塊列印結果如下圖：

exports.xxx 是給exports對象添加屬性，可以多次添加.

引入模塊列印結果如下圖：

module.exports 是給module對象的exports屬性賦值，再次添加會將上次的值覆蓋掉，只能添加一次。

那CommonJS暴露的到底是什麼呢？

CommonJS規範規定，每個模塊內部，module變數表示當前模塊。這個變數是一個對象，它的exports屬性（module.exports）是對外的介面。暴露模塊的本質是：將exports對象暴露。載入某個模塊，其實是載入該模塊的exports屬性。

那在模塊中，我們並未看到定義module這個變數，這個變數到底是誰提供的呢？

我們通過在模塊中列印==argument.callee== 可以觀察到當前執行的函數對象

什麼是【CommonJs】

CommonJs 是一種 JavaScript 語言的模塊化規範，它通常會在服務端的 Nodejs 上使用。項目是由多個模塊組成的，模塊和模塊之間的調用，需要各個模塊有相同規範的 API，這樣一來在使用的過程中不會有那麼多的學習成本，並且對於單個模塊來說是類聚的。

在 CommonJs 的模塊化規範中，每一個文件就是一個模塊，擁有自己獨立的作用域、變數、以及方法等，對其他的模塊都不可見。CommonJS規範規定，每個模塊內部，module 變數代表當前模塊。這個變數是一個對象，它的 exports 屬性（module.exports）是對外的介面。載入某個模塊，其實是載入該模塊的 module.exports 屬性。require 方法用於載入模塊。

模塊化規範給項目帶來極大的好處，在業務複雜，模塊眾多的大型項目中，開發者都遵循相同的規則來開發各自的模塊，他們通過規範來約束模塊的定義，大家不需要太多的溝通或者大量的文檔來說明自己的模塊使用規則，成千上萬的模塊就這樣生產，並能夠容易的使用。它的意義不僅是讓模塊看起來很規範，在合作開發、社區中傳播中也起到了重大的作用。

CommonJS與ES6模塊化的具體使用方式

所以：只需要將需要暴露給外部的變數或者方法 設置為exports的屬性 就行，

可以把exports看做一個全局對象，把所有暴露出來的函數和變數都存放在裡面

1.先寫個6.js文件

CommonJS規範規定，每個模塊內部，module變數代表當前模板，這個變數是一個對象，他的 exports 屬性（相當於 module.exports ）是對外的介面。 這裡詳情請看我的另一篇文章： module、exports 和 require的關係

載入某個模塊，其實是載入該模塊的module.exports屬性。require方法用於載入模塊

ES6模塊化的使用方法：（注！因為CommonJS類庫眾多，以及 CommonJS 和 ES6 之間的差異，所以無法直接兼容es6。）

直接/按需導出：可使用多個 用變數/常量的方式

導入：需要用按需導入 {解構} 的方式獲取

默認導出：只能使用一個 （default屬性只有es6才有）可以用引入對象定義多個屬性，但這樣在引入後調用的時候，更麻煩。

導入：優點：可以直接使用文件做接收參數且不用結構。

重命名export和import

如果導入的多個文件中，變數名字相同，即會產生命名衝突的問題，為了解決該問題，ES6為提供了重命名的方法，當你在導入名稱時可以這樣做：

如果想看CommonJS與ES6模塊化的原理 可以去看我另一篇文章

[秦圓圓]大佬寫的 require和import的區別

[大孩子氣]大佬寫的 require/exports、import/export 的區別

[七分sunshine!]大佬寫的# 前端模塊化工具 requireJs的使用;