3/29

test.js => export

1. export 방식

2. export default 방식

 

export class

export function

export var 변수

 

class Person

 

export default Person; // export default는 한개만 사용가능

 

a.html에서 import해서 사용

 

module/a.js

//여러 변수, 함수, 클래스 export로 다른 파일에서 사용가능하도록 함
export let n = 100;

export function fun(){
    console.log("./module/fun()");
}
export function fun2(){
    console.log("./module/fun()2");
}
export class Person{
    info(){
        console.log("info()");
    }
}
export class Person2{
    info2(){
        console.log("info()2");
    }
}
export const xxx = ()=> 100;

 

sample06_클래스8_모듈1.html

<script type="module">
        //라이브 서버에서 실행
        import{n, fun, fun2, Person, Person2, xxx}
        from './module/a.js';
        console.log(n);

    </script>

 

여러개 import 할때는 배열처럼 적으면 됨

이름이 동일 해야함

 

fun();
        fun2();

 

var p = new Person();
        p.info();
        var p2 = new Person2();
        p2.info2();

 

 import{n, fun, fun2, Perssson, Person2, xxx}

Uncaught SyntaxError: The requested module './module/a.js' does not provide an export named 'Perssson' 

 

 

이름이 다르면 생기는 에러

 

module/b.js

const kkk = ()=> 300;
export default kkk;// 한가지 항목을 export 할 때는 defualt 사용 1개만 가능

 

sample06_클래스8_모듈1.html

import kkk from './module/b.js';

        console.log(kkk());

 

export default는 하나만 쓰는 것 이므로 {kkk} 이렇게 쓰면 에러남

 

b2.js

//export default {key:value}
const kkk = {name: "홍길동", age:20};
export default kkk;

 

sample06_클래스8_모듈1.html

import kkk from './module/b2.js';
        console.log(kkk.name);
        console.log(kkk.age);

 

import 할때 이름이 같은게 있으면 에러남

Uncaught SyntaxError: Identifier 'kkk' has already been declared

 

import kkk2 from './module/b2.js';
        console.log(kkk2.name);
        console.log(kkk2.age);

이렇게 이름 변경해서 받을 수 있음

 

c.js

export class Person{
    constructor(n){
        this.name = n;
    }
}

export function aaa(){
    console.log("hello");
}

 

sample06_클래스8_모듈2.html

<script type="module">
        import {Person, aaa} from './module/c.js';
        var p = new Person("홍길동");
        console.log(p.name);
        aaa();
    </script>

 

import {Person} from './module/c.js';
        import {aaa} from './module/c.js';

이렇게 해도 문제 없지만

 

import Person from './module/c.js';
        import aaa from './module/c.js';

 

이렇게 하면 에러남

Uncaught SyntaxError: The requested module './module/c.js' does not provide an export named 'default'

 

d.js

export default function bbb() {
    console.log("bbb()aa");
}

export var n=1;

 

export default var n=1; 하면 안됨 default는 하나만 해야함

 

sample06_클래스8_모듈2.html

import bbb from './module/d.js';
        bbb();