ES6模块化操作
在ES5中我们要进行模块化操作需要引入第三方类库,随着前后端分离,前端的业务日渐复杂,ES6为我们增加了模块化操作。模块化操作主要包括两个方面。
export :负责进行模块化,也是模块的输出。
import : 负责把模块引,也是模块的引入操作。
export的用法:
export可以让我们把变量,函数,对象进行模块化,提供外部调用接口,让外部进行引用。
先来看个最简单的例子,把一个变量模块化。我们新建一个temp.js文件,然后在文件中输出一个模块变量。
export var a = 'js';
然后可以在index.js中以import的形式引入。
import {a} from './temp.js';
console.log(a);
这就是一个最简单的模块的输出和引入。
多变量的输出
这里声明了3个变量,需要把这3个变量都进行模块化输出,这时候我们给他们包装成对象就可以了。
var a ='js'; var b ='技术'; var c = 'web'; export {a,b,c}
函数的模块化输出
as的用法
有些时候我们并不想暴露模块里边的变量名称,而给模块起一个更语义话的名称,这时候我们就可以使用as来操作。
var a ='js'; var b ='技术'; var c = 'web'; export { x as a, y as b, z as c }
import用as方式引入 (多个变量用一个空对象来代理,你所有的方法和属性都是在types命名空间)
const LOGIN = 'login'; const LOGOUT = 'logout'; const TITLE = 'title' export {LOGIN,LOGOUT,TITLE}
import * as types from './temp.js' //你所有的方法和属性都是在types命名空间 调用里面里面的值可以 这样做 types.LOGIN types.LOGOUT types.TITLE
export default的使用
加上default相当是一个默认的入口。在一个文件里export default只能有一个。我们来对比一下export和export default的区别
1.export
export var a ='js'; export function add(a,b){ return a+b; } 对应的导入方式 import {a,add} form './temp';//也可以分开写
2.export defalut
export default var a='js'; 对应的引入方式 import a from './temp';
ES6的模块化不能直接在浏览器中预览,必须要使用Babel进行编译之后正常看到结果
与es5对应的写法
var App = require('./App') 等价写法 import App from './App' module.exports={ } 等价写法 export default { }
实例
const formatStartTime = date => { 功能块代码 } module.exports = { formatStartTime: formatStartTime, }
import formatStartTime from '../../assets/js/curData' var StartTime =formatStartTime.formatStartTime;