ES6之import * as 用法 & import { default as & export { default as用法——as-重命名

ES6之import * as 用法 & import { default as & export { default as用法——as-重命名

模块化操作主要包括两个方面。

export :负责进行模块化，也是模块的输出。
import : 负责把模块引，也是模块的引入操作。

import * as用法

1、import 导入模块变量-----这里在导入的时候变量需要重命名，import的时候必须使用大括号！

//按需引入math模块各个变量
import{del，add，sub as subList}from"@/api/math.js"
console.log(de1)
console.log(add(2，4))
console.log(subList（20，3))

2、一次性全部导入模块变量！用*

//全部引入math.js模块变量
import*as math from"@/api/math.js"  // *——代表所有  math——自定义的重命名
console.1og(math.de1)
console.1og(math.add(2，4))
console.Log(math.subList(20，3)

export {default as用法

src/tools/otherMapTool/TrackSelectTool.js

class TrackSelectTool extends NMap.tool.PointSelectTool {
    // 内容区
}
export default TrackSelectTool

src/tools/index.js

export {default as TrackSelectTool} from './otherMapTool/TrackSelectTool';

使用

src/components/common/trackMark.vue

import * as tools from '@/tools/index.js';

methods:{
    getData(){
        this.selectTool = new tools.TrackSelectTool({
          filter(feature) {
            return 'trackMark' === feature.properties.geoLiveType;
          }
        });
    }
}

小例子

1、创建一个 b.js文件, 导出两个模块变量

export const name='名字'; 
export const age=21;

2、创建一个 a.js文件,引入b.js文件 暴露出的两个变量。

// 两种使用方法

<script type="module"> 
    // 方法一: 会导出这个默认的对象作为一个对象
    import {name, age } from './b.js'
    console.log(name) 

    // 方法二: 会将若干export导出的内容组合成一个对象返回；
    import * as b from './b.js'

    console.log(b.name)
    console.log(b.age)
 </script>

import * as xxx from 'xxx’: 会将若干export导出的内容组合成一个对象返回；

而import xxx from 'xxx'：（export default Din）只会导出这个默认的对象作为一个对象

1、export的用法：

export可以让我们把变量，函数，对象进行模块话，提供外部调用接口，让外部进行引用。先来看个最简单的例子，把一个变量模块化。我们新建一个temp.js文件，然后在文件中输出一个模块变量。

// temp.js文件

export var a = 'jspang';

然后可以在index.js中以import的形式引入。

import {a} from './temp.js';
console.log(a);

cmd命令模块输入
babel-node index.js 要注意目录

1.1、多变量的输出（temp.js）

// temp.js文件

var a ='js';
var b ='技术应用';
var c = 'web';

export {a,b,c} //包装成对象{}

1.2、函数的模块化输出（temp.js）

export function add(a,b){
    return a+b;
}

2、as的用法

有些时候我们并不想暴露模块里边的变量名称，而给模块起一个更语义话的名称，这时候我们就可以使用as来操作。

// temp.js文件

var a ='js';
var b ='技术应用';
var c = 'web';

export {
    x as a,
    y as b,
    z as c
}

index.js

import {x,y,z} from './temp.js';

3、export default的使用

加上default相当是一个默认的入口。在一个文件里export default只能有一个。
我们来对比一下export和export default的区别

1.export

export var a ='js';

export function add(a,b){
    return a + b;
}
//index.js引入
import {a,add} form './temp';//也可以分开写

2.export defalut

export default var a='jspang';
//index.js引入
import str from './temp';