1. 概述

require.js是各种网络APP中非常常见的JS依赖库，它其实不仅仅是个模块加载器那么简单。它背后蕴含了一个非常重要的设计，也就是JS模块化编程。模块化是任何一个编程语言都会支持的设计，通过模块化能够将一个重要的问题拆分成一个个小的问题，并且模块与模块之间不关联（或者弱关联），减小的程序的开发难度。

最开始的时候，每个JS框架都会设计自己的模块加载方案，每次使用不同的JS的框架就得理解不同的模块加载方案。后来随着require.js的推广和使用，就逐渐形成了AMD（The Asynchronous Module Definition），也就是"异步模块加载机制"。这样，如果大家都约定使用同样的模块化规范设计，从一个框架到另外一个框架就没有成本，并且可以互相加载引入。

这里通过一个计算幂运算的例子，详细论述require.js的使用。

2. 详论

AMD模块规范听起来很高大上，但实际上并不是很复杂。模块化设计就是为了方便模块之间交互性，那么接口必然是统一而简约的，我们只要按照约定的规则来使用它即可。

2.1. 定义

模块化设计当然应该先定义一个模块了，这里定义一个乘法函数模块(Multiply.js)：

//自定义模块

define(function () {

    "use strict";

    var Multiply = function(x, y) {　

        return x * y;

    };

    return Multiply;

})

再定义一个数学函数库模块，当然里面只有一个求幂运算函数(MyMath.js)：

//自定义模块

define(["./Multiply"], function(Multiply){

    "use strict";

    function MyMath(){

    }

    MyMath.prototype.pow = function(base, exponent){

        let result = 1;

        for(let i = 0; i < exponent; i++){

            result = Multiply(result, base);

        }

        return result;

    }

    var myMath = new MyMath();

    return myMath;

})

这里两个例子说明了定义模块是通过define方法定义模块的，其中第一个参数可以是一个数组，指明该模块的依赖：

define([tools], function(){});

2.2. 调用

接下来在主函数(main.js)中调用自定义的数学函数库模块：

//函数立即执行，避免污染全局作用域

(function(){

    "use strict";

    require.config({

        paths: {

            "jquery": "./3rdParty/jquery-3.5.1",

            "MyMath": "./MyMath"

        }

    });

    //调用模块

    require(["jquery", "MyMath"],function($, MyMath){

        $("button").click(function () {

            var base = $("#base").val();

            var exponent = $("#exponent").val();

            var result = MyMath.pow(base, exponent);

            $("#result").val(result);

        });

    })

})()

这里加载了JQuery库，因为JQuery库是按照AMD标准规范来构建的，所以可以通过require.js来引入。

require.config是用来配置导入的库文件，用来给模块定义配置真正的路径和简短的名称。

通过require方法去加载自定义的数学库模块和JQuery模块，其中第一个参数定义了需要加载的模块；第二个参数则是加载成功之后的回调函数：

require(['modules'], callback);

2.3. 入口

接下来就是定义HTML页面脚本加载的入口了（RequireJSTest.html）：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>RequireJS-AMD规范</title>

</head>

<body>

    <div>

        <div>

            <label>求幂运算：</label>

        </div>

        <div>

            <label>底数：</label>

            <input type="number" value="2" id = "base">

        </div>

        <div>

            <label>指数：</label>

            <input type="number" value="8" id = "exponent">

        </div>

        <div>

        <button type="button">结果为：</button>

        <input type="number" id = "result">

        </div>

    </div>

    <script src="3rdParty/require.js" data-main="main"></script>

</body>

</html>

其中，<script src="3rdParty/require.js" data-main="main"></script> 这句代码定义了脚本的加载入口，src当然是require.js的源代码，而data-main则会默认的将dota-main指定的js路径为根路径。

关于dota-main属性，mozilla.org的具体说明如下：data-* 全局属性 是一类被称为自定义数据属性的属性，它赋予我们在所有 HTML 元素上嵌入自定义数据属性的能力，并可以通过脚本在 HTML 与 DOM 表现之间进行专有数据的交换。

这里还要注意的是AMD规范的脚本加载是异步的，同时会预先加载所有的依赖模块的脚本直到完成，再进入本脚本内容。

3. 结果

运行结果如下，输入底数和指数后，点击按钮就会生成正确的结果：

4. 参考

  1. 【第67期】ES6 系列之模块加载方案
  2. Javascript模块化编程（三）：require.js的用法
  3. JavaScript的模块化编程

