通过实例解析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.dule_list
module_list是一个对象，用于存储定义的模块，以模块名：callback这样
的键值对的形式存储；
2.fine函数
然后我们定义了一个define函数，其三个参数分别为模块名、此模块依赖列表、此模块回调函数，当我们调用define函数时，首先先去检查module_list对
象中是否已经有同名模块，如果有，直接告诉用户该模块名字已被使用，如果没有，我们循环依赖列表rely，循环中的操作用于将依赖列表从名称列表转换为真正的模块列表，然后利用apply函数，将其逐个传入到定义好的callback函数中。
3.quire函数
由于我们的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方法，至此，一个简单的模块加载器就实现了。
结语
这个简单的模块加载器只是很简化的介绍了模块加载器实现的基本原理，成熟的模块加载器当然是要复杂得多，但是原理了解了，才是最重要，不是嘛～
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家详细介绍了JS onkeypress兼容性的写法，感兴趣的小伙伴们可以参考一下2016-04-04
这篇文章主要介绍了JavaScript中点击事件的写法的相关资料,其中还给大家分享js触发按钮点击功能的实现，本文介绍的非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-06-06
泛型是静态类型语言的基本特征，允许将类型作为参数传递给另一个类型、函数、或者其他结构。TypeScript 支持泛型作为将类型安全引入组件的一种方式。这些组件接受参数和返回值，其类型将是不确定的，直到它在代码中被使用2022-10-10
这篇文章主要给大家简单介绍了javascript中return语句，有需要的小伙伴可以参考下。2015-07-07
这篇文章主要汇总介绍了生成二维码方法的相关资料,需要的朋友可以参考下2014-12-12
如何用JS取得网址中的文件名...2006-08-08
给指定元素的后面追加一些自己想要实现的效果或者是一些属性之类的，有木有遇到过，接下来为大家详细介绍下追加的实现代码，感兴趣的朋友可以参考下哈2013-04-04
这篇文章主要给大家介绍了关于JS实现深拷贝的4种方式,深拷贝是指将一个对象完整地拷贝一份,不受原对象影响,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2023-07-07
本文给大家分享JS设置手机验证码60s等待实现代码，需要的朋友参考下吧2017-06-06
weui框架暂时只有css文件，并没有js文件实现其功能，我在其html+css后面增加了js实现其功能，为大家提供方便，也为自己保存记录。具体实例代码大家参考下本文2017-08-08
最新评论