来！我们一起来从头开始构建自己的JavaScript模块化工具

AaronYuan 发布于2019-08-19 18:26 / 3361人阅读

摘要：能达到一个积木块模块的要求。接下来我们将改进它。结尾到此，我们自己构建了一个很实用的模块化工具，项目的源码在这里，喜欢的话，给个。

前言

希望编写程序能像玩积木一样，首先规划要产出怎样的作品，然后在积木堆中挑选合适的积木块，最后一组合就完工了。

于是JavaScript需要类似这样模块化，每个模块都隐藏内部细节并且对外暴露接口，再处理好模块之间的依赖关系，就可以达到玩积木的效果了。

虽然现有很多模块化框架／工具，但对于新手来说，为什么不自己撸一个简单的模块化工具呢？

希望通过这个工具把自己觉得好用的代码以模块的方式组织起来，渐渐形成自己的JS库，之后可以勇敢地和HR说，自己的小项目用的是自己小JS库，^_^。我觉得，在这个封装的过程中，新手能学习到很多东西。

新手嘛，多造轮子总是有好处的，=_=。

从闭包到模块

以下是《你所不知道的JavaScript（上卷）》中对于闭包的说明。

当函数可以记住并访问所在的词法作用域，即使函数是在当前词法作用域之外执行，这时就产生了闭包。

其实，不管怎样，闭包正如其字面意思一样，既能提供一个相对封闭的空间，也能向外界暴露必要的接口。这不就正符合我们模块化的需求吗？

在此，建议参考这篇文章，以加强您对闭包的理解：《假如技术HR问您JavaScript的“闭包”，嘿嘿嘿，举这个例子就够了》。

最简单的模块

var test = (function test(){
    function run(){
        console.log("run test");
    }
    return {
        run: run
    };
})();
test.run();

上面的代码有个叫test的函数作为模块创建器，每次调用它都可以创建一个新的模块。这里使用立即执行函数，立即创建了一个test模块。参考闭包的概念，外部可以调用test模块中的run函数，同时test模块又有自己独立的作用域。能达到一个积木块（模块）的要求。

简单的模块这样写没有问题，但是模块间的依赖问题没有解决。

最简单的模块管理工具

模块之间必然会存在依赖关系，而模块管理工具需要能够很好地管理模块间的依赖。下面我们模仿实现了AMD规范的工具requirejs，主要是模仿其define，get的API风格，自己写一个简单的版本。

