ES6模块化

模块化

ES6模块化原理

使用闭包封装了私有变量和方法，暴露一个接口供其他部分调用

<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}

模块会延迟解析，只解析一次

每个模块都有自己的独立作用域，只通过export来暴露端口

批量打包

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

返回的api是对象，通过api.show来访问

别名使用

只能有一个名字！

导入

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

用as操作符来设置别名

导入

也是通过as来设置

默认导出

只能有一个，可以用任何的别名来接收

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

混合导入导出

带花括号是具名导出，不带花括号是默认导出

模块的合并导出

通过将所有的模块引入到一个index模块中，最后再一次导出index模块

为了避免导出现多个模块中有重复命名的问题，将每个模块通过批量导出的方法，引入到index中，原理就是批量导出返回的是对象，每个对象有不同的名字实现了差异化

按需动态加载

利用import只能放在顶层，不能放在花括号当中，所以无法实现按需加载的功能

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

利用import函数返回一个promise对象，通过对象下的then方法来实现

最近在写css的过程中，发现代码越来越多，了解了一下模块化的概念，记了一些比较基础的东西，但是还是有很多地方需要及时补充的，比如对于css文件的打包问题等，继续学习吧