美文网首页
JavaScript es6 模块语法

JavaScript es6 模块语法

作者: gis杭州 | 来源:发表于2019-02-26 15:17 被阅读0次

    导出的变量、函数可以被外界访问到,没有导出的变量或函数不能被外界访问,只能在模块内使用。从而保证了模块内的变量不会污染全局变量。

    导出方式:

    export const aa = 123;//导出变量
    export function ff(){ console.log("hehe")}//导出函数
    export class TestClass{ }// 导出类
    
    //注意,一个模块的默认输出只能有一个
    export default class Test{}//导出默认类
    export default function Test(){}//导出默认函数
    
    const str = "abcdefg";
    function func(){console.log("this is the func function")}
    export {str,func}//导出存在的变量,在模块的最后一行列出所有需要导出的内容
    export {str as strtest,func}//使用别名导出变量
    
    

    导入方式:

    //导入默认导出(带default的导出,通常用于一个类导出),这里Test123可以随意命名,指默认导出的Test类
    import Test123 from "test.js"
    
    //导入命名导出(声明的变量、函数、类)
    import {aa,ff,TestClass} from test.js
    
    //导入默认导出与导入命名导出混合互相不影响
    import Test123 ,{aa,ff,TestClass} from "test.js"
    
    //导入模块中声明的全部导出内容(包括加了default的导出),而不必在大括号中一一列出  {aa,ff,TestClass},
    //可通过testMoudle.aa\testMoudle.Test方式访问到需要的内容
    //注意可能出现错误写法是import  *  from "test.js"
    import  * as testMoudle from "test.js"
    
    import {aa as testaa} from test.js//通过别名导入模块中声明的全部导出内容
    

    本质上,export default就是输出一个叫做default的变量或方法,然后系统允许你为它取任意名字。所以,下面的写法是有效的。

    // modules.js
    function add(x, y) {
      return x * y;
    }
    export {add as default};
    // 等同于
    // export default add;
    
    // app.js
    import { default as foo } from 'modules';
    // 等同于
    // import foo from 'modules';
    

    http://es6.ruanyifeng.com/#docs/module

    相关文章

      网友评论

          本文标题:JavaScript es6 模块语法

          本文链接:https://www.haomeiwen.com/subject/ymuayqtx.html