ES6入门---第二单元 模块五:模块化

js不支持模块化

注意: 需要放到服务器环境

1、如何定义模块?

export 东西

例:1.js文件中

javascript 复制代码
console.log('1模块加载了');//显示是否加载了
export const a =12;
export const b = 5;
export let c = 101;
javascript 复制代码
const a=12;
const b=5;
const c=101;

export {//可以起别名 as *** 也可以去掉
    a as aaa,
    b as banana,
    c as cup
}
javascript 复制代码
 <script type="module">
        import {a, b, c} from './modules/1.js';

        console.log(a,b,c);
    </script>

起别名版import :

javascript 复制代码
<script type="module">
        import {aaa, banana, cup} from './modules/2.js';

        console.log(aaa, banana, cup);
    </script>

补充 export default ** 作用:引用时候可以不用加{ }

2、如何使用?
在html文件里<script type="module"></script>

引入模块

import './modules/1.js';

【新增】*表示引用全部

javascript 复制代码
 <script type="module">
        import * as modTwo from './modules/2.js';
        console.log(modTwo.aaa);
    </script>
javascript 复制代码
 <script type="module">
        import mod,{show, sum, a, b} from './modules/4.js';
// show sum 是函数 
        let p1 = new mod.Person('老肖');

        console.log(p1.showName());

        show();

        sum();

        console.log(a,b);
    </script>

js文件可以引用另一个js文件里的东西 :格式同理

import: 特点

a). import 可以是相对路径,也可以是绝对路径

import 'https://code.jquery.com/jquery-3.3.1.js';

b). import模块只会导入一次,无论你引入多少次

c). import './modules/1.js'; 如果这么用,相当于引入文件

d). 有提升效果,import会自动提升到顶部,首先执行

也就是说:不管放前面放后面都最先引入

e). 导出去模块内容,如果里面有定时器更改,外面也会改动
import() 类似node里面require, 可以动态引入, 默认import语法不能写到if、for之类里面

错误例:

javascript 复制代码
 if(a==12){
            import {a} from './modules/1.js';
        }else{
            import {b} from './modules/2.js';
        }

正确例:
返回值是个promise对象

javascript 复制代码
<script type="module">
        import('./modules/1.js').then(res=>{
            console.log(res.a+res.b);
        });
    </script>

路径也可以动态

javascript 复制代码
 <script type="module">
        let sign=1;
        function config(){
            switch(sign){
                case 1:
                    return './modules/1.js';
                    break;
                case 2:
                    return './modules/2.js';
                    break;
            }
        }
        import(config(1)).then(res=>{
            $(function(){
                $('body').css({
                    background:'gray'
                })
            })
        });
    </script>

与promise结合版:

javascript 复制代码
<script type="module">
        Promise.all([
            import('./modules/1.js'),
            import('./modules/2.js')
        ]).then(([mod1,mod2])=>{
            console.log(mod1);
            console.log(mod2);
        })
    </script>

【ES2017】async await

相关推荐
kooboo china.40 分钟前
Tailwind css实战,基于Kooboo构建AI对话框页面(二)
前端·css
yuanmenglxb20044 小时前
react基础技术栈
前端·javascript·react.js
Magnum Lehar5 小时前
vulkan游戏引擎vulkan部分的fence实现
java·前端·游戏引擎
FreeBuf_5 小时前
恶意npm与VS Code包窃取数据及加密货币资产
前端·npm·node.js
agenIT6 小时前
vue3 getcurrentinstance 用法
javascript·vue.js·ecmascript
天天打码6 小时前
npm/yarn/pnpm安装时Sharp模块报错解决方法
前端·npm·node.js
码农捻旧6 小时前
JavaScript 性能优化按层次逐步分析
开发语言·前端·javascript·性能优化
小辉懂编程6 小时前
2025年最新基于Vue基础项目Todolist任务编辑器【适合新手入手】【有这一片足够了】【附源码】
前端·vue.js·编辑器
我是哈哈hh6 小时前
【Vue3】生命周期 & hook函数 & toRef
开发语言·前端·javascript·vue.js·前端框架·生命周期·proxy模式
傻虎贼头贼脑6 小时前
day28JS+Node-JS打包工具Webpack
开发语言·前端·javascript·webpack