欢迎光临
我的个人博客网站

JS模块化编程规范1——require.js

目录

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. 结果

运行结果如下,输入底数和指数后,点击按钮就会生成正确的结果:
JS模块化编程规范1——require.js

4. 参考

  1. 【第67期】ES6 系列之模块加载方案
  2. Javascript模块化编程(三):require.js的用法
  3. JavaScript的模块化编程
赞(0) 打赏
未经允许不得转载:张拓的天空 » JS模块化编程规范1——require.js
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