ES6 | 모듈식 구현 - 가장 간편한 코드 프리젠테이션 가져오기 및 내보내기

12959 단어

모듈화 실현

  • index에서.html 코드는 반드시 가입해야 합니다
  • <script src="firstExport.js" type="module"></script>
    <script src="firstImport.js" type="module"></script>
    
  • firstExport에 있습니다.js에서 코드 내보내기 구현
  • var name = '  ';
    var age = 18;
    var flag = true;
    
    function sum(num1,num2) {
      return num1+num2;
    }
    
    if (flag = true) {
      console.log('firstExport.js---'+sum(20, 30));
    }
    
    //1.     ----       
    export {
      flag,sum
    }
    
    //2.     ----       
    export var num1 = 1000;
    export var height = 1.88;
    
    //3.    ----       
    export function mul(num1,num2) {
      return num1*num2;
    }
    //3.   ----       
    export class Person {
      run(){
        console.log('firstExport.js---'+'    ');
      }
    }
    //4.export default----       
    const address = '  ';
    export default address
    
    
    
    
  • firstImport.js에서 가져오기
  • // 1.     
    
    import {flag,sum} from "./firstExport.js";
    if (flag){
      console.log('firstImport.js---'+sum(20, 20));
    }
    
    //2.     
    import {num1,height} from "./firstExport.js";
    
    console.log('firstImport.js---'+num1,height);
    
    //3.     ---  / 
    import {mul,Person} from "./firstExport.js";
    
    console.log('firstImport.js---'+mul(20, 20));
    const a = new Person();
    a.run();
    
    //4.     
    import addr from "./firstExport.js"
    
    console.log(addr);
    
    //num:::::::     .                        
    import * as firstExport from "./firstExport.js"
    console.log(firstExport.name)
    
    
    

    export default 지식 포인트
  • 어떤 경우 한 모듈에 어떤 기능이 포함되어 있기 때문에 우리는 이 기능의 이름을 붙이고 싶지 않으며 가져오는 사람이 자신의 이름을 붙일 수 있도록 한다
  • export default는 같은 모듈에 여러 개가 동시에 존재할 수 없음
  • 사용 방법
  • import muFun from './firstExport.js'
    muFun();
    

    좋은 웹페이지 즐겨찾기