关于动态加载功能模块的问题?

目前在公司做的是教学方面的开发,平台上课程用到的功能会根据上到的第几课来决定.
比如,上到了第3课,会给用户在界面上显示一个背包,里面放的是用户的收藏,但是别的课程不会出现这个背包.这就需要在合适的时候对这个模块进行加载.
我现在的做法如下所示:

if (lesson ==3) {
    // 加载背包模块
    var s = document.createElement('script');
    s.src = "xxx";
    document.body.appendChild(s);
} else {
    // 不加载背包模块
}

实际上,我是通过加载一个js文件来导入需要的js和html和css,给一个js文件示例:

// 加载用到的css文件
var link = document.createElement('link');
link.src = 'xxxx';
document.head.appendChild(link);
// 生成对应的html结构
var div = document.createElement('div');
div.innerHTML = 'xxxx';
document.body.appendChild(div);
// 下面是相应的js逻辑
div.addEventListener('click',click);

虽然现在没有遇到什么问题,但是我始终感觉这不是一种好的方法,因为他会让js的逻辑变得有点复杂(至少我是这么认为的).

以我这种情况的话,应该用什么方法来处理呢?