Table of Content

8.1 什么是模块?

模块(modules)就是使用不同的方式加载的js文件.模块代码和脚本(script)有不同的语义.

  1. 模块代码自动运行在严格模式下,并且没有任何办法跳出严格模式
  2. 在模块代码的顶级作用域创建的变量,不会被自动添加到共享的全局作用域,只会在模块顶级作用域的内部存在
  3. 模块的顶级作用域的this值为undefined,
  4. 模块不允许在代码中使用HTML风格注释
  5. 对于需要让模块外部代码访问的内容,必须导出它们
  6. 允许模块从其它模块导入绑定._

模块的主要能力是按需导出和导入代码的能力.,不用把所有的内容放在同一个文件内

基本的导出

可以使用export 关键字把已经写好的功能代码,拆分之后给其它的模块.最直接的方法就是export放置在任意的变量,函数或类声明之前.

export var user = "ggb";
export let age =  11;
export const a = 1;

export function num(){
    return 1;
}

export class users {
    constructor(){
        this.len = 1;
        this.str = '2'
    }
}

function sub(){
    return 2;
}

export default sub
export {
   //按需导出
}

基本的导入

导入的前提是有导出的模块.可以在其它的模块代码中,使用 import 关键字来访问已经被导出的功能.

import有两个部分.一个是需要导入的标识符,一个是来源模块

基本语法

import {sub,a} from 'app.js'

单个的绑定

<script type="module">
    import {sub} from './app.js'
    console.log(sub())
    sub = 1;  //报错
</script>

我们app.js,导出了两个.但是在上面这个案例中.仅仅只导出了一个函数,如果说要给这个sub赋值,是不允许,不能导入的绑定重新赋值.

在导入的文件名前要使"/","../","./"

如果想入多个

import {sub,a,user} from './app.js'
console.log(sub(1,4))
// sub = 1;
console.log(user)

想要所有的导入

import * as obj from './app.js'
console.log(obj.sub(1,4))
// sub = 1;
console.log(obj.user)

无论对同一个模块使用了多少次的导入import 但是这个模块都会被执行一次

import {sub} from './app.js'
import {a} from './app.js'
import {user} from './app.js'

这里导出三次....但是app.js都只会被执行一次.

2 Responses

Leave a Reply

Your email address will not be published.