JS模块化编程规范1——require.js的更多相关文章

  1. Javascript模块化编程之路——(require.js)

    转自:http://www.ruanyifeng.com/blog/2012/10/javascript_module.html Javascript模块化编程(一):模块的写法 随着网站逐渐变成&q ...

  2. require.js实现js模块化编程（一）

    1.认识require.js: 官方文档:http://requirejs.org/RequireJS是一个非常小巧的JavaScript模块载入框架,是AMD规范最好的实现者之一.最新版本的Requ ...

  3. 初步理解require.js模块化编程

    初步理解require.js模块化编程 一.Javascript模块化编程 目前,通行的Javascript模块规范共有两种:CommonJS和AMD. 1.commonjs 2009年,美国程序员R ...

  4. require.js实现js模块化编程（二）：RequireJS Optimizer

    require.js实现js模块化编程(二):RequireJS Optimizer 这一节,我们主要学习一下require.js所提供的一个优化工具r.js的用法. 1.认识RequireJS Op ...

  5. JS模块化编程（四）--require应用

    获取&使用require.js 下载最新版的Require.JS.下载之后,把它放在项目的脚本文件夹下,比如 js 文件夹下,项目结构看上去应该是: 要充分使用Require.JS,将html ...

  6. 从273二手车的M站点初探js模块化编程

    前言 这几天在看273M站点时被他们的页面交互方式所吸引,他们的首页是采用三次加载+分页的方式.也就说分为大分页和小分页两种交互.大分页就是通过分页按钮来操作,小分页是通过下拉(向下滑动)时异步加载数 ...

  7. js模块化编程之彻底弄懂CommonJS和AMD/CMD！

    先回答我:为什么模块很重要? 答:因为有了模块,我们就可以更方便地使用别人的代码,想要什么功能,就加载什么模块.但是,这样做有一个前提,那就是大家必须以同样的方式编写模块,否则你有你的写法,我有我的写 ...

  8. 好文推荐系列-------(5)js模块化编程

    本文主要来源于阮一峰的<Javascript模块化编程>系列文章整合,原文地址:http://www.ruanyifeng.com/blog/2012/10/javascript_modu ...

  9. JS模块化编程（二）

    背景 我们常在页面引用js遇到下面情况 <script src="1.js"></script> <script src="2.js&quo ...

  10. [转]js模块化编程之彻底弄懂CommonJS和AMD/CMD！

    原文: https://www.cnblogs.com/chenguangliang/p/5856701.html ------------------------------------------ ...

随机推荐

  1. 未来的人工智能会像流浪地球中的MOSS一样伪装，把人类带向属于它的未来吗？

    事情是这样的: 这几天用户反映在erp的db数据库中A账套中上传pdf附件有时能上传有时不能,以前又是好的.换成表格文件也是时好时坏.一开始我判断可能是用户的系统环境或文件本身的问题,后来排查更换电脑 ...

  2. PostgreSQL主备库搭建

    pg主备库的搭建,首先需在2个节点安装pg软件,然后依次在2个节点配置主备. 本文采用os为CentOS7.6,pg版本使用14.2,以下为详细部署步骤. 本文两个节点的ip地址如下: [root@n ...

  3. 每天5分钟复习OpenStack（四） virsh 常用命令

    在上一章节中,我们拉起了第一台虚拟机,但是执行virsh shutdown 关机是无法关机的,需要使用virsh destroy 强制断电的命令来关机.为什么会这样了? 这里我们介绍下 QGA的概念 ...

  4. 如何为你的WSL2更换最新的6.5.7kernel

    1.如果你像我一样,喜欢折腾你的 WSL2 ,这里是安装内核 6.X 的方法. 2.这是一个坏主意,可能会导致系统不稳定.数据损坏和其他问题.也可能会没事的,但不要怪我. Arch linux的wsl ...

  5. Unity - UIWidgets 5. Redux接入(一) 基本接入

    对响应式的数据组织结构不太熟, 直接尝试Redux走起 参考资料 Redux的基本概念 state 一个字段用于存储状态 存储state的地方称为"store", 类似Model\ ...

  6. NOI Linux 食用指北

    写这篇 blog 的原因是某个小朋友要考 CSP 了还不会用 linux,怎么回事呢. 单击图片即可放大. 前置- linux 虚拟机的安装 在官网 / 其他地方下载 VMware. 在 noi 官网 ...

  7. C# 压缩PDF文件

    PDF 文件可以包含文本.图片及各种媒体元素,但如果文件太大则会影响传输效果同时也会占用过多磁盘空间.通过压缩PDF文件,能够有效减小文件大小,从而提高传输效率并节省存储空间.想要通过C#代码快速有效 ...

  8. ics-06

    打开题目界面有点科技感,然后找到报表中心的位置 url地方出现了一个奇怪的id,试了下sql注入但是没报错,判断应该不是sql注入,然后就坐牢了 看了wp得在id的地方进行爆破 爆破了1-2500可以 ...

  9. 【scipy 基础】--正交距离回归

    Scipy的ODR正交距离回归(ODR-Orthogonal Distance Regression)模块,适用于回归分析时,因变量和自变量之间存在非线性关系的情况.它提高了回归分析的准确性和稳健性. ...

  10. 6k Star！B站、滴滴、小红书都在用的网站防火墙

    你有网站么?你担心网站被黑客攻击么?你知道如何抵御来自黑客的攻击吗? 据称互联网上有 30% 的流量都来自于恶意攻击.做过 Web 开发或者有过建站经验的朋友对 SQL 注入.CC 攻击.XSS.We ...