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. 【RocketMQ】RocketMQ存储结构设计

    CommitLog 生产者向Broker发送的消息,会以顺序写的方式,写入CommitLog文件,CommitLog文件的根目录由配置参数storePathRootDir决定,默认每一个CommitL ...

  2. 【学习】fhq-treap

    fhq-treap 是一种好写.复杂度低,且功能的优秀数据结构,涵盖了 treap 几乎所有的功能,其巧妙之处,就在于运用分离和合并两种操作代替了旋转操作. 1. BST 的定义 (摘自 OI Wik ...

  3. 【Vue3响应式入门#01】Reactivity

    专栏分享:vue2源码专栏,vue3源码专栏,vue router源码专栏,玩具项目专栏,硬核推荐 欢迎各位ITer关注点赞收藏 背景 以下是柏成根据Vue3官方课程整理的响应式书面文档 - 第一节, ...

  4. 创建CI/CD流水线中的IaC前，需要考虑哪些事项？

    许多软件工程团队通常会遵循相似的方法来交付基础设施以支持软件开发生命周期.为了缩小基础设施配置方式与应用程序环境部署方式之间的差距,许多 DevOps 团队将其基础设施即代码(IaC)模块直接连接到其 ...

  5. HTML5学习内容-3

    (一)行高 line-height,一行文字的高度 例子 <!DOCTYPE html> <html lang="en"> <head> < ...

  6. 手撕Vuex-模块化共享数据上

    前言 好,经过上一篇的介绍,实现了 Vuex 当中的 actions 方法,接下来我们来实现 Vuex 当中的模块化共享数据(modules). modules 方法用于模块化共享数据,那么什么叫模块 ...

  7. vue 项目中遇到的问题及解决方案

    问题:从码云上提前代码时npm run dev 报错 解决方法 在目录外层新建一个postcss.config.js 放入以下代码 module.exports = {       plugins:  ...

  8. 28. 干货系列从零用Rust编写正反向代理，项目日志的源码实现

    wmproxy wmproxy已用Rust实现http/https代理, socks5代理, 反向代理, 静态文件服务器,四层TCP/UDP转发,内网穿透,后续将实现websocket代理等,会将实现 ...

  9. Android 使用 ContentProvider 简单操作数据库

    ContentProvider 可以用来原生读写 Android 自带的数据库 SQLite. 使用 Studio 创建一个 ContentProvider, 名字叫 TestContentProvi ...

  10. Oracle ADG容灾端部署Rman备份的一些实践经验

    随着数据库中数据量的不断增加.业务的复杂性提高.各种政策颁布的系统容灾等级要求,数据库备份的工作及备份文件的有效性及备份文件的管理变得愈发重要.在Oracle数据库中提供了强大的备份和恢复工具,其中R ...