什么是模块化编程？js 模块化编程的总结

来源：互联网 2024-10-15 16:47:33

1 什么是模块化编程

2 为什么要模块化

3 AMD

4 CommonJS

5 总结

点击下载“修复打印机驱动工具”；

了解一个技术，首先要了解这个技术产生的背景及解决的问题，而不应该只是单纯的知道该怎么用。之前的状态可能就是只是为了了解而了解，并不知道实际产生的原因及带来的好处，所以今天就来总结一下。

1 什么是模块化编程

来看百度百科的定义

比如 java 的 import，C# 的 using。我的理解是通过模块化编程，可以将不同的功能独立出来，修改某个功能时不会对其他功能产生影响。

2 为什么要模块化

来看下面一个例子

// A.jsfunction sayWord(type){    if(type === 1){        console.log("hello");    }else if(type === 2){        console.log("world");    }}// B.jsfunction Hello(){    sayWord(1);}// C.jsHello()

假设上面三个文件，B.js 引用了 A.js 里面的内容，C.js 又引用了 B.js 里面的内容，如果编写 C.js 的人只知道引用了 B.js，那他就不会引用 A.js 就会导致程序出错，而且文件的引用顺序也不能出错。给整体代码的调试修改带来不便。

还有个问题，上述代码暴露了两个全局变量，容易造成全局变量的污染

3 AMD

AMD 即 Asynchronous Module Definition（异步模块定义）。采取异步加载的方式加载模块，模块的加载不会影响它后面的语句执行。

假设下面这种情况

// util.jsdefine(function(){    return {        getFormatDate:function(date,type){            if(type === 1){                return &#39;2018-08-9&#39;            }            if(type === 2){                return &#39;2018 年 8 月 9 日&#39;            }        }    }})// a-util.jsdefine([&#39;./util.js&#39;],function(util){    return {        aGetFormatDate:function(date){            return util.getFormatDate(date,2)        }    }})// a.jsdefine([&#39;./a-util.js&#39;],function(aUtil){    return {        printDate:function(date){            console.log(aUtil.aGetFormatDate(date))        }    }})// main.jsrequire([&#39;./a.js&#39;],function(a){    var date = new Date()    a.printDate(date)})console.log(1);// 使用// <ｓｃｒｉｐｔ src = "/require.min.js" data-main="./main.js"></ｓｃｒｉｐｔ>

页面上先打印 1，然后才会打印 2018 年 8 月 9 日。因此 AMD 的加载并不会影响后续的语句执行。

如果不是异步加载会出现什么情况呢

var a = require(&#39;a&#39;);console.log(1)

后面的语句需要等待 a 加载完成才能执行，如果加载时间过长，整个程序都会卡在这。因此，浏览器不能同步加载资源，这也是 AMD 的产生背景。

AMD 是在浏览器端实现模块化开发的规范。由于该规范不是 JavaScript 原始支持的，使用 AMD 规范进行开发的时候需要引入第三方的库函数，也就是 RequireJS。

RequireJS 主要解决的问题

使 JS 异步加载，避免页面失去响应
管理代码之间的依赖性，有利于代码的编写和维护

下面来看看如何使用 require.js

要想使用 require.js，首先要 define

// ? 代表该参数可选    define(id?, dependencies?, factory);

id：指的是定义的模块的名字
dependencies：是定义的模块所依赖模块的数组
factory：为模块初始化要执行的函数或对象。如果为函数，它应该只被执行一次。如果是对象，此对象应该为模块的输出值。
具体的规范说明可以参考 AMD (中文版)
举个例子，创建一个名为 “alpha” 的模块，使用了 require，exports，和名为 “beta” 的模块:

define("alpha", ["require", "exports", "beta"], function (require, exports, beta) {       exports.verb = function() {           return beta.verb();           //Or:           return require("beta").verb();       }   });

一个返回对象的匿名模块：

define(["alpha"], function (alpha) {       return {         verb: function(){           return alpha.verb() + 2;         }       };   });

一个没有依赖性的模块可以直接定义对象：

define({     add: function(x, y){       return x + y;     }   });

如何使用

AMD 采用 require 语句加载模块

require([module],callback);

module：是一个数组，里面的成员是要加载的模块
callback：加载成功之后的回调函数

例如

require([&#39;./a.js&#39;],function(a){    var date = new Date()    a.printDate(date)})

具体的使用方法如下

// util.jsdefine(function(){    return {        getFormatDate:function(date,type){            if(type === 1){                return '2018-08-09'            }            if(type === 2){                return '2018 年 8 月 9 日'            }        }    }})// a-util.jsdefine(['./util.js'],function(util){    return {        aGetFormatDate:function(date){            return util.getFormatDate(date,2)        }    }})// a.jsdefine(['./a-util.js'],function(aUtil){    return {        printDate:function(date){            console.log(aUtil.aGetFormatDate(date))        }    }})// main.jsrequire([&#39;./a.js&#39;],function(a){    var date = new Date()    a.printDate(date)})// 使用//

假设这里有 4 个文件，util.js，a-util.js 引用了 util.js，a.js 引用了 a-util.js，main.js 引用了 a.js。

其中，data-main 属性的作用是加载网页程序的主模块。

上例演示了一个主模块最简单的写法，默认情况下，require.js 假设依赖和主模块在同一个目录。

使用 require.config() 方法可以对模块的加载行为进行自定义。require.config() 就写在主模块（main.js）的头部，参数是一个对象，这个对象的 paths 属性指定各个模块的加载路径

require.config({    paths:{        "a":"src/a.js",        "b":"src/b.js"    }})

还有一种方法是改变基础目录（baseUrl）

require.config({　　　　baseUrl: "src",　　　　paths: {　　　　　　"a": "a.js",　　　　　　"b": "b.js",　　　　}　　});

4 CommonJS

commonJS 是 nodejs 的模块化规范，现在被大量用在前端，由于构建工具的高度自动化，使得使用 npm 的成本非常低。commonJS 不会异步加载 JS，而是同步一次性加载出来

在 commonJS 中，有一个全局性的方法 require()，用于加载模块，例如

const util = require(&#39;util&#39;);

然后，就可以调用 util 提供的方法了

const util = require(&#39;util&#39;);var date = new date();util.getFormatDate(date,1);

commonJS 对于模块的定义分三种，模块定义（exports），模块引用（require）和模块标示（module）

exports() 对象用于导出当前模块的变量或方法，唯一的导出口。require() 用来引入外部模块。module 对象代表模块本身。

举个栗子

// util.jsmodule.exports = {    getFormatDate:function(date, type){         if(type === 1){                return &#39;2017-06-15&#39;          }          if(type === 2){                return &#39;2017 年 6 月 15 日&#39;          }    }}// a-util.jsconst util = require(&#39;util.js&#39;)module.exports = {    aGetFormatDate:function(date){        return util.getFormatDate(date,2)    }}

或者下面这种方式

 // foobar.js // 定义行为 function foobar(){         this.foo = function(){                 console.log(&#39;Hello foo&#39;);        }           this.bar = function(){                 console.log(&#39;Hello bar&#39;);          } } // 把 foobar 暴露给其它模块 exports.foobar = foobar;// main.js//使用文件与模块文件在同一目录var foobar = require(&#39;./foobar&#39;).foobar,test = new foobar();test.bar(); // &#39;Hello bar&#39;

5 总结

CommonJS 则采用了服务器优先的策略，使用同步方式加载模块，而 AMD 采用异步加载的方式。所以如果需要使用异步加载 js 的话建议使用 AMD，而当项目使用了 npm 的情况下建议使用 CommonJS。