通过实例解析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 相关文章推荐
jquery比较简洁的软键盘特效实现方法
Mar 19 Javascript
两种方法解决javascript url post 特殊字符转义 + &amp; #
Apr 13 Javascript
jQuery插件编写步骤详解
Jun 03 Javascript
JavaScript Ajax编程 应用篇
Jul 02 Javascript
原生js图片轮播效果实现代码
Oct 19 Javascript
jQuery插件echarts实现的循环生成图效果示例【附demo源码下载】
Mar 04 Javascript
基于twbsPagination.js分页插件使用心得(分享)
Oct 21 Javascript
JS实现提交表单前的数字及邮箱校检功能
Nov 13 Javascript
bootstrap3中container与container_fluid外层容器的区别讲解
Dec 04 Javascript
详解vue挂载到dom上会发生什么
Jan 20 Javascript
微信小程序实现多行文字超出部分省略号显示功能
Oct 23 Javascript
vue项目页面嵌入代码块vue-prism-editor的实现
Oct 30 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
phpMyAdmin出现无法载入 mcrypt 扩展,请检查PHP配置的解决方法
2012/03/26 PHP
解析PHP汉字转换拼音的类
2013/06/18 PHP
ThinkPHP实现非标准名称数据表快速创建模型的方法
2014/11/29 PHP
基于PHP实现通过照片获取ip地址
2016/04/26 PHP
PHP chop()函数讲解
2019/02/11 PHP
DOMAssitant最新版 DOMAssistant 2.5发布
2007/12/25 Javascript
js判断输入是否为正整数、浮点数等数字的函数代码
2010/11/17 Javascript
使用jQuery Mobile框架开发移动端Web App的入门教程
2016/05/17 Javascript
Angular2表单自定义验证器的实现
2016/10/19 Javascript
Node.js的特点详解
2017/02/03 Javascript
深入理解angular2启动项目步骤
2017/07/15 Javascript
浅谈JS封闭函数、闭包、内置对象
2017/07/18 Javascript
jQuery模拟12306城市选择框功能简单实现方法示例
2018/08/13 jQuery
jquery获取select选中值的文本,并赋值给另一个输入框的方法
2018/08/21 jQuery
Nodejs处理异常操作示例
2018/12/25 NodeJs
JS实现集合的交集、补集、差集、去重运算示例【ES5与ES6写法】
2019/02/18 Javascript
在小程序中推送模板消息的实现方法
2019/07/22 Javascript
websocket4.0+typescript 实现热更新的方法
2019/08/14 Javascript
ES6中Symbol、Set和Map用法详解
2019/08/20 Javascript
微信小程序JS加载esmap地图的实例详解
2019/09/04 Javascript
解决layui数据表格table的横向滚动条显示问题
2019/09/04 Javascript
python发送邮件接收邮件示例分享
2014/01/21 Python
python读取csv文件示例(python操作csv)
2014/03/11 Python
利用python编写一个图片主色转换的脚本
2017/12/07 Python
django反向解析和正向解析的方式
2018/06/05 Python
Flask框架响应、调度方法和蓝图操作实例分析
2018/07/24 Python
Python pygorithm模块用法示例【常见算法测试】
2018/08/16 Python
opencv 获取rtsp流媒体视频的实现方法
2019/08/23 Python
Python装饰器原理与基本用法分析
2020/01/07 Python
详解pyqt5的UI中嵌入matplotlib图形并实时刷新(挖坑和填坑)
2020/08/07 Python
python判断元素是否存在的实例方法
2020/09/24 Python
利用CSS的Sass预处理器(框架)来制作居中效果
2016/03/10 HTML / CSS
出门问问全球官方商城:Tichome音箱和TicWatch智能手表
2017/12/02 全球购物
农田水利实习自我鉴定
2013/09/19 职场文书
区域销售经理岗位职责
2015/04/02 职场文书
如何使用注解方式实现 Redis 分布式锁
2022/07/23 Redis