vue 导入、导出模块的几种方式

JavaScript08

vue 导入、导出模块的几种方式,第1张

ES6规范 模块导入方式：import

ES6规范 模块导出方式：export、export default

nodejs commonjs规范 模块导入方式：require

nodejs commonjs规范 模块导出方式：exports、module.exports

es6

import ... form...替代 require()

//不接收对象 require:require('s.css')//(es5)improt  's.css' //(es6)//接收对象var o = require('s.js')//es(5)import o form s.js    //(es6)

对象的写法

导出一个模块对象（es5）:

module.exports={

add:add,    sub:sub}

导出一个模块对象（es6）:module.exports={

add,    sub}

注意：这种写法属性名和属性值变量是同一个，否则要分开写module.exprots={

addFn:add,    sub}  

一个对象中方法的写法

//es5module.exports={

addFun:function(x,y){        return x+y

}

}//es6module.exports={

addFun(x,y){        return x+y

}

}

导出对象的写法

calc.js中有两个函数：

function add(){}

function sub(){}

//写法一

es5写法:

module.exports.add = add

module.exports.sub = sub

使用：

var calc = require('./calc.js')

es6写法:

exprot function add(){}

exprot function sub(){}

//写法二

es5:

module.exports = {add:add,sub:sub}

es6:

exprot default{

add,sub}

//表示取得calc.js中所有暴露出来的对象(es6)import calc from './calc.js'

//只获取到calc.js中的add方法(按需获取)import {add} from './calc.js'

用export 和import 的写法注意点

1、如果模块中是使用 export default {} 方式导出的对象

只能通过  import 对象名称 from '模块路径'

不能通过  import {对象名称} from '模块路径'2、如果就想要import {对象名称} from '模块路径'通过这种方式来按需导入对象中的某个属性

那么应该使用 export 跟着要导出的对象或者方法名称    export function add(){}    export function substrct(){}

那么就可以使用：    import {add,substrct} from '模块路径'

只需要直接使用 add()方法即可

注意这里不能直接使用：  import cacl from '模块路径' 这种方式导入，会报错

在JS中，模块导出是重要的部分之一，模块可以导出常量、函数、对象，对于常量与对象比较简单，例如

导出的函数如果是一个异步函数呢？例如：

可以看出，与导出同步函数无异，也可以导出异步函数。