js 简易模块加载器示例分析

miqt 发布于2019-08-20 14:31 / 3421人阅读

摘要：简易模块加载器示例点来了接下来我们先来看一段建议模块加载器的示例代码以上是加载器的实现，再来看看如何使用吧你好啊要去杭州玩了章炜今天天气不错噢在以上代码中，我们定义了三个模块，分别名为。

前端模块化

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

各种标准

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

结果很简单，打印了一些我们想要的信息。

代码分析

接下来我们详细来解析一下代码原理。
加载器中的几个重点，

module_list

module_list是一个对象，用于存储定义的模块，以模块名：callback这样
的键值对的形式存储；

define函数

然后我们定义了一个define函数，其三个参数分别为模块名、此模块依赖列表、此模块回调函数，当我们调用define函数时，首先先去检查module_list对
象中是否已经有同名模块，如果有，直接告诉用户该模块名字已被使用，如果没有，我们循环依赖列表rely，循环中的操作用于将依赖列表从名称列表转换为真正的模块列表，然后利用apply函数，将其逐个传入到定义好的callback函数中。

require函数
由于我们的module_list存在于内部作用域，保证了模块的私密性，外部并不能
直接操作模块列表去读取模块，因此我们定义了一个require函数，利用闭包来读取操作相应模块

实例解析

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://www.ucloud.cn/yun/81702.html

Browserify简易入坑指南

摘要：简要说明长处在于使用模块规范，而不是使用的模块规范，以及使用的模块规范。简单使用关于命令行工具使用，请参照官方文档。相同模块重复依赖模块重复依赖很容易理解，模块实现时可能分割为多个子文件实现，每个子文件内部可能会引用同一个模块，如。简介 browerify: http://browserify.org/index.html browserify可以看做浏览器端的又一个模块...

vpants 2019-08-21 10:30 评论0 收藏0
javascript功能插件大集合，写前端的亲们记得收藏

摘要：一个专注于浏览器端和兼容的包管理器。一个整合和的最佳思想，使开发者能快速方便地组织和编写前端代码的下一代包管理器。完全插件化的工具，能在中识别和记录模式。健壮的优雅且功能丰富的模板引擎。完整的经过充分测试和记录数据结构的库。【导读】：GitHub 上有一个 Awesome – XXX 系列的资源整理。awesome-javascript 是 sorrycc 发起维护的 JS 资源列表...

cfanr 2019-08-20 10:34 评论0 收藏0
javascript功能插件大集合前端常用插件 js常用插件

摘要：转载来源包管理器管理着库，并提供读取和打包它们的工具。能构建更好应用的客户端包管理器。一个整合和的最佳思想，使开发者能快速方便地组织和编写前端代码的下一代包管理器。很棒的组件集合。隐秘地使用和用户数据。转载来源：https://github.com/jobbole/aw... 包管理器管理着 javascript 库，并提供读取和打包它们的工具。•npm – npm 是 javasc...

netmou 2019-08-23 12:28 评论0 收藏0
javascript功能插件大集合前端常用插件 js常用插件

摘要：转载来源包管理器管理着库，并提供读取和打包它们的工具。能构建更好应用的客户端包管理器。一个整合和的最佳思想，使开发者能快速方便地组织和编写前端代码的下一代包管理器。很棒的组件集合。隐秘地使用和用户数据。转载来源：https://github.com/jobbole/aw... 包管理器管理着 javascript 库，并提供读取和打包它们的工具。•npm – npm 是 javasc...

Hydrogen 2019-08-02 11:46 评论0 收藏0