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='jspang';
对应的引入方式
import str from './temp';

ES6的模块化不能直接在浏览器中预览，必须要使用Babel进行编译之后正常看到结果。这节课讲完我们ES6的课程就算结束了，你可能觉的没有书上的内容多，那是因为很多东西都归到了ES7中。甚至连Babel都不能很好的转换，这些知识我就不给大家讲解了。另外如果你想继续深入学习，可以搜索阮一峰大神的ES6在线图书。

 与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;

 

转载于:https://www.cnblogs.com/Model-Zachary/p/7230669.html