zoukankan      html  css  js  c++  java
  • ES6模块的import和export用法总结

    ES6之前已经出现了js模块加载的方案,最主要的是CommonJS和AMD规范。commonjs主要应用于服务器,实现同步加载,如nodejs。AMD规范应用于浏览器,如requirejs,为异步加载。同时还有CMD规范,为同步加载方案如seaJS。

    ES6在语言规格的层面上,实现了模块功能,而且实现得相当简单,完全可以取代现有的CommonJS和AMD规范,成为浏览器和服务器通用的模块解决方案。

    ES6模块主要有两个功能:export和import

    export用于对外输出本模块(一个文件可以理解为一个模块)变量的接口

    import用于在一个模块中加载另一个含有export接口的模块。

    也就是说使用export命令定义了模块的对外接口以后,其他JS文件就可以通过import命令加载这个模块(文件)。如下图(假设a和b文件在同一目录下)

    // a.js
    
    var sex="boy";
    var echo=function(value){
      console.log(value)
    }
    export {sex,echo}  
    //通过向大括号中添加sex,echo变量并且export输出,就可以将对应变量值以sex、echo变量标识符形式暴露给其他文件而被读取到
    //不能写成export sex这样的方式,如果这样就相当于export "boy",外部文件就获取不到该文件的内部变量sex的值,因为没有对外输出变量接口,只是输出的字符串。
    // b.js
    通过import获取a.js文件的内部变量,{}括号内的变量来自于a.js文件export出的变量标识符。
    import {sex,echo} from "./a.js" 
    console.log(sex)   // boy
    echo(sex) // boy

    a.js文件也可以按如下export语法写,但不如上边直观,不太推荐。

    // a.js
    export var sex="boy";
    export var echo=function(value){
      console.log(value)
    }
    
    //因为function echo(){}等价于 var echo=function(){}所以也可以写成
    export function echo(value){
       console.log(value)
    }

    以上是export与module的基本用法,再进行拓展学习

    前面的例子可以看出,b.js使用import命令的时候,用户需要知道a.js所暴露出的变量标识符,否则无法加载。可以使用export default命令,为模块指定默认输出,这样就不需要知道所要加载模块的变量名。

    //a.js
    var sex="boy";
    export default sex(sex不能加大括号)
    //原本直接export sex外部是无法识别的,加上default就可以了.但是一个文件内最多只能有一个export default。
    其实此处相当于为sex变量值"boy"起了一个系统默认的变量名default,自然default只能有一个值,所以一个文件内不能有多个export default
    // b.js
    本质上,a.js文件的export default输出一个叫做default的变量,然后系统允许你为它取任意名字。所以可以为import的模块起任何变量名,且不需要用大括号包含
    import any from "./a.js"
    import any12 from "./a.js" 
    console.log(any,any12)   // boy,boy
  • 相关阅读:
    DEDECMS里面DEDE函数解析
    dede数据库类使用方法 $dsql
    DEDE数据库语句 DEDESQL命令批量替换 SQL执行语句
    织梦DedeCms网站更换域名后文章图片路径批量修改
    DSP using MATLAB 示例 Example3.12
    DSP using MATLAB 示例 Example3.11
    DSP using MATLAB 示例 Example3.10
    DSP using MATLAB 示例Example3.9
    DSP using MATLAB 示例Example3.8
    DSP using MATLAB 示例Example3.7
  • 原文地址:https://www.cnblogs.com/jj-notes/p/6710121.html
Copyright © 2011-2022 走看看