新技术分享：在浏览器中使用ES6的import和export

最新推荐文章于 2023-11-06 11:10:44 发布

学者(cloudea)

最新推荐文章于 2023-11-06 11:10:44 发布

阅读量627

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/u013749051/article/details/111147299

版权

javascript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

前言

之前一直通过node使用ES6的import和export，但是没想到现在浏览器也支持了。迫不及特地写了一个小示例体验了一把，觉得还可以。详细可以见这篇博文： https://segmentfault.com/a/1190000014342718 。’

像传统js的加载方式一样，模块化的js也可以有2种使用方式，如下所示。但注意这里的 type=“module”，这是传统加载方式和按模块方式加载的区别。
（1）第一种：引入外部js

        <script src="xxx.js" type="module"></script>

（2）第二种：在html中直接书写

<script type="module">
    import xxx from "xxx.js";
    // your code ...
</script>

注意事项

使用此方式引用的js会有跨域的问题

示例

math.js

export function add(a, b){
    return a + b;
}

export function sub(a, b){
    return a - b;
}

export function mul(a, b){
    return a * b;
}

export function div(a, b){
    return a / b;
}

export function mod(a, b){
    return a % b;
}

export default {
    add,
    sub,
    mul,
    div,
    mod
}

index.js

import math, {add, div} from './math.js';


export function sum(nums){
    let s = 0;
    for(let num of nums){
        s = add(s, num);
    }
    return s;
}

export function avg(nums){
    const s = sum(nums);
    return  div(s, nums.length > 0 ? nums.length : 1);
}

export default {
    sum,
    avg
}

index.html

<!DOCTYPE html>
<html>
    <head>

    </head>
    <body>
        <!--script src="./index.js" type="module"></script-->
        <script type="module" async>
            import R from "./index.js";
            import math, {sub, mul, mod} from "./math.js";
            console.log(R.sum([1, 2, 3, 4, 5, 6, 7, 8, 9 ,10]))
            console.log(R.avg([1, 2, 3, 4, 5, 6, 7, 8, 9 ,10]))
            console.log(R.avg([]))
            console.log(sub(100, 33));
            console.log(mul(100, 33));
            console.log(mod(100, 33));
        </script>
    </body>
</html>