通过实例解析js简易模块加载器


Posted in Javascript onJune 17, 2019

前端模块化

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

各种标准

由于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基础不好,可能是一脸懵逼,脑子绕晕...先不急,让我们来看看运行的结果:

通过实例解析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方法,至此,一个简单的模块加载器就实现了。

结语

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS中如何判断传过来的JSON数据中是否存在某字段
Aug 18 Javascript
js实现滚动条滚动到页面底部继续加载
Dec 19 Javascript
js判断是否为空和typeof的用法(详解)
Oct 07 Javascript
基于Javascript倒计时效果
Dec 22 Javascript
[js高手之路]图解javascript的原型(prototype)对象,原型链实例
Aug 28 Javascript
vue-cli脚手架config目录下index.js配置文件的方法
Mar 13 Javascript
在vue-cli搭建的项目中增加后台mock接口的方法
Apr 26 Javascript
使用weixin-java-tools完成微信授权登录、微信支付的示例
Sep 26 Javascript
Angular Excel 导入与导出的实现代码
Apr 17 Javascript
微信小程序前端自定义分享的实现方法
Jun 13 Javascript
JavaScript Dom 绑定事件操作实例详解
Oct 02 Javascript
JavaScript canvas实现流星特效
May 20 Javascript
如何从头实现一个node.js的koa框架
Jun 17 #Javascript
javascript定时器的简单应用示例【控制方块移动】
Jun 17 #Javascript
深入解析koa之异步回调处理
Jun 17 #Javascript
JS中数据结构与算法---排序算法(Sort Algorithm)实例详解
Jun 17 #Javascript
详解element-ui设置下拉选择切换必填和非必填
Jun 17 #Javascript
JS实现的字符串数组去重功能小结
Jun 17 #Javascript
JavaScript静态作用域和动态作用域实例详解
Jun 17 #Javascript
You might like
便携利器 — TECSUN PL-365简评
2021/03/02 无线电
SSI指令
2006/11/25 PHP
php 获得汉字拼音首字母的函数
2009/08/01 PHP
php 随机记录mysql rand()造成CPU 100%的解决办法
2010/05/18 PHP
编写php应用程序实现摘要式身份验证的方法详解
2013/06/08 PHP
PHP输入输出流学习笔记
2015/05/12 PHP
PHP预定义变量9大超全局数组用法详解
2016/04/23 PHP
CI(CodeIgniter)框架中URL特殊字符处理与SQL注入隐患分析
2019/02/28 PHP
jQuery ajax cache缓存问题
2010/07/01 Javascript
Jquery插件分享之气泡形提示控件grumble.js
2014/05/20 Javascript
jquery实现动态改变div宽度和高度
2015/05/08 Javascript
jquery验证邮箱格式并显示提交按钮
2015/11/07 Javascript
jquery通过扩展select控件实现支持enter或focus选择的方法
2015/11/19 Javascript
js实现网页收藏功能
2015/12/17 Javascript
浅谈javascript运算符——条件,逗号,赋值,()和void运算符
2016/07/15 Javascript
Google 爬虫如何抓取 JavaScript 的内容
2017/04/07 Javascript
JavaScript中offsetWidth的bug及解决方法
2017/05/17 Javascript
jQuery的Ajax接收java返回数据方法
2018/08/11 jQuery
使用watch在微信小程序中实现全局状态共享
2019/06/03 Javascript
vue中使用rem布局代码详解
2019/10/30 Javascript
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
2021/01/08 Vue.js
[56:13]DOTA2-DPC中国联赛定级赛 LBZS vs Phoenix BO3第一场 1月10日
2021/03/11 DOTA
python uuid模块使用实例
2015/04/08 Python
python爬虫开发之使用python爬虫库requests,urllib与今日头条搜索功能爬取搜索内容实例
2020/03/10 Python
通过python调用adb命令对App进行性能测试方式
2020/04/23 Python
Python自动发送和收取邮件的方法
2020/08/12 Python
python爬虫破解字体加密案例详解
2021/03/02 Python
canvas实现有递增动画的环形进度条的实现方法
2019/07/10 HTML / CSS
旅游管理专业生自荐信范文
2014/01/02 职场文书
电子信息专业自荐书
2014/02/04 职场文书
四风自我剖析材料思想汇报
2014/10/01 职场文书
公积金接收函格式
2015/01/30 职场文书
合同纠纷调解书
2015/05/20 职场文书
在校大学生才艺比赛策划书怎么写?
2019/08/26 职场文书
java泛型通配符详解
2021/07/25 Java/Android
Hive常用日期格式转换语法
2022/06/25 数据库