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

 更新时间:2019年06月17日 10:27:02   作者:cucumber  
这篇文章主要介绍了通过实例解析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方法,至此,一个简单的模块加载器就实现了。

结语

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

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

相关文章

  • ES6 系列之 WeakMap的使用示例

    ES6 系列之 WeakMap的使用示例

    这篇文章主要介绍了ES6 系列之 WeakMap的使用示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08
  • js写一个字符串转成驼峰的实例

    js写一个字符串转成驼峰的实例

    写一个字符串转成驼峰的方法,使用js代码实现,具体如下,感兴趣的朋友可以了解下哈
    2013-06-06
  • javascript 中按属性值查找数组中的对象多种方法

    javascript 中按属性值查找数组中的对象多种方法

    JavaScript 数组可以保存混合类型的不同值,例如字符串、空值或布尔值,并且不需要数组的大小来指定它在哪里自动增长和动态,这篇文章主要介绍了javascript 中按属性值查找数组中的对象多种方法,需要的朋友可以参考下
    2023-06-06
  • 微信小程序实现通过js操作wxml的wxss属性示例

    微信小程序实现通过js操作wxml的wxss属性示例

    这篇文章主要介绍了微信小程序实现通过js操作wxml的wxss属性,结合实例形式分析了微信小程序使用js操作wxml的wxss属性相关原理、实现技巧与操作注意事项,需要的朋友可以参考下
    2018-12-12
  • 使用JS进行目录上传(相当于批量上传)

    使用JS进行目录上传(相当于批量上传)

    脚本使用了WScript.Shell和Scripting.FileSystemObject的组件,所以必须要在IE下面和打开安全选项中运行; 另外还用到了Jquery. 代码只是客户端代码, 至于服务器的接收代码网上好多了
    2010-12-12
  • JavaScript lodash常见用法系列小结

    JavaScript lodash常见用法系列小结

    本篇文章主要介绍了JavaScript lodash用法小结,非常不错,具有参考借鉴价值,对于Javascript lodash教程感兴趣的同学可以参考一下
    2016-08-08
  • tsconfig.json配置详解

    tsconfig.json配置详解

    这篇文章主要介绍了tsconfig.json配置详解,tsconfig.json文件中指定了用来编译这个项目的根文件和编译选项,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-05-05
  • JavaScript 字符串连接性能优化

    JavaScript 字符串连接性能优化

    从多次测试结果看来,使用StringBuffer 可以节省50%以上的时间
    2008-12-12
  • 基于JavaScript实现继承机制之原型链(prototype chaining)的详解

    基于JavaScript实现继承机制之原型链(prototype chaining)的详解

    我们知道在JavaScript中定义类的原型方式,而原型链扩展了这种方式,以一种有趣的方式实现继承机制。prototype 对象是个模板,要实例化的对象都以这个模板为基础。总而言之,prototype 对象的任何属性和方法都被传递给那个类的所有实例。原型链利用这种功能来实现继承机制
    2013-05-05
  • 微信小程序实现笑脸评分功能

    微信小程序实现笑脸评分功能

    这篇文章主要为大家详细介绍了微信小程序实现笑脸评分功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-11-11

最新评论