1. export하기
일단 먼저 제일 쉬운거 부터 하는게 맞다. 탄력이 붙기 때문이다. 그래서 sound관련해서 모두 모아준다음에 export를 해서 불러오면 자유자재로 원할때마다 사용가능하다. 그럼 일단 export부터 알아보자.
예시로, 캐나다 달러를 미국달러로 환산하는 프로그램을 만들고 export하려고 한다. 그래서 currency-functions.js파일에 함수를 만들었다.
currency-functions.js
1
2
3
4
5
6
7
8
9
const exchangeRate = 0.91;
function roundTwoDecimals(amount) {
return Math.round(amount * 100) / 100;
}
export function canadianToUs(canadian) {
return roundTwoDecimals(canadian * exchangeRate);
}
그리고 main.js에서 불러온다음 출력했다. 이때 main.js에 import하려면 html에서 script.type=’module’ 이라고 명시해줘야한다. 그래야 export한것을 import로 불러 올 수 있다.
1
<script type="module" src="main.js" defer></script>
main.js
1
2
3
4
5
6
7
8
"use strict";
// 내보내기 1
import { canadianToUs } from "./currency-functions.js";
console.log("50 Canadian dollars equal this amount of US dollars:");
console.log(canadianToUs(50));
// 50 Canadian dollars equal this amount of US dollars:
// 45.5
이번엔 여러개를 보내보도록 하겠다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
const UsToCanadian = function (us) {
return roundTwoDecimals(us / exchangeRate);
};
const cal = {
plus: (a, b) => {
return a + b;
},
minus: (a, b) => {
return a - b;
},
multiple: (a, b) => {
return a * b;
},
divide: (a, b) => {
return a / b;
},
};
export { UsToCanadian, cal };
요런식으로 마지막에 export할것을 객체에 담아서 보내는 방법이 있다.
1
2
3
4
5
6
7
8
9
10
11
12
import * as skills from "./currency-functions.js";
console.log("30 US dollars eqauls to this amount of Canadian dollars: ");
console.log(skills.UsToCanadian(30));
console.log("-----lets add nums using add func from calculation const-----");
console.log(skills.cal.plus(2, 3));
// 30 US dollars eqauls to this amount of Canadian dollars:
// 32.97
// -----lets add nums using add func from calculation const-----
// 5
불러올때는 모든것을 선택하는 선택자 *를 명시하고 as 뒤에 별명(skills)를 붙인다음 객체처럼 쓰면 됨.
2. export2
요번에는 export default와 class를 보내는 방법에 대해서 살펴보자. 먼저 export default는 한번만 명시할 수 있다. 따라서 import 할때도 전송되는 변수나 객체의 이름을 그대로 쓸필요없이 아무 이름이나 적어도 된다.
default_self_intro.js
1
2
3
4
5
6
7
8
9
10
11
12
export default {
selfIntroduction(name, job) {
console.log(`Hi my name is ${name}, and i am ${job}`);
},
askBack: function (question) {
console.log(`what is your ${question}?`);
},
};
export const randomNumBetween = (max, min) => {
return Math.random() * (max - min) + min;
};
main.js
1
2
3
4
5
6
7
8
9
10
import selfIntro from "./default_self_intro.js";
selfIntro.selfIntroduction("yeong", "programmer");
selfIntro.askBack("first language");
import { randomNumBetween } from "./default_self_intro.js";
console.log(randomNumBetween(10, 100));
// Hi my name is yeong, and i am programmer
// what is your first language?
// 83.38011060756901
이때 selfIntro라고 아무렇게나 이름붙이고 가져오면 default가 전송된다. 만약 그냥 export한 변수, randomNumBetween을 가져오고 싶으면 default가 아니기 때문에 이름을 정확히 명시해야한다.
이번엔 default로 클래스를 가져와보자
default_family_class_intro.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
export default class familyIntro {
constructor(yourName, parentsName) {
this.myName = yourName;
this.parents = parentsName;
this.familyDiv = document.querySelector(".family_new_func");
this.familyFuncDiv = document.querySelector(".family_fun_express");
this.familyDiv.addEventListener("click", () => {
this.expressFamilyFunc();
});
}
houseIntro(address) {
this.houseAdress = address;
return `${this.parents} bought my house in ${this.houseAdress} `;
}
}
1
2
3
4
5
import familyIntro from "./default_family_class_intro.js";
const family = new familyIntro("yeong", "jongman");
const houseA = family.houseIntro("ulsan");
console.log(houseA);
// jongman bought my house in ulsan
이런식으로 클래스를 불러와서 사용가능하다. 그럼 sound.js를 정리하고 export해보자
3. sound 리팩토링
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
'use strict';
const audioBackground = new Audio('./sound/curious_kiddo.mp3');
const swooshSound = new Audio('./sound/swoosh.mp3');
const blobSound = new Audio('./sound/blop.mp3');
export function playSwooshSound() {
playSound(swooshSound);
}
export function playBlobSound() {
playSound(blobSound);
}
export function playBgFromTheStart() {
audioBackground.currentTime = 0;
playSound(audioBackground);
}
.
.
.
function playSound(sound) {
sound.play();
}
function stopSound(sound) {
sound.pause();
}
export하려는 function이 너무많아서 생략했다. 요런식으로 한곳에 다 모은다음 import해서 사용가능하다
1
2
import * as sound from "./sound.js";
sound.playBgFromTheStart();
export한 모든것을 *선택자로 묶은다음 sound라는 이름을 부여하여 객체처럼 사용가능. 따라서, 예를들어, 배경음악이 재생되야할곳에 위와 같이 사용하면된다.
그럼 다음에 리팩토링할것은 popup부분이다. 리팩토링 module을 나누는 기준은 html에서 설정하면 된다. html을 보면 구분되어지는 덩어리들이 보일것이다. 그 덩어리를 기준으로 삼아서 js파일을 만들고 그 안에 정리하면 된다. 보니깐
- top_ui
- play_field
- popup
- toggle
이렇게 구분지어서 리팩토링하면 될듯하다.