es5一个js文件导出多个模块怎么写

JavaScript012

es5一个js文件导出多个模块怎么写,第1张

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 '模块路径' 这种方式导入，会报错

一.commonjs 是什么 

是作用于服务端应用程序,让js程序具有模块化功能的一种语法规范,执行方式是同步且运行时加载,

如何使用:

1.module.exports 导出

定义一个匿名对象,将需要导出的成员 赋值到这个匿名对象上,然后再赋值到module.exports 导出

2.exports 导出

exports在每个模块中扮演着一个对象,如同每次在模块中默认执行了let exports = module.exports,那么exports如何使用导出功能呢,只要在exports对象上声明一个要导出去的属性名,将要导出的值赋值进去,

但不能直接赋值给exports对象,否则就和module.exports没有关系,例如:exports=function fn() {},

导入时拿到的是一个undefind

3.require 导入

导入得到是一个对象,对象里面是导出模块所导出的成员,也可以同结构的方式按需导入

二.ES6模块化

es6模块化也是和commonjs一样是具有将js模块化功能的语法规范,不过只能用于在能识别es6语法浏览器环境,es6模块由两个命令构成:export, importexport 是向外提供输出对外接口,import是使用其他模块向内提供输入接口

1.export

使用export 导出想要导出的值,可以是对象,变量,函数

声明 的同时 且导出

将要导出的值赋值给对象的方式导出

那么以exports导出的模块该如何 导入到其他js文件呢?

1.2 导入模块 语法 import

import 是提供接收对外导入的接口

格式: import 以结构的额方式使用大括号包起来,里面填写按需导入的成员,必须和必须和对应模块导出的成员名一致,如果需要更改成员名,需要使用as关键词, from 对接的模块路径

如果需要把一整个模块的所有对象都导入成一个对象 使用 as 关键词,自定义一个对象名

2.0 export default

同样是和export一样暴露指定的变量或者对象函数

但是导入到 其他模块会稍微方便一些,可以不用像export 需要使用{}接收,直接使用一个自定义的对象名接收即可

commonjs与es6模块化直接的差别

commonjs导出是值的拷贝,es6模块化是导出的值的引用

commonjs加载是运行时加载,而es6模块化是编译时加载会比commonjs更加高效