通过实例解析js简易模块加载器
作者:cucumber 发布时间:2024-04-16 08:55:57
前端模块化
关注前端技术发展的各位亲们,肯定对模块化开发这个名词不陌生。随着前端工程越来越复杂,代码越来越多,模块化成了必不可免的趋势。
各种标准
由于javascript本身并没有制定相关标准(当然es6已经有了import和export),所以在模块化方面诞生了各种不同的规范。主要有AMD规范(随requirejs诞生而普及),CMD规范(随seajs的出现而普及),commonjs(主要用于node,并不适合前端)。至于以上几种规范的异同,无耻的我在这里就不多费口水了,请还不了解的亲们自行去找google爸爸。
简易模块加载器示例
* 来了!
接下来我们先来看一段建议模块加载器的示例代码:
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方法,至此,一个简单的模块加载器就实现了。
结语
这个简单的模块加载器只是很简化的介绍了模块加载器实现的基本原理,成熟的模块加载器当然是要复杂得多,但是原理了解了,才是最重要,不是嘛~
来源:https://segmentfault.com/a/1190000008468025
猜你喜欢
- 1.使用场景定时执行jmeter脚本,通过python定时器隔一段时间执行命令行命令。2.库os、datetime、threading(1)
- 背景故事:我需要对一张图片做一些处理,是在图像像素级别上的数值处理,以此来反映图片 * 定区域的图像特征,网上查了很多,大多关于opencv的
- 视觉设计是什么,人们怎么认为它的,自己又是怎么对待和理解它,它的核心价值是什么。视觉设计,冒似很艺术,跟艺术相关的职业,给大多数人的印象是做
- filecmp定义了两个函数,用于方便地比较文件与文件夹: filecmp.cmp(f1, f2[, shallow]): 比较两个文件的内
- 前言tensorflow提供了多种读写方式,我们最常见的就是使用tf.placeholder()这种方法,使用这个方法需要我们提前处理好数据
- Jupyter是一个在线的代码编辑工具,想要调用本地的文件则需要切换路径到相应的文件路径下切换路径要在打开Jupyter之前完成操作:cd
- 1、基本语法SELECT查询列表FROM表名WHERE筛选表达式;2、按条件表达式筛选条件运算符:>,<,=,!=,<&g
- 1、选择排序选择排序是一种简单直观的排序算法。它的原理是这样:首先在未排序序列中找到最小(大)元素,存放到排序序列的起始位置,然后,再从剩余
- 查看当前连接系统参数:SHOW VARIABLES LIKE '%char%'; mysql> show variab
- ShuffleNet是由旷世发表的一个计算效率极高的CNN架构,它是专门为计算能力非常有限的移动设备(例如,10-150 MFLOPs)而设
- 本文介绍一下利用python批量把一个文件夹(及其子文件夹)下面的特定类型的文件移动到另一个文件夹下通过python操作系统目录及其文件,需
- 为了检验自己前期对机器学习中线性回归部分的掌握程度并找出自己在学习中存在的问题,我使用C语言简单实现了单变量简单线性回归。本文对自己使用C语
- 1. 什么是Matplotlibmatplotlib是专门用于开发2D图表(包括3D图表),以渐进、交互式方式实现数据可视化。使用pytho
- 本文实例为大家分享了python opencv识别图像轮廓的具体代码,供大家参考,具体内容如下要求:用矩形或者圆形框住图片中的云朵(不要求全
- 一、数据容器:list(列表)列表内的每一个数据,称之为元素以 [] 作为标识列表内每一个元素之间用, 逗号隔开定义语法:[元素1, 元素2
- session请求过程当第一次访问网站时,Seesion_start()函数就会创建一个唯一的Session ID,并自动通过HTTP的响应
- 前言由于pycharm自带的pip源网站是国外网址,这就导致了许多国内用户在pycharm中下载其他软件包速度极慢,有时还会跳出下载失败的界
- 我们主要讲解一下利用Python实现感知机算法。算法一首选,我们利用Python,按照上一节介绍的感知机算法基本思想,实现感知算法的原始形式
- 策略模式策略模式是一个经典的模式,简化代码。电商领域有个功能明细可以使用“策略”模式,就是根据客户的
- GeoPandas是一个基于pandas,针对地理数据做了特别支持的第三方模块。它继承pandas.Series和pandas.Datafr