Es6模块语法

Posted 2020-09-11 韭菜茄子

/**
 * Created by Administrator on 2017/4/15.
 */
/*---------------------export命令---------------------*/
//Es6 的模块加载
//defer是“渲染完再执行”，async是“下载完就执行”。
//浏览器对于带有type="module"的<script>，是异步加载,等同于打开了<script>标签的defer属性。
/*
<script type="module">
//xxx
</script>*/
console.info(this===undefined); //没有this了

/*---------------------export命令---------------------*/
export const a=11111;
export const b=2;
//可以写成export={a,b};

//输出函数
export function c(...ag){
    let [x,y,z]=ag;
    return {x,y,z}
}
//as关键字重命名
function dd(){
    return 123;
}
export{dd as d};

const e=7;
export {e};

//CommonJS模块和Es6模块的区别
//CommonJS模块输出的是值的拷贝，也就是说，一旦输出一个值，模块内部的变化就影响不到这个值
//ES6 模块是动态引用，并且不会缓存值，值会动态更新
export const f={‘name‘:‘leyi‘};
setTimeout(()=> f.name=‘jiucaiqiezi‘,700);

//export default命令，为模块指定默认输出,这样在import的时候就可以为该匿名函数指定任意名字
//使用export default时，对应的import语句不需要使用大括号；不使用export default时，对应的import语句需要使用大括号
//一个文件或模块中，export、import可以有多个，export default仅有一个
export default{
        hello(){console.info(‘leyi!‘)} //简写
        //等同于  hello:()=>console.info(‘leyi!‘)
        //等同于  hello:function(){ return console.info(‘leyi!)}
}
//export default命令只是输出一个叫做default的变量，它后面不能跟变量声明语句。

/**
 * Created by Administrator on 2017/4/15.
 */
/*---------------------import命令---------------------*/
//import命令接受一对大括号，里面指定要从其他模块导入的变量名。大括号里面的变量名，必须与被导入模块对外接口的名称相同。
//import是静态执行，不能使用表达式和变量
import {a,b,c,d,e,f} from ‘./test‘;
console.info(a,b);
const {x,y,z}=c(1,2,3,4,5,6,7);
console.info(x,y,z); //1 2 3
console.info(d()); //123
console.info(e); //7
document.write(f.name);
setTimeout(()=>document.write(f.name),701); //leyi->jiucaiqiezi

//模块的整体加载,用星号（*）指定一个对象，所有输出值都加载在这个对象上面
import * as all from ‘./test‘;
console.info(all.a,all.b);//11111 2

import anyway from ‘./test‘; //这里引入模块时不加大括号,名字可以随便起,因为export是导出的default模块
anyway.hello(); //hello!