ES6之import * as 用法 & import { default as & export { default as用法 | 您所在的位置:网站首页 › React导入文件夹 › ES6之import * as 用法 & import { default as & export { default 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 TrackSelectToolsrc/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文件 暴露出的两个变量。 // 两种使用方法 // 方法一: 会导出这个默认的对象作为一个对象 import {name, age } from './b.js' console.log(name) // 方法二: 会将若干export导出的内容组合成一个对象返回; import * as b from './b.js' console.log(b.name) console.log(b.age)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'; |
CopyRight 2018-2019 实验室设备网 版权所有 |