当项目功能越来越多，代码量便也会越来越多，后期的维护难度会增大，此时在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 更好哦
网友评论