js 简易模块加载器 示例分析

前端模块化

关注前端技术发展的各位亲们，确定对模块化开发这个名词不陌生。随着前端工程愈来愈复杂，代码愈来愈多，模块化成了必不可免的趋势。

各类标准

因为javascript自己并无制定相关标准（固然es6已经有了import和export），因此在模块化方面诞生了各类不一样的规范。主要有AMD规范（随requirejs诞生而普及），CMD规范（随seajs的出现而普及），commonjs（主要用于node，并不适合前端）。至于以上几种规范的异同，无耻的我在这里就很少费口水了，请还不了解的亲们自行去找google爸爸。

简易模块加载器示例

G点来了！
接下来咱们先来看一段建议模块加载器的示例代码：

let Module = (() => {
    let module_list = {};
    function define(name,rely,callback){
        if (module_list[name]){
            console.log("The module have already existed!")
        }else{
            for(let i = 0;i < rely.length;i++){
                rely[i] = module_list[rely[i]];
            }
            module_list[name] = callback.apply(callback,rely);
        }
    }

    function require(name){
        if (module_list[name]){
            return module_list[name]
        }else{
            console.log("There is no such module!")
        }
    }

    let api = {
        "define":define,
        "require":require
    };
    return api;
})();

以上是加载器的实现，再来看看如何使用吧：

Module.define("test",[],()=>{
    function sayHello(name){
        return name+",你好啊";
    }
    return {
        "sayHello":sayHello
    }
})

Module.define("haha",[],()=>{
    function gotoHZ(name){
        return name+"要去杭州玩了";
    }
    return {
        "gotoHZ":gotoHZ
    }
})
Module.define("my_module",["test","haha"],(test,haha)=>{
    let name = "andrew";
    function sayHello2() {
        let str = test.sayHello(name);
        console.log(haha.gotoHZ("章炜"))
        str = str + ",今每天气不错噢";
        return str;
    }

    return {
        "sayHello2":sayHello2
    }
})

console.log(Module.require('my_module').sayHello2())
console.log(Module.require('test').sayHello("steve"))

在以上代码中，咱们定义了三个模块，分别名为test,haha,my_module。看到这里的你，若是js基础很差，多是一脸懵逼，脑子绕晕...先不急，让咱们来看看运行的结果：

结果很简单，打印了一些咱们想要的信息。

代码分析

接下来咱们详细来解析一下代码原理。
加载器中的几个重点，

1. module_list

   module_list是一个对象，用于存储定义的模块，以模块名：callback这样
   的键值对的形式存储；

2. define函数

   而后咱们定义了一个define函数，其三个参数分别为模块名、此模块依赖列表、此模块回调函数，当咱们调用define函数时，首先先去检查module_list对
   象中是否已经有同名模块，若是有，直接告诉用户该模块名字已被使用，若是没有，咱们循环依赖列表rely，循环中的操做用于将依赖列表从名称列表转换为真正的模块列表，而后利用apply函数，将其逐个传入到定义好的callback函数中。

3. require函数
   因为咱们的module_list存在于内部做用域，保证了模块的私密性，外部并不能
   直接操做模块列表去读取模块，所以咱们定义了一个require函数，利用闭包来读取操做相应模块

4. 实例解析

   Module.define("my_module",["test","haha"],(test,haha)=>{
   let name = "andrew";
   function sayHello2() {
       let str = test.sayHello(name);
       console.log(haha.gotoHZ("章炜"))
       str = str + ",今每天气不错噢";
       return str;
   }
   
   return {
       "sayHello2":sayHello2
   }
   })

这里咱们定义了my_module模块，它依赖的模块有test、haha两个模块，而在回调函数中，咱们将这两个模块传入，能够看到咱们能调用test模块的sayHello方法，能够调用haha模块的gotoHZ方法，至此，一个简单的模块加载器就实现了。

结语

这个简单的模块加载器只是很简化的介绍了模块加载器实现的基本原理，成熟的模块加载器固然是要复杂得多，可是原理了解了，才是最重要，不是嘛～