zoukankan      html  css  js  c++  java
  • JavaScript ES6 模块化

    1、ES6中模块化规范:

    每个js文件都是一个独立的文件

    导入其他模块成员使用import关键字

    向外共享模块成员使用export关键字

    2、nodejs中使用ES6模块化规范:

    nodejs默认只支持CommonJS规范,要在nodejs中使用ES6的模块化规范,需要满足两个条件:

    (1)nodejs版本大于等于 v14.15.1

    使用命令

    node --version

    (2)在package.json文件中添加[type:module]的设置

    {
      "name": "demo1",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
      },
      "author": "",
      "license": "ISC",
      "type": "module",
      "dependencies": {
        "jquery": "^3.6.0",
        "then-fs": "^2.0.0"
      }
    }

    3、ES6模块化基本语法:

    (1)默认导出与默认导入

    导出模块代码:

    let n1 = '张三'
    let n2 =  18
    
    function show(){
        console.log('hello');
    }
    
    export default 
    {
        n1,
        show
    }

    导入模块代码:

    import mod1 from './mod.js'
    
    console.log(mod1.n1)
    mod1.show()

    运行结果为:

    张三
    hello

    注意事项:

    每个模块中,只能使用唯一的一次export default

    默认导入时,接受的名称可以使用任意名称,但需要是合法的名称,例如不能以数字开头。

    (2)按需到出与按需导入

    导出模块代码:

    //按需导出
    export let s1 = 's1'
    export let s2 = 's2'
    export function say(){
        console.log('hello')
    }
    
    //默认导出
    export default {
        s3:'s3'
    }

    导入模块代码:

    import msg,{s1,s2,say} from './mod2.js'
    
    //使用按需导入
    console.log(s1)
    console.log(s2)
    say()
    
    //使用默认导入
    console.log(msg.s3)

    运行结果:

    s1
    s2
    hello
    s3

    注意事项:

    每个模块中可以使用多次按需到出

    按需导入的成员名称必须和按需导出的名称保持一致

    按需导入时,可以使用as关键字进行重命名

    按需导入可以和默认导入一起使用

    (3)直接导入并执行

    导出模块代码:

    for(let i=0;i<3;i++){
        console.log(i)
    }

    导入模块代码:

    import './mod3.js'

    运行结果

    0
    1
    2
  • 相关阅读:
    背景透明度IE兼容性代码
    酷站收藏
    洛谷P1142 轰炸 数学
    洛谷P1282 多米诺骨牌
    洛谷P1247 取火柴游戏 数学题 博弈论
    洛谷P1135 奇怪的电梯 广搜
    洛谷P1077 摆花 动态规划
    洛谷P1161 开灯 数学
    洛谷P1154 奶牛分厩 数学
    洛谷P2147 [SDOI2008]Cave 洞穴勘测 Link-Cut Tree LCT
  • 原文地址:https://www.cnblogs.com/asenyang/p/15678376.html
Copyright © 2011-2022 走看看