//模块管理工具，MyModules
var MyModules = (function Manager() {
    var modules = {};
    function define(name, deps, impl) {
        for (var i=0; i
可以看出，利用MyModules可以很方便地定义使用模块，管理模块依赖。但是还存在一个问题，MyModules对于模块定义的顺序有要求。以上面的例子来说，就是app模块依赖data模块，那data模块必须在app模块之前被定义。这个限制让我们实际使用中不是很方便。接下来我们将改进它。
改进模块管理工具
我们需要让模块管理工具不需要限制模块的定义顺序，这里我的做法是，使用一个rebuilds数组来保存未成功构建的模块。每次有新模块构建成功的时候就会重新尝试去构建整个rebuilds数组中的模块。具体看下面的代码。
window.mm_modules = (function Manager() {
    var debug = false;
    var modules = {};
    var rebuilds = [];
    function copyArray (array){
        var tempArray = [];
        for(var i=0; i
改进后的模块管理工具，能够自动地处理模块依赖，而不需要限制定义顺序了。
那，能不能更进一步呢？试着想一下，我们日常会怎么使用？单文件单模块，然后把这些文件放在不同文件夹里组织好。于是，我就想到使用gulp这样的工具辅助我们。
gulp辅助
请参考下面的目录结构。
├── dist
│   ├── index.html
│   └── js
│       └── mm-modules-build.js
├── gulpfile.js
├── mm-modules
│   ├── queryObject.js
│   ├── request.js
│   ├── template.js
│   ├── test.js
│   └── util.js
├── mm-modules.js
可以在mm-modules下随意地定义模块，如util模块内有各种工具函数，template模块则包含了artTemplate模版引擎。之后利用gulp将mm-modules.js（模块管理工具）与mm-modules下所有的模块文件打包成mm-modules-build.js。项目中只要引入mm-modules-build.js即可。
结尾
到此，我们自己构建了一个很实用的JavaScript模块化工具，项目的源码在这里：https://github.com/MIKUScallion/mm-modules，喜欢的话，给个✨。
再回顾一下前言的话。
希望通过这个工具把自己觉得好用的代码以模块的方式组织起来，渐渐形成自己的JS库，之后可以勇敢地和HR说，自己的小项目用的是自己小JS库，^_^。我觉得，在这个封装的过程中，新手能学习到很多东西。
新手嘛，多造轮子总是有好处的，=_=。

参考
《你所不知道的JavaScript（上卷）》

idc机房托管云服务器构建自己的云服务器怎么构建自己的云服务器怎样构建自己的云服务器我们可以用vps来干什么

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/79617.html

React文档翻译系列（一）安装

摘要：文档翻译系列一安装原文地址原文本系列是针对文档进行的翻译，因为自己在学习的时候，最开始通过看博客或者论坛等中文资料，有些内容是零零散散的接收，并没有给自己带来很好的效果，所以后来决定把文档的原文从头到尾看一遍。 React文档翻译系列（一）安装原文地址：原文本系列是针对React文档进行的翻译，因为自己在学习react的时候，最开始通过看博客或者论坛等中文资料，有些内容是零零散散的...

Fourierr 2019-08-20 15:28 评论0 收藏0
[译] 学习如何构建自动化、跨浏览器的 JavaScript 单元测试

摘要：我已经把学习如何构建自动化跨浏览器的的单元测试列在我的年度清单中，但我每一次坐下来真正想要做的时候，我又退却了。供应商支持许多主流的单元测试框架，包括，，和。作者：Philip Walton译者：Yeaseon原文链接：Learning How to Set Up Automated, Cross-browser JavaScript Unit Testing 译文仅供个人学习，不用...

QiuyueZhong 2019-08-21 10:54 评论0 收藏0
【译】WebAssembly 初尝

摘要：在当前阶段，仅仅只是字节码规范。如果都没有将代码编译为字节码的工具，要起步就很困难了。接下来要做的是使用将格式的代码转换为二进制码。运行文件，最后就能得到浏览器需要的真正的二进制码。本文转载自：众成翻译译者：文蔺链接：http://www.zcfy.cc/article/1031原文：http://cultureofdevelopment.com/blog/build-your-fi...

anonymoussf 2019-08-21 14:17 评论0 收藏0
14个最好的 JavaScript 数据可视化库

摘要：适用于，演示这是开发的一个简单的可视化库，它允许你创建所有常用的图表类型条形图，树形图，折线图，面积图等。可以轻松地对折线图和条形图进行混合和匹配以组合不同的数据集，这是非常棒的功能。翻译：疯狂的技术宅原文：https://www.monterail.com/blo... 本文首发微信公众号：jingchengyideng欢迎关注，每天都给你推送新鲜的前端技术文章你的程序有多...

Mertens 2019-08-23 16:23 评论0 收藏0
[译]Yarn：一个新的JavaScript包管理器

摘要：第一个主要的包管理器在被引用后不久就搭建起来了，并且迅速成为世界上最受欢迎的包管理器之一。简介是一款新的包管理器，在取代客户端和其他包管理器现有工作流的同时，又保留了对代理的兼容性。在JavaScript社区，工程师们分享了成百上千的代码段，我们不用自己从头编写基础组件、类库或者框架。反过来，每段代码又或许依赖于其它的代码段，而这些依赖就是通过 package managers(包管...

Steve_Wang_ 2019-08-20 11:37 评论0 收藏0