1010Code

[Node.js打造API] JavaScript基礎篇(4)

2017/12/21 2018iT邦鐵人賽

Exports & Imports (Modules)

在撰寫 API 過程中你會將很多分支檔案拆開寫，一方面是減少過長的程式碼另一方面是日後好管理。你必須要先匯出分支檔(export)再經由主檔案中被引入(import)，以下有個簡單例子，第一個分支檔 person.js 將函式 person 匯出，第二支分支檔將函式 clean 和變數 bastData 匯出 (另一種匯出寫法) ，最後再主檔案 index.js 引入被呼叫使用。

  • 分支檔 person.js、utility.js
// person.js 分支檔1
const person ={
  name:'Andy'
} 

export default person;

// utility.js 分支檔2
export const clean = () => {}
export const bastData = 10;
  • 主檔 index.js
// index.js
//default export
import person from './person.js';
//named export
import {baseData} from './utility.js';
import {clean} from './utility.js';

//named export (rename)
import {clean as c} from './utility.js';
import * as c from './utility.js';

四種不同寫法

  1. export default{ } 集中匯出
  • 分支檔 utility.js
//utility.js

const app1 = () => {
  console.log('app1');
};

const app2 = () => {
  console.log('app2');
};

export default { app1, app2 };
  • 主檔 index.js
//index.js
import app from './utility';

app.app1();
app.app2();
  1. 單個變數匯出，並ㄧ次引入所有

此寫法可以注意觀察主檔 index.js，使利用萬用字元 * 表示該檔內所有變數引入。

  • 分支檔 utility.js
//utility.js
export const app1 = () => {
  console.log('app1');
};

export const app2 = () => {
  console.log('app2');
};
  • 主檔 index.js
//index.js
import * as app from './utility';


app.app1();
app.app2();
  1. 單個變數匯出，並分別引入

此寫法在主檔 index.js 引入時在大括號內著名是要引入哪個變數。

  • 分支檔 utility.js
//utility.js
export const app1 = () => {
  console.log('app1');
};

export const app2 = () => {
  console.log('app2');
};
  • 主檔 index.js
//index.js
import { app1 } from './utility';
import { app2 } from './utility';

app1();
app2();
  1. 單個變數匯出，並分別引入與重新命名

此寫法與第三種相類似差別在於引入進來的變數給予重新命名。

  • 分支檔 utility.js
//utility.js
export const app1 = () => {
  console.log('app1');
};

export const app2 = () => {
  console.log('app2');
};
  • 主檔 index.js
//index.js
import { app1 as App1 } from './utility';
import { app2 as App2 } from './utility';

App1();
App2();

Classes

在物件導向程式設計，類別是一種物件導向電腦程式語言的構造，是建立物件的藍圖，描述了所建立的物件共同的屬性和方法。

  • ㄧ個 class 是由屬性 (Property) 和方法 (Method) 所組成
class Person {
  constructor() {
    this.name = 'Andy';
  }
  call=() => {
    console.log(this.name);
  }
}

const myPerson = new Person();

myPerson.call();
  • 繼承寫法
class Human {
  constructor() {
    this.gender = 'male';
  }
}

class Person extends Human {
  constructor() {
    super();
    this.name = 'Andy';
  }
  call=() => {
    console.log(this.name);
    console.log(this.gender);
  }
}

const myPerson = new Person();

myPerson.call();

由於上述都是 ES6 寫法，可以利用線上編譯器來編譯程式碼。

https://jsbin.com/sobapehifu/edit?html,js,console,output

鼓勵持續創作，支持化讚為賞！透過下方的 Like 拍手👏，讓創作者獲得額外收入~
版主10在2020年首次開設YouTube頻道，嘗試拍攝程式教學。想要了解更多的朋友歡迎關注我的頻道，您的訂閱就是最大的支持～如果想學其他什麼內容也歡迎許願XD
https://www.youtube.com/channel/UCSNPCGvMYEV-yIXAVt3FA5A

Search

    Table of Contents