web前端—前端三剑客之JS-ES6(12)：Module模块

菜鸟教程：www.runoob.com/w3cnote/es6…\

导出文件需要使用export或者export default命令

let add= function (str) {
    let strarr = str.split(',');
    let changenum = strarr.reduce((pre,next)=>{
        let num1 = Number(pre);
        let num2 = Number(next);     
        return Number(num1)+Number(num2);
    });
    return changenum;
};
let jiannum= function (str) {
    let strarr = str.split(',');
    let changenum = strarr.reduce((pre,next)=>{
        let num1 = Number(pre);
        let num2 = Number(next);   
        return Number(num1)-Number(num2);
    });
    return changenum;
};

export {add,jiannum as jian};

导入文件需要使用import命令

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <label for="nm">输入要计算的数字并用逗号隔开：</label>
    <input type="text" name="num" id="nm">
    <button id="add">加法</button>
    <button id="jian">减法</button>
    <p></p>

    <script type="module">
        import * as js2 from './js2.js';  // 写法1：导入模块中所有对象的时候可以使用
        import { add, jian } from './js2.js';   // 写法2：导入模块中部分对象时可以使用

        let jiafa = document.querySelector('#add');
        let jianfa = document.querySelector('#jian');
        let numinp = document.querySelector('#nm');
        let tag_p = document.querySelector('p');

        jiafa.onclick = function () {
            let strnum = numinp.value;
            let arrnum = js2.add(strnum);
            if (typeof (arrnum) != 'number' || Object.is(arrnum, NaN)) {
                tag_p.innerHTML = `<span style="color: red;">检查输入内容，只能输入数字，并以英文逗号隔开<span>`;
            } else {
                tag_p.innerHTML = `<strong style="color: red;">计算结果是：${arrnum}</strong>`;
                numinp.value = '';
            };
        }

        jianfa.onclick = function () {
            let strnum = numinp.value;
            let arrnum = jian(strnum);
            if (typeof (arrnum) != 'number' || Object.is(arrnum, NaN)) {
                tag_p.innerHTML = `<span style="color: red;">检查输入内容，只能输入数字，并以英文逗号隔开<span>`;
            } else {
                tag_p.innerHTML = `<strong style="color: red;">计算结果是：${arrnum}</strong>`;
                numinp.value = '';
            };
        }
    </script>
</body>

</html>

说明：

导出和导入的方法名可以使用as重命名

导入一个文件的所有方法的时候可以使用*，但是必须用as重命名后进行调用

导入文件的script标签中必须指明type="module" ，否则会报错。