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. python第2~5章 学习笔记

    # 第2~5章 学习笔记 ## 什么是计算机语言 计算机就是一台用来计算机的机器,人让计算机干什么计算机就得干什么! 需要通过计算机的语言来控制计算机(编程语言)! 计算机语言其实和人类的语言没有本质 ...

  2. fmpeg 多张图片转视频,视频转gif,截取视频,截取视频里的帧

    ffmpeg 多张图片转视频,视频转gif,截取视频,截取视频里的帧 月色下的独轮车 于 2017-06-20 17:32:01 发布 6250 收藏 3文章标签: ffmpeg版权 android学 ...

  3. 【matplotlib 实战】--百分比柱状图

    百分比堆叠式柱状图是一种特殊的柱状图,它的每根柱子是等长的,总额为100%.柱子内部被分割为多个部分,高度由该部分占总体的百分比决定. 百分比堆叠式柱状图不显示数据的"绝对数值", ...

  4. docker入门加实战—网络

    docker入门加实战-网络 我们运行了一些容器,但是这些容器是否能够进行连通呢?那我们就来试一下. 我们查看一下MySQL容器的详细信息: 主要关注,Networks.bridge.IPAddres ...

  5. CSP-2023 初赛游记

    9.16 上午 今天就不早读了. 去前做了个 2019 的题,60 多分,感觉挺危. 去比赛前 30min 发现没带身份证,去宿舍拿的. 前 10min 发现没有笔,借了一些,但是发现还有一个小时才开 ...

  6. 产品代码都给你看了，可别再说不会DDD（九）：领域事件

    这是一个讲解DDD落地的文章系列,作者是<实现领域驱动设计>的译者滕云.本文章系列以一个真实的并已成功上线的软件项目--码如云(https://www.mryqr.com)为例,系统性地讲 ...

  7. "拍牌神器"是怎样炼成的（三）---注册全局热键

    要想在上海拍牌的超低中标率中把握机会.占得先机,您不仅需要事先准备好最优的竞拍策略,还要制定若干套应急预案,应对不时之需.既定策略交给计算机自动执行,没有问题.可是谁来召唤应急预案呢?使用全局热键应该 ...

  8. OpenGL 坐标系统详解

    GL中的坐标系是标准设备坐标,即他的每个坐标轴的取值范围都是[-1.0,1.0].通常,我们输入到顶点着色器中的顶点坐标都会被转换为标准化设备坐标,然后进行光栅化,转变成屏幕坐标.然而事实上,从顶点坐 ...

  9. 开发现代化的.NetCore控制台程序：(2)创建一个C#项目模板

    前言 上一篇文章(开发一个现代化的.NetCore控制台程序,包含依赖注入/配置/日志等要素)介绍了开发现代化的.NetCore控制台程序的细节,但这还不够,我又创建了一个脚手架模板,并命名为 Flu ...

  10. promise时效架构升级方案的实施及落地

    一.项目背景 为什么需要架构升级 promise时效包含两个子系统:内核时效计算系统(系统核心是时效计算)和组件化时效系统(系统核心是复杂业务处理以及多种时效业务聚合,承接结算下单黄金流程流量),后者 ...