你可以說出export export default || model.exports exports 的區別嗎(一)

Pengxw發表於2019-02-16
Export

一.前言：

用模組寫程式碼，為什麼要用模組來寫程式碼：ES6之前，在js中定義的一切，都是共享一個全域性作用域的，隨著web應用變得複雜，這樣做會引起如：命名衝突和安全問題、於是引入了模組。

二.清楚一個概念：

  • export 和 export default 是ES6 裡面的API（本文只介紹ES6的）
  • exports 和 model..exports 是node.js裡面的API,更切確的說是Common.js裡的（就和require 和 import 相似）

三.export

// a.js
export let a = 1          //輸出變數
export fn(){...}          //輸出函式
export class Class{
  constructor(a,b){
    this.a = a;
    this.b = b;
  }
}                         //輸出類

fn2(){...}                //定義一個函式
export fn2;               //建議以這種在末尾統一輸出的方式export
export {fn2 ,fn};         //匯出多個變數，要有{}
export {fn2 as asFn2};    //匯出時重新命名，要有{}


// b.js
import {fn2} from `a.js`;  //export 的引入要加{},單個也要加；
import {fn2 , a , Class as Class1}  from `a.js`   //引入多個要用 ‘,’隔開；
import * as example from `a.js`;                  //引入整個模組
example.a = 1;                                    //使用模組，在有很多需要引入時，建議這種方法；

四.export defalut（模組的預設值）

  // a.js
  export default function(num1,num2){...}   //匯出預設值，只能匯出一個
  export let a = 1;                         //匯出變數a
  
  // b.js
  
  import any from `a.js`;                   //引入預設值,any 可以是任意的名字，不用{}
  import {a} from `a.js`;                   //引入a ;
  import any,{a} from `a.js`                //預設值必須放在非預設值前面
  import {default as any , a} from `a.js`   //有重新命名就要大括號包起來

總結：

  • export ：

    • 單個不用括號，多個要用{}，as也要用{}； (因為export default 只能export 一個)；

  • import

    • 除了* as ,別的重新命名都要用{}
    • export 要用{}
    • 既有export 和 export default時：import any,{a} from `a.js’ 預設寫前面

by:Beast 原創：轉載請宣告

覺得對你有用，請點贊！歡迎探討指點！

相關文章