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[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基本不好，多是一脸懵逼，头脑绕晕&＃8230;先不急，让我们来看看运转的效果：

效果很简朴，打印了一些我们想要的信息。

代码剖析

接下来我们细致来剖析一下代码道理。
加载器中的几个重点，

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要领，至此，一个简朴的模块加载器就完成了。

结语

这个简朴的模块加载器只是很简化的引见了模块加载器完成的基本道理，成熟的模块加载器固然是要庞杂很多，然则道理相识了，才是最主要，不是嘛～