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. mooc第五单元《管理组织》单元测试

    第五单元<管理组织>单元测试     返回 本次得分为:30.00/50.00, 本次测试的提交时间为:2020-08-30, 如果你认为本次测试成绩不理想,你可以选择 再做一次 . 1 ...

  2. CF B. Gardener and the Array

    B. Gardener and the Array 思路:只要找到一个c他的每一位均在除了它的集合中出现过即可 这题T了2发,用来multiset,注意multiset大的时间复杂度是O(K + lo ...

  3. 字符串表达式计算(a+b/(a-b))的思路与实践

    前言 为满足业务需要,需要为项目中自定义模板添加一个计算字段的组件,通过设置字符串表达式,使用时在改变表达式其中一个字段的数据时,自动计算另外一个字段的值. 本篇为上篇,介绍原理,简单实现一个工具,输 ...

  4. 一篇搞定Sentinel-搭建Spring Cloud Alibaba服务组件Sentinel实现服务资源控制

    1.Sentinel介绍 随着微服务的流行,服务和服务之间的稳定性变得越来越重要.Sentinel 是面向分布式.多语言异构化服务架构的流量治理组件,主要以流量为切入点,从流量路由.流量控制.流量整形 ...

  5. mybatis 操作 mysql 大批量插入,数据分页处理

    /** * 大批量插入,数据分页处理 * * @param tableName 临时表名称 * @param mapHead 临时表属性 Map,key = 临时表字段属性, value = 具体值. ...

  6. 24. 从零用Rust编写正反向代理，细说HTTP行为中的几种定时器

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

  7. 深度解析NLP文本摘要技术：定义、应用与PyTorch实战

    在本文中,我们深入探讨了自然语言处理中的文本摘要技术,从其定义.发展历程,到其主要任务和各种类型的技术方法.文章详细解析了抽取式.生成式摘要,并为每种方法提供了PyTorch实现代码.最后,文章总结了 ...

  8. Vivado生成bitstream时报错[Opt 31-67] Problem: A LUT3 cell in the design is missing a connection on input pin I1, which is used by the LUT equation

    这个原因主要是因为有一个引脚没有用到,解决方法. 1.打开Schematic. 2.根据提示的模块去找,比如说我的报错. [Opt 31-67] Problem: A LUT3 cell in the ...

  9. FC 交换机基础配置

    目录 Primera600 存储服务器 FC 交换机 交换机信息查看 交换机配置管理 用户管理 以太网配置 端口配置管理 别名配置 证书管理 角色管理 Zone 管理 参考网址 Primera600 ...

  10. word的实用操作技巧

    1.基本使用操作 (1)文本删除: 退格键backspace:删除光标以左的内容 删除键delete:删除光标以右的内容 直接输入会增加字符,按insert键,会切换成改写模式,新字符代替旧字符,总字 ...