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

一.前言：

用模塊寫代碼，爲何要用模塊來寫代碼：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 原創：轉載請聲明

以爲對你有用，請點贊！歡迎探討指點！