<script>
    
    let module = (function(){
        const moduleList = {};
        function define(name,modules,action) {
            modules.map((m,i) => {
                modules[i] = moduleList[m]
            })
            moduleList[name] = action.apply(null,modules);
            console.log(moduleList);
        }
        return {define}
    }());
    /* 名字 是否依赖 动作 */
    /* 导出  通过返回出一个接口来调用*/
    module.define('tools',[],function(){
        return {
            first(arr) {
                return arr[0]
            },
            max(arr,key) {
                return arr.sort((a , b) => b[key] - a[key])[0];
            }
        }
    });
    /* 依赖 */
    module.define('lesson',['tools'],function(tools){
        let data = [{
            name:'js',
            pice: 199
        },{
            name: 'msq',
            price: 78
        }]
        console.log(tools.max(data,"price"));
    })
</script>

模块化的使用

1. 加上type = 'module'
2. 只有开放的才能被使用
3. 通过利用export，开放出口,导出
4. 利用import导入

<script type="module">
    import { title ,show} from "./tools.js";
    show();//123
</script>

/*导出*/
let title = 'houdun';
let show = function() {
    console.log(123);
}
export {title , show}

import * as api from "/tools.js";
api.show()

import { title as t} from "./tools.js";

export default class User {
    
}
/*实际原理是导出是设置别名为default*/

var btn = document.querySelector('button');
btn.addEventListener('click',() => {
import("/tools.js").then(({title,show}) => {
    show();
})
})