JS模組如何暴露與匯入
阿新 • • 發佈:2018-11-09
當專案功能越來越多,程式碼量便也會越來越多,後期的維護難度會增大,此時在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 更好哦