TypeScript徹底解讀(26課時)_14.ES6和Nodejs中的模塊

建立modules文件夾，咱們的文件都寫在這裏面

modules下面新建index.js文件，在index.ts內引入這個js文件

es6的模塊

最主要的兩個關鍵字 import和export
import能夠引入和加載一個模塊，咱們在index.ts中已經使用過了
在modules文件夾新建a.js

咱們能夠export導出模塊內容，導出模塊，通常就是一個獨立的文件，這個文件的全部變量外部是沒法獲取的,除非使用這個export導出這個變量
使用export導出name常量，他的值是Lison

分別再導出age和address

咱們能夠理解a.js它就是一個模塊，在一個js文件裏面能夠export導出多個變量，每個export導出一遍有待你繁瑣，咱們可使用解構賦值導出一個對象
上面定義三個常量，經過解構賦值倒出來，這種寫法能夠統一在底部導出須要導出的變量，導出了哪些變量一目瞭然

還能夠導出函數和類

還可使用as起別名



注意：export導出的是對外的接口，而不是具體的值
下面是直接導出一個具體的值，是錯誤的

這樣也是錯誤的

export語句導出的內容以及對應的值是動態綁定的，也就是說在一些地方引入這個模塊導出的接口以後，當這個接口在其模塊中它的值發生變化，引入的地方也會相應的變化。
新建b.js文件

導出time變量，下面設置每一秒修改time的值

在index.js引入b.js

先引入b.js而後每隔半秒打印時間的值

在修改爲一秒，時間美妙都在發生變化

10分30秒。最後一點。。。。。。
export命令能夠出如今模塊中，處於模塊中頂層的任務和位置，
頂層中不是在最頂部export導入，意思是export語句不能出如今塊級做用域裏，由於es6的模塊設計就是靜態編譯，引入的這些東西編譯代碼時候就已經引進來的，而不是代碼執行的時候去引入的
導出語句放在if裏面是會報錯的。

import引入語句

新建c.js文件

導出name和age

經過解構賦值引入並打印輸出


引入的時候使用as 當作別名，引入的參數是隻讀的不能修改值。修改就會報錯


若是引入的是一個對象的話，就能夠修改他的屬性

引入並輸出這個Info對象

修改info上的name屬性，爲了方便排查問題，不建議修改模塊引入的內容

新建d.js文件

d.js沒有導出任何的內容

能夠直接導入，導入後title就被修改了。

import有提高的效果，能夠提高到模塊的頭部
新建e.js。定義一個方法

導出一個函數，返回一個字符串

導入進來，能夠直接引用

import有提高的效果，會把js文件內 全部的import語句都提高到頂部。咱們放在import的引入以前，調用這個函數也是能夠的

動態拼接引用也是不行。會報錯，編譯的時候就要肯定你要引入的是什麼東西

重複的導入最終會合併成一個，最後只執行一次。
屢次引用，最終會合併成一個

上面兩個，最終合併成下面一個

ts不大好實現，就是用vue cli3.0搭建的一個js的環境項目。這是一個沒有ts的項目

建一個module文件夾，再建一個index.js文件

再建一個a.js文件

在main.js內引入module/index.js文件

測試下module/index.js有沒有引入成功，控制檯成功輸出，表示引用引入成功了。

22分33秒

 

在es6的模塊中咱們可使用星號來引入一個模塊中的全部內容，而且賦給一個變量
拷貝c.js裏面的東西到a.js裏面

使用星號引入a裏面的全部

能夠直接獲取裏面的一個值

也能夠獲取這個age，直接訪問就能夠了。

 新建b.js

export default

export default能夠導出一個默認的內容，一個模塊只能使用一次export default
在b.js裏面進行導出export default 導出一個func


在index.js裏面這麼引入

導入後，調用這個func

導入的名字和導出的名字不必定是必需要相同的，這裏我改爲functionName也是能夠的

能夠如今上面聲明或者初始化後，再用export default導出。其餘地方引用的時候直接用一個變量接收就能夠了。

export default就是生成一個default的變量或者方法。也能夠下面這種寫法

引入的時候也能夠用as起個別名

若是在一個js中引入一個模塊，再導出它，能夠直接將引入和導出合併
先引入再導出

這樣就能夠直接引入a裏面的 就能夠了

簡單的寫法：導入和導出用一句話

那麼在引入的地方就能夠這麼寫：
引入的時候必須使用真實的名字引入

下面這一句 至關因而把 func這個函數賦值給了default變量而且導出

因此使用export default導出能夠直接 接一個變量，直接在後面接一個字符串


默認導出的內容

若是一個模塊既有export導出也有export default導出，在引入的時候能夠一塊兒引入

注意用逗號隔開了。sex就是默認導出的內容，後面的對象使用使用多個export導出的內容

能夠打印出來看一下

export和import合併。上面那一句，至關於下面兩句的簡寫

合併寫法是將引入的內容直接導出了。不能直接飲用export和import同時引入又導出的name和age

同時還能夠更名和總體導出
這是用as換了個名字

使用星號，引入並所有導出

上面一句，至關於下面兩句，一句話導入並導出

還能夠把默認的改爲一個變量

import()方法

import是靜態編譯，不能出如今塊級做用域內使用，若是想在程序運行時候動態的引入，某個模塊，相似於按需加載，動態引入的效果
import已經被加入提案 可是尚未正式經過使用。
webpack已經把import()實現了。來實現一些異步加載
import()會返回一個promise
 
在a.js內修改頁面的title

  b.js內修改title爲haha

設置常量status等於1，
if判斷就會把status引入轉換爲true，若是爲true就引入模塊a，不然就引入模塊b



把status修改成0，那麼就會引入的是模塊b

Nodejs的模塊

分爲兩種，一種是內置的模塊，另一種是用戶自定義的模塊，也就是咱們如今要講的
這裏講兩種一種是export ，另一種是module export
還在在vue -cli3.0常見的這個模塊裏面寫

在a.node.js隨便輸出點東西，用node命令運行這個js文件進行測試

b.node.js內導出，它是會導出export這個對象

用require引入


能夠直接導出一個接口。module.exports導出一個方法