js简易模块加载器的示例分析-创新互联
这篇文章主要为大家展示了“js简易模块加载器的示例分析”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“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简易模块加载器的示例分析”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!
本文标题:js简易模块加载器的示例分析-创新互联
当前地址:http://myzitong.com/article/piios.html