通过实例分析js简单模块加载器

前端模块化

关注前端技术发展的各位朋友，对模块化开发这个名词肯定很熟悉。随着前端工程的日益复杂，代码越来越多，模块化成为必然趋势。

各种标准

由于javascript本身没有建立相关的标准(当然es6已经有了导入和导出)，在模块化方面诞生了各种各样的规范。主要有AMD规范(随着requirejs的诞生而普及)、CMD规范(随着seajs的出现而普及)、commonjs(主要用于节点，不适合前端)。至于以上规格的异同，不要脸的我就不在这里多浪费水了。不知道的请自己去谷歌爸爸。

简单模块加载器示例

g点来了！

接下来，让我们看一个建议模块加载器的示例代码：

let Module=(()={ let Module _ list={ }；函数定义(名称、依赖、回调){ if(module _ list[name]){ console . log('该模块已经存在！')}else{for(让I=0；我依靠长度；I){ relay[I]=module _ list[relay[I]]；} module _ list[name]=callback . apply(回调，依赖)；} }函数需要(名称){ if(module _ list[name]){ return module _ list[name]} else { console . log('没有这样的模块！')} }让api={'define':define，' require ' : require }；返回api})();以上是加载器的实现，让我们来看看如何使用它：

module.define ('test '，[]，()={ function say hello(name){ return name '，hello '；}返回{'sayhello' : sayhello}})模块。define('哈哈'，[]，()={ function goto Hz(name){ return name '去杭州玩'；}返回{ ' GoToHz ' : GoToHz } })module . define(' my _ module '，['test '，' haha']，(test，haha)={ let name=' Andrew '；函数SayHellO 2(){ let str=test . SayHellO(name)；今天天气真好。返回字符串；}返回{ ' say hello 2 ' : say hello 2 } })console . log(模块。需要(' my _ module ')。sayhello 2 ()) console.log(模块。要求('测试')。sayhello ('Steve ')在上面的代码中，我们定义了三个模块看到这里的你，如果js基础不好，你可能会看起来很笨，头脑发晕.别担心，让我们看看运行结果：

结果很简单，把我们想要的一些信息打印出来。

代码分析

接下来，我们将详细分析代码原理。

装载机的几个关键点，

1.dule_list

Module_list是一个对象，用于以键值对的形式存储已定义的模块，例如模块名：callback。

2 .精细功能

然后我们定义一个define函数，它的三个参数是模块名、这个模块依赖列表和这个模块回调函数。当我们调用define函数时，我们首先检查module_list对象中是否有同名的模块。如果是，我们直接告诉用户模块名称已经被使用。如果没有，我们循环依赖列表rely，循环中的操作用来将依赖列表从名称列表转换为真实的模块列表，然后使用apply函数使其。

3.quire函数

由于我们的module_list存在于内部范围，保证了模块的隐私性，外部不能直接操作module list读取模块，所以我们定义了一个require函数，使用闭包来读取和操作对应的模块

4.分析

Module.define('my_module '，['test '，' haha']，(test，haha)={ let name=' Andrew '；函数SayHellO 2(){ let str=test . SayHellO(name)；今天天气真好。返回字符串；} return { ' say hello 2 ' : say hello 2 } })这里我们定义my_module，它依赖于两个模块：test和哈哈。在回调函数中，我们传入这两个模块，可以看到我们可以调用test模块的sayhello方法和haha模块的gotoHZ方法。到目前为止，已经实现了一个简单的模块加载器。

结论

这个简单的模块加载器简单介绍了模块加载器实现的基本原理。成熟的模块加载器当然要复杂得多，但是理解原理才是最重要的，不是吗~

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。