Skip to content
Inspire - Capo Productions

ES6 模块

一个模块就是一个独立的文件。该文件内部的所有变量,外部无法获取。如果你希望外部能够读取模块内部的某个变量,就必须输出该变量(作为一个接口暴露出去)

1 输出

通过在模块中使用exportexport default来暴露接口

1.1 export、export default用法

js
// 模块中可以有多个export, 但最多只能有一个export default
export const name = 'Jack' // export用法1,直接输出接口,export后直接跟变量声明语句
export function run() {
  console.log('I can run')
}

// export { name, run } // export用法2,使用大括号指定所要输出的一组变量
const info = {
  age: 20,
  hobby: ['book', 'music'],
  read() {
    console.log('I can read')
  }
}
export default info
js
// vue单文件组件中的export default
export default {
  data() {
    return {

    }
  },
  methods: {

  }
}

export default用于指定模块默认输出,因此一个模块中可以有多个export,但最多只能有一个export default

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

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

1.2 注意

  • export default后面不能跟变量声明语句

  • export default既可用于匿名函数,也可用于非匿名函数,如

    js
    export default function printMe() {
      console.log('I get called from print.js!')
    }
    js
    export defualt function () {
       console.log('Jack')
    }
    js
    function foo () {
       console.log('Jack')
    }
    export defualt foo
  • export命令可以出现在模块的任何位置,只要处于模块顶层就可以。如果处于块级作用域内,就会报错,import命令也是如此

2 输入

通过import输入其他模块对外的接口

2.1 用法

  • 输入通过export输出的接口,如下,其中export1export2export3必须与模块module.js中对应的变量名(别名)一样,即需要知道所要加载的变量名或函数名,否则无法加载import { export1, export2, export3 } from './module.js'或者整体加载import * as util from './module.js'

  • 输入通过export default输出的接口,如下,其中randomName可以随意取名 import randomName from './module.js'

  • 同时输入通过exportexport default输出的接口(即一条import语句中,同时输入默认方法和其他接口), 如下 import randomName, { export1, export2, export3 } from './module.js'

import 后面的 from 指定模块文件的位置,可以是相对路径,也可以是绝对路径,.js后缀可以省略。如果只是模块名,不带有路径,那么必须有配置文件,告诉 JavaScript 引擎该模块的位置。 import { myMethod } from 'util' 上面代码中,util是模块文件名,由于不带有路径,必须通过配置,告诉引擎怎么取到这个模块(如果使用webpack,其会帮我们做这个工作

参考:

布局切换

调整 VitePress 的布局样式,以适配不同的阅读习惯和屏幕环境。

全部展开
使侧边栏和内容区域占据整个屏幕的全部宽度。
全部展开,但侧边栏宽度可调
侧边栏宽度可调,但内容区域宽度不变,调整后的侧边栏将可以占据整个屏幕的最大宽度。
全部展开,且侧边栏和内容区域宽度均可调
侧边栏宽度可调,但内容区域宽度不变,调整后的侧边栏将可以占据整个屏幕的最大宽度。
原始宽度
原始的 VitePress 默认布局宽度

页面最大宽度

调整 VitePress 布局中页面的宽度,以适配不同的阅读习惯和屏幕环境。

调整页面最大宽度
一个可调整的滑块,用于选择和自定义页面最大宽度。

内容最大宽度

调整 VitePress 布局中内容区域的宽度,以适配不同的阅读习惯和屏幕环境。

调整内容最大宽度
一个可调整的滑块,用于选择和自定义内容最大宽度。

聚光灯

支持在正文中高亮当前鼠标悬停的行和元素,以优化阅读和专注困难的用户的阅读体验。

ON开启
开启聚光灯。
OFF关闭
关闭聚光灯。