Es6-Es6中import as xxx from几种基本用法

以为ES6,javascript第一次支持了module。ES6的模块化分为导出(export)与导入(import)两个模块,其中在项目中,我们会经常看到一种用法import * as obj from,这种写法是把所有的输出包裹到obj对象里。

示例一

// index.js



export function fn1(data){



  console.log(1)



}



export function fn2(data){



  console.log(2)



}
import * as Fn from './index.js'



Fn.fn1()  // 1



Fn.fn2()  // 2

示例二

let myName = "Jon";



let myAge = 18;



let myfn = function(){



    return "我是"+myName+"!今年"+myAge+"岁了"



}



export {



    myName as name,



    myAge as age,



    myfn as fn



}

接收的代码

import {fn,age,name} from "./test.js";



console.log(fn()); //我是Jon!今年19岁了



console.log(age); //19



console.log(name); //Jon

或者写成

import * as info from "./test.js"; //通过*来批量接收,as 来指定接收的名字



console.log(info.fn()); //我是Jon!今年18岁了



console.log(info.age); //18



console.log(info.name); //Jon

示例三

重命名export和import,如果导入的多个文件中,变量名字相同,即会产生命名冲突的问题,为了解决该问题,ES6为提供了重命名的方法,当你在导入名称时可以这样做。

/*************test1.js*****************/



export let myName = "我来自test1.js";



/*************test2.js*****************/



export let myName = "我来自test2.js";



 



/*************index.js****************/



import {myName as name1} from "./test1.js";



import {myName as name2} from "./test2.js";



console.log(name1); //我来自test1.js



console.log(name2); //我来自test2.js