有趣的代码——import动态引用系列（一）：初介绍

一，项目模块化

现在我们在进行项目开发的时候无法绕开的就是模块化概念，在项目模块化中，我们可能会有这样的构思，如果我有一个入口文件，然后通过入口文件引用不同的模块进行模块派发，如果可以这样实现，那么对于多类的管理是非常美好的。
所以基于这样的想法，我们发现了import动态引用

二，如何用import实现动态引用

动态引用方法：

let set = (res)=>{
    import(`./${res}`).then(item=>{
        console.log(item)
    }).catch(err=>{
        throw new Error(err)
    })
}

我们通过import()方法进行模块的局部引用，而import()将返回一个Promise，我们使用then,catch方法对Promise的返回值进行操作，而Promise成功状态返回值是一个Module实例，在其中有一个default是我们实质抛出的类，获取到我们所需的类后，我们可以在then下进行操作：

let set = (res)=>{
    import(`./${res}`).then(item=>{
        let Instance = new item.default()
    }).catch(err=>{
        throw new Error(err)
    })
}

我们在then方法中将获取到的类进行实例化，当然有的朋友不希望在Promise中对参数进行操作，他们更希望获取到Promise中的返回值，那么我们可以使用async-await。

let set = async (res)=>{
    let data = await import(`./${res}`).then(item=>{
        let Instance = new item.default()
    }).catch(err=>{
        throw new Error(err)
    })
    console.log(data)
    return data
}

当我们使用async-await的时候我们可以获取到Promise中的返回值，一切看起来如此美好，然而隐患却随之而来，如果我们在使用async-await的时候无法建立有效的洋葱模型，那么我们外层对async函数调头的时候将会获得一个Promise，这是同步与异步处理机制结合的一点问题，却恰恰是这一点问题使得我们在实际使用中会受到各种掣肘，如果我们并不是决定建立有效的洋葱模型进行动态引用，那么我非常不推荐使用async-await解决Promise返回值的问题，当然，如果我们建立了行之有效的洋葱模型，那么我们就可以进行async-await的链式引用。