ES6 学习笔记四

MktpDJ

在创建JavaScript模块时,export 语句用于从模块中导出函数、对象或原始值,以便其他程序可以通过 import 语句使用它们

Export

1、export命令用于规定模块的对外接口,import命令用于输入其他模块提供的功能
2、无论是否声明,导出的模块都处于严格模式。 export语句不能用在嵌入式脚本中
3、export 命令可以出现在模块的任何位置

一个模块就是一个JS文件,该文件内的所有变量,外部无法直接读取。要想希望读取该模块内的某一变量的话,该怎么办?那就需要在模块内部使用export关键字,输出某些变量。
那么问题来了怎么使用呢?我们知道export可以导出函数对象或者原始值,下面就了解一下正确姿势。

导出单个特性

举例:某些情况下我们定义一些常量提供给外部使用

    //constant.js
    export const APP_SCENE = 'dev';
    export const HOST_NAME = 'http://www.dev.com';

错误的写法:接口名与模块内部变量之间,没有建立一一对应的关系

    const APP_SCENE = 'dev';
    const HOST_NAME = 'http://www.dev.com';
    export APP_SCENE;
    export HOST_NAME;

导出列表

举例:我们在做项目的时候会提供一些公共函数

    //util.js
    let array_max = arr => Math.max(...arr);
    let array_min = arr => Math.min(...arr);
    let array_chunk = (arr,size) => Array.from(
            {length:Math.ceil(arr.length/size)},
            (v,i)=>arr.slice(i * size, i * size + size)
        );
    export {array_max,array_min,array_chunk};

推荐在文件尾部使用这种方式,这样模块导出了哪些变量可以一目了然

重命名导出

举例:上列情况下,看着下划线别扭,想以驼峰式的名字

    export {array_max as arrayMax,array_min as arrayMin,array_chunk as arrayChunk};

as的实质就是将导出的接口和模块内部的变量建立一一对应关系

导出默认值

1、在一个文件或模块中,export、import 可以有多个,export default 仅有一个
2、export default 中的 default 是对应的导出接口变量
3、通过 export 方式导出,在导入时要加{ },export default 则不需要

举例: vue 的组件化

    //component.vue
    export default {
        el:'#app',
        props:{
            names:{
                type:Array,
                default(){
                  return [];  
                },
            },
        },
        data(){
          return {
              message:'super hero',
          }  
        },
        methods:{
            sayLikeYou:() => 'like you',
        },
    }
Import
  • 只读属性:不允许在加载模块的脚本里面,改写接口的引用指向,即可以改写 import 变量类型为对象的属性值,不能改写 import 变量类型为基本类型的值。
  • 单例模式:多次重复执行同一句 import 语句,那么只会执行一次,而不会执行多次。import 同一模块,声明不同接口引用,会声明对应变量,但只执行一次 import
  • import 命令会提升到整个模块的头部,首先执行

根据我们上面定义的三个文件 ,我们使用 import 功能

    import {APP_SCENE,HOST_NAME} from 'constant.js'
    import {array_chunk} from 'util.js'
    import component from 'component.vue'

    //other code
本作品采用《CC 协议》,转载必须注明作者和本文链接
今年不学习,明天惨唧唧。
zs4336
讨论数量: 0
(= ̄ω ̄=)··· 暂无内容!

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!