JS模塊如何暴露與導(dǎo)入

當(dāng)項(xiàng)目功能越來越多，代碼量便也會越來越多，后期的維護(hù)難度會增大，此時(shí)在JS方面就會考慮使用模塊化規(guī)范去管理維護(hù)。

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

隨著ES6的普及以及babel的廣泛應(yīng)用，越來越多的喜歡使用ES6模塊導(dǎo)入，在ES6之前，也有遵循COMMON.JS 使用require進(jìn)行模塊導(dǎo)入

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

有時(shí)候記太多概念并沒什么效果 用就完事了

我們只需記住
export  ||  export default => import
ES6通過export 以及export default 暴露模塊 通過import 導(dǎo)入
 exports || module.exports =>require
遵循COMMON.JS的規(guī)范 進(jìn)行模塊化開發(fā)

ES6模塊導(dǎo)入

導(dǎo)出: export，export default
可以導(dǎo)出變量，函數(shù)，對象，文件，模塊

在測試的時(shí)候最好是在有babel的環(huán)境下，不然有可能報(bào)錯(cuò)，建議在vue-cli中的APP.VUE中測試

首先先新建一個(gè)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(){}

錯(cuò)誤寫法

// 報(bào)錯(cuò) 
export 1; 
// 報(bào)錯(cuò)  
 var m = 1; 
 export m;

模塊導(dǎo)入 import * from ' '

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

也可以將所有內(nèi)容導(dǎo)入對象中，通過對象來調(diào)用

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

還是使用{}improt 導(dǎo)入

<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并沒有加{}

導(dǎo)入default

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

}
</script>

區(qū)別：export default 只能存在一個(gè) 導(dǎo)入不需要加{ }
export可以存在多個(gè) 導(dǎo)入一定要加{ }

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

export default a
export {b,c}

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

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

}
</script>

as關(guān)鍵字 這種用法比較少 了解一下

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

export {a,b,c}

在導(dǎo)入的時(shí)候 將數(shù)據(jù)存儲到新的對象名中使用

<script>
import * as obj from './es6.js'  =>注意此處沒有{}  在全部數(shù)據(jù)都導(dǎo)入obj的時(shí)候 也就是使用通配符（*）的時(shí)候
export default {
  name: 'App',
  created(){
     console.log(obj.a)   =>相當(dāng)于把所有的數(shù)據(jù)存到了obj中
  }

}
</script>

引入局部的時(shí)候

<script>
import {a as obj}  from './es6.js'
export default {
  name: 'App',
  created(){
     console.log(obj)  =>注意此時(shí) 使用obj調(diào)用  用a 反而報(bào)錯(cuò)
  }

}
</script>

在暴露的時(shí)候同樣可以使用as

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

export {a as default} =>很容易看懂 就是將a變成了默認(rèn)暴露

既然變成了默認(rèn)就可以隨意引入了

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

}
</script>

全部暴露

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

export {a as default,b,c}

引入又變成跟以前一樣了 其實(shí)個(gè)人感覺沒什么用 了解一下

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

}
</script>

require 導(dǎo)入

require 導(dǎo)入是比較霸道的，直接require（‘path’）
一點(diǎn)不跟你含糊 全部導(dǎo)入 類似import * as from ‘ ’

exports --- moudel.exports

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

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

module.exports=a      根據(jù)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>

剛才例子比較好理解，來一套多個(gè)數(shù)據(jù)的

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

導(dǎo)入的方式依舊粗暴

    <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
 /*{     這種寫法雖然不報(bào)錯(cuò) 但是是無效滴
  exports = {
   fn1,
   fn2
  };  
 }*/

導(dǎo)入方法還是不變 暴力導(dǎo)入

    <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小結(jié)

其實(shí)exports只是輔助器，到最后還是會轉(zhuǎn)換成module.exports
真正暴露的是module.exports 所以還是直接使用module.exports 更好哦

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容