JS模块如何暴露与导入-CSDN博客

当项目功能越来越多，代码量便也会越来越多，后期的维护难度会增大，此时在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>
复制代码