當專案功能越來越多，程式碼量便也會越來越多，後期的維護難度會增大，此時在JS方面就會考慮使用模組化規範去管理維護。

稍微介紹一下常用的模組暴露方法

隨著ES6的普及以及babel的廣泛應用，越來越多的喜歡使用ES6模組匯入，在ES6之前，也有遵循COMMON.JS 使用require進行模組匯入

我們通常使用的暴露有三種方式：exports module.exports export default export
經常使用的引入方式有兩種：import from 和 require

有時候記太多概念並沒什麼效果 用就完事了

我們只需記住

export  ||  export default => import

ES6通過export 以及export default 暴露模組 通過import 匯入

 exports || module.exports =>require

遵循COMMON.JS的規範 進行模組化開發

ES6模組匯入

匯出: export，export default
可以匯出變數，函式，物件，檔案，模組
###在測試的時候最好是在有babel的環境下，不然有可能報錯，建議在vue-cli中的APP.VUE中測試
首先先新建一個js檔案

    function add() {
        console.log("hello");
    }
    var a=9
    var obj={
    a:3,
    b:4,
    c:5
    }
    export {add,a,obj}

也有這種寫法

export  var a = 9
export function fn(){}

錯誤寫法

// 報錯 
export 1; 
// 報錯  
 var m = 1; 
 export m; 

模組匯入 import * from ' '

<script>
import {add,a,obj} from './es6.js'  =>export 暴露 匯出一定要加大括號 按需匯入 需要什麼導什麼
export default {
  name: 'App',
  created(){
    add()    =>匯入之後可直接使用  
    console.log(a)
    console.log(obj,obj.a)
  }
}
</script>

也可以將所有內容匯入物件中，通過物件來呼叫

    var a={
            fn:function(){
                console.log(9)
            },
            a:9,
            obj:{                    
                a:1,
                b:2,
                c:3
            }
        }
        export {a}    

還是使用{}improt 匯入

<script>
import {a} from './es6.js'
export default {
  name: 'App',
  created(){
     a.fn()
  }
}
</script>

export default

   var a={
            fn:function(){
                console.log(9)
            },

            a:9,
            obj:{
                
                a:1,
                b:2,
                c:3
            }
        }

export default a     =>注意 這裡使用了export default  a並沒有加{}

匯入default

<script>
import a from './es6.js'  =>其餘不變  取消括號
export default {
  name: 'App',
  created(){
     a.fn()
  }

}
</script>

區別：export default 只能存在一個 匯入不需要加{ }
export可以存在多個 匯入一定要加{ }

var a=1;
var b=2;
var c=3

export default a
export {b,c}  

兩者同時存在的引入方法還是那樣 default 不加{ } export 加{ }

import  a ,{b,c} from './es6.js'
export default {
  name: 'App',
  created(){
     console.log(a,b,c)
  }

}
</script>

as關鍵字 這種用法比較少 瞭解一下

var a=1;
var b=2;
var c=3

export {a,b,c}

在匯入的時候 將資料儲存到新的物件名中使用

<script>
import * as obj from './es6.js'  =>注意此處沒有{}  在全部資料都匯入obj的時候 也就是使用萬用字元（*）的時候
export default {
  name: 'App',
  created(){
     console.log(obj.a)   =>相當於把所有的資料存到了obj中
  }

}
</script>

引入區域性的時候

<script>
import {a as obj}  from './es6.js'
export default {
  name: 'App',
  created(){
     console.log(obj)  =>注意此時 使用obj呼叫  用a 反而報錯
  }

}
</script>

在暴露的時候同樣可以使用as

var a=1;
var b=2;
var c=3

export {a as default} =>很容易看懂 就是將a變成了預設暴露

既然變成了預設就可以隨意引入了

<script>
import  aaaaa from './es6.js'  =>一旦是預設暴露就可以自由命名
export default {
  name: 'App',
  created(){
     console.log(aaaaa)
  }

}
</script>

全部暴露

var a=1;
var b=2;
var c=3

export {a as default,b,c}

引入又變成跟以前一樣了 其實個人感覺沒什麼用 瞭解一下

<script>
import  aaaaa,{b,c} from './es6.js'
export default {
  name: 'App',
  created(){
     console.log(aaaaa,b,c)
  }

}
</script>

require 匯入

require 匯入是比較霸道的，直接require（‘path’）
一點不跟你含糊 全部匯入 類似import * as from ‘ ’

exports — moudel.exports

moudel.exports的簡單用法 在新建js中

var a={
    name:'node',
    length:4
}

module.exports=a      根據export的例子很容易就能看懂了

使用require 引入

    <template>
      <div id="app">
        {{value}}     
      </div>
    </template>

<script>
var a=require('./exports.js')     
var that=this;   
export default {
  name: 'App',
  data(){
      return{
        value:a.name
      }
  }

}
</script>

剛才例子比較好理解，來一套多個數據的

function fn1(){
    return '666'
}
function fn2(){
    return '888'
}
c=9
module.exports={
    fn1:fn1,     =>前面的fn1 類似於 export中的 as 別名  引入 通過fn1 呼叫 fn1 方法  哎呀是不是很拗口
    fn2,          =>鍵值相同可以簡寫的 相信小夥伴都知道
    c:c
}

匯入的方式依舊粗暴

    <template>
      <div id="app">

        {{value}}
        <hr>
        {{value1}}
        <hr>
        {{value2}}
      
      </div>
    </template>

<script>
var a=require('./exports.js') 
var that=this;   
export default {
  name: 'App',
  data(){
      return{
        value:a.c,
        value1:a.fn1(),
        value2:a.fn2()
      }
  }

}
</script>

exports用法

function fn1(){
    return '666'
}
function fn2(){
    return '888'
}
c=9

exports.fn1=fn1
exports.fn2=fn2
 /*{     這種寫法雖然不報錯 但是是無效滴
  exports = {
   fn1,
   fn2
  };  
 }*/

匯入方法還是不變 暴力匯入

    <template>
      <div id="app">
        <hr>
        {{value1}}
        <hr>
        {{value2}}
      
      </div>
    </template>

<script>
var a=require('./exports.js') 
var that=this;   
export default {
  name: 'App',
  data(){
      return{
        value1:a.fn1(),
        value2:a.fn2()
      }
  }

}
</script>

exports module.exports小結

其實exports只是輔助器，到最後還是會轉換成module.exports
真正暴露的是module.exports 所以還是直接使用module.exports 更好哦