`

理解requireJS-实现一个简单的模块加载器

 
阅读更多

http://www.cnblogs.com/yexiaochai/p/3961291.html

 在前文中我们不止一次强调过模块化编程的重要性,以及其可以解决的问题:

① 解决单文件变量命名冲突问题

② 解决前端多人协作问题

③ 解决文件依赖问题

④ 按需加载(这个说法其实很假了)

⑤ ......

为了深入了解加载器,中间阅读过一点requireJS的源码,但对于很多同学来说,对加载器的实现依旧不太清楚

事实上不通过代码实现,单单凭阅读想理解一个库或者框架只能达到一知半解的地步,所以今天便来实现一个简单的加载器

加载器原理分析

分与合

事实上,一个程序运行需要完整的模块,以下代码为例:

复制代码
 1   //求得绩效系数
 2   var performanceCoefficient = function () {
 3     return 0.2;
 4   };
 5 
 6   //住房公积金计算方式
 7   var companyReserve = function (salary) {
 8     return salary * 0.2;
 9   };
10 
11   //个人所得税
12   var incomeTax = function (salary) {
13     return salary * 0.2;
14   };
15 
16   //基本工资
17   var salary = 1000;
18 
19   //最终工资
20   var mySalary = salary + salary * performanceCoefficient();
21   mySalary = mySalary - companyReserve(mySalary) - incomeTax(mySalary - companyReserve(mySalary));
22   console.log(mySalary);
复制代码

我一份完整的工资来说,公司会有绩效奖励,但是其算法可能非常复杂,其中可能涉及到出勤率,完成度什么的,这里暂时不管

而有增便有减,所以我们会交住房公积金,也会扣除个人所得税,最终才是我的工资

对于完整的程序来说上面的流程缺一不可,但是各个函数中却有可能异常的复杂,跟钱有关系的东西都复杂,所以单单是公司绩效便有可能超过1000行代码

于是我们这边便会开始分:

复制代码
 1 <script src="companyReserve.js" type="text/javascript"></script>
 2 <script src="incomeTax.js" type="text/javascript"></script>
 3 <script src="performanceCoefficient.js" type="text/javascript"></script>
 4 <script type="text/javascript">
 5 
 6   //基本工资
 7   var salary = 1000;
 8 
 9   //最终工资
10   var mySalary = salary + salary * performanceCoefficient();
11   mySalary = mySalary - companyReserve(mySalary) - incomeTax(mySalary - companyReserve(mySalary));
12   console.log(mySalary);
13 
14 </script>
复制代码

上面的代码表明上是“分”开了,事实上也造成了“合”的问题,我要如何才能很好的把它们重新合到一起呢,毕竟其中的文件可能还涉及到依赖,这里便进入我们的require与define

require与define

事实上,上面的方案仍然是以文件划分,而不是以模块划分的,若是文件名发生变化,页面会涉及到改变,其实这里应该有一个路径的映射处理这个问题

var pathCfg = {
  'companyReserve': 'companyReserve',
  'incomeTax': 'incomeTax',
  'performanceCoefficient': 'performanceCoefficient'
};

于是我们一个模块便对应了一个路径js文件,剩下的便是将之对应模块的加载了,因为前端模块涉及到请求。所以这种写法:

companyReserve = requile('companyReserve');

对于前端来说是不适用的,就算你在哪里看到这样做了,也一定是其中做了一些“手脚”,这里我们便需要依据AMD规范了:

复制代码
 1 require.config({
 2   'companyReserve': 'companyReserve',
 3   'incomeTax': 'incomeTax',
 4   'performanceCoefficient': 'performanceCoefficient'
 5 });
 6 
 7 require(['companyReserve', 'incomeTax', 'performanceCoefficient'], function (companyReserve, incomeTax, performanceCoefficient) {
 8   //基本工资
 9   var salary = 1000;
10 
11   //最终工资
12   var mySalary = salary + salary * performanceCoefficient();
13   mySalary = mySalary - companyReserve(mySalary) - incomeTax(mySalary - companyReserve(mySalary));
14   console.log(mySalary);
15 });
复制代码

这里便是一个标准的requireJS的写法了,首先定义模块以及其路径映射,其中定义依赖项

require(depArr, callback)

一个简单完整的模块加载器基本就是这个样子了,首先是一个依赖的数组,其次是一个回调,回调要求依赖项全部加载才能运行,并且回调的参数便是依赖项执行的结果,所以一般要求define模块具有一个返回值

方案有了,那么如何实现呢?

实现方案

说到模块加载,人们第一反应都是ajax,因为无论何时,能拿到模块文件的内容,都是模块化的基本,但是采用ajax的方式是不行的,因为ajax有跨域的问题

而模块化方案又不可避免的要处理跨域的问题,所以使用动态创建script标签加载js文件便成为了首选,但是,不使用ajax的方案,对于实现难度来说还是有要求

PS:我们实际工作中还会有加载html模板文件的场景,这个稍候再说

通常我们是这样做的,require作为程序入口,调度javascript资源,而加载到各个define模块后,各个模块便悄无声息的创建script标签加载

加载结束后便往require模块队列报告自己加载结束了,当require中多有依赖模块皆加载结束时,便执行其回调

原理大致如此,剩下的只是具体实现,而后在论证这个理论是否靠谱即可

加载器阉割实现

核心模块

根据以上理论,我们由整体来说,首先以入口三个基本函数来说

var require = function () {
};
require.config = function () {
};
require.define = function () {
};

这三个模块比不可少:

① config用以配置模块与路径的映射,或者还有其他用处

② require为程序入口

③ define设计各个模块,响应require的调度

然后我们这里会有一个创建script标签的方法,并且会监听其onLoad事件

④ loadScript

其次我们加载script标签后,应该有一个全局的模块对象,用于存储已经加载好的模块,于是这里提出了两个需求:

⑤ require.moduleObj 模块存储对象

⑥ Module,模块的构造函数

有了以上核心模块,我们形成了如下代码:

复制代码
 1 (function () {
 2 
 3   var Module = function () {
 4     this.status = 'loading'; //只具有loading与loaded两个状态
 5     this.depCount = 0; //模块依赖项
 6     this.value = null; //define函数回调执行的返回
 7   };
 8 
 9 
10   var loadScript = function (url, callback) {
11 
12   };
13 
14   var config = function () {
15 
16   };
17 
18   var require = function (deps, callback) {
19 
20   };
21 
22   require.config = function (cfg) {
23 
24   };
25 
26   var define = function (deps, callback) {
27 
28   };
29 
30 })();
复制代码

于是接下来便是具体实现,然后在实现过程中补足不具备的接口与细节,往往在最后的实现与最初的设计没有半毛钱关系......

代码实现

这块最初实现时,本来想直接参考requireJS的实现,但是我们老大笑眯眯的拿出了一个他写的加载器,我一看不得不承认有点妖

于是这里便借鉴了其实现,做了简单改造:

复制代码
  1 (function () {
  2 
  3   //存储已经加载好的模块
  4   var moduleCache = {};
  5 
  6   var require = function (deps, callback) {
  7     var params = [];
  8     var depCount = 0;
  9     var i, len, isEmpty = false, modName;
 10 
 11     //获取当前正在执行的js代码段,这个在onLoad事件之前执行
 12     modName = document.currentScript && document.currentScript.id || 'REQUIRE_MAIN';
 13 
 14     //简单实现,这里未做参数检查,只考虑数组的情况
 15     if (deps.length) {
 16       for (i = 0, len = deps.length; i < len; i++) {
 17         (function (i) {
 18           //依赖加一
 19           depCount++;
 20           //这块回调很关键
 21           loadMod(deps[i], function (param) {
 22             params[i] = param;
 23             depCount--;
 24             if (depCount == 0) {
 25               saveModule(modName, params, callback);
 26             }
 27           });
 28         })(i);
 29       }
 30     } else {
 31       isEmpty = true;
 32     }
 33 
 34     if (isEmpty) {
 35       setTimeout(function () {
 36         saveModule(modName, null, callback);
 37       }, 0);
 38     }
 39 
 40   };
 41 
 42   //考虑最简单逻辑即可
 43   var _getPathUrl = function (modName) {
 44     var url = modName;
 45     //不严谨
 46     if (url.indexOf('.js') == -1) url = url + '.js';
 47     return url;
 48   };
 49 
 50   //模块加载
 51   var loadMod = function (modName, callback) {
 52     var url = _getPathUrl(modName), fs, mod;
 53 
 54     //如果该模块已经被加载
 55     if (moduleCache[modName]) {
 56       mod = moduleCache[modName];
 57       if (mod.status == 'loaded') {
 58         setTimeout(callback(this.params), 0);
 59       } else {
 60         //如果未到加载状态直接往onLoad插入值,在依赖项加载好后会解除依赖
 61         mod.onload.push(callback);
 62       }
 63     } else {
 64 
 65       /*
 66       这里重点说一下Module对象
 67       status代表模块状态
 68       onLoad事实上对应requireJS的事件回调,该模块被引用多少次变化执行多少次回调,通知被依赖项解除依赖
 69       */
 70       mod = moduleCache[modName] = {
 71         modName: modName,
 72         status: 'loading',
 73         export: null,
 74         onload: [callback]
 75       };
 76 
 77       _script = document.createElement('script');
 78       _script.id = modName;
 79       _script.type = 'text/javascript';
 80       _script.charset = 'utf-8';
 81       _script.async = true;
 82       _script.src = url;
 83 
 84       //这段代码在这个场景中意义不大,注释了
 85       //      _script.onload = function (e) {};
 86 
 87       fs = document.getElementsByTagName('script')[0];
 88       fs.parentNode.insertBefore(_script, fs);
 89 
 90     }
 91   };
 92 
 93   var saveModule = function (modName, params, callback) {
 94     var mod, fn;
 95 
 96     if (moduleCache.hasOwnProperty(modName)) {
 97       mod = moduleCache[modName];
 98       mod.status = 'loaded';
 99       //输出项
100       mod.export = callback ? callback(params) : null;
101 
102       //解除父类依赖,这里事实上使用事件监听较好
103       while (fn = mod.onload.shift()) {
104         fn(mod.export);
105       }
106     } else {
107       callback && callback.apply(window, params);
108     }
109   };
110 
111   window.require = require;
112   window.define = require;
113 
114 })();
复制代码

首先这段代码有一些问题:

没有处理参数问题,字符串之类皆未处理

未处理循环依赖问题

未处理CMD写法

未处理html模板加载相关

未处理参数配置,baseUrl什么都没有搞

基于此想实现打包文件也不可能

......

但就是这100行代码,便是加载器的核心,代码很短,对各位理解加载器很有帮助,里面有两点需要注意:

① requireJS是使用事件监听处理本身依赖,这里直接将之放到了onLoad数组中了

② 这里有一个很有意思的东西

document.currentScript

这个可以获取当前执行的代码段

requireJS是在onLoad中处理各个模块的,这里就用了一个不一样的实现,每个js文件加载后,都会执行require(define)方法

执行后便取到当前正在执行的文件,并且取到文件名加载之,正因为如此,连script的onLoad事件都省了......

demo实现

复制代码
 1 <html xmlns="http://www.w3.org/1999/xhtml">
 2 <head>
 3   <title></title>
 4 </head>
 5 <body>
 6 </body>
 7 <script src="require.js" type="text/javascript"></script>
 8 <script type="text/javascript">
 9   require(['util', 'math', 'num'], function (util, math, num) {
10 
11     num = math.getRadom() + '_' + num;
12     num = util.formatNum(num);
13     console.log(num);
14   });
15 </script>
16 </html>
复制代码
复制代码
1 //util
2 define([], function () {
3   return {
4     formatNum: function (n) {
5       if (n < 10) return '0' + n;
6       return n;
7     }
8   };
9 });
复制代码
复制代码
1 //math
2 define(['num'], function (num) {
3   return {
4     getRadom: function () {
5       return parseInt(Math.random() * num);
6     }
7   };
8 });
复制代码
1 //num
2 define([], function () {
3   return 10;
4 });

小结

今天我们实现了一个简单的模块加载器,通过他希望可以帮助各位了解requireJS或者seaJS,最后顺利进入模块化编程的行列

分享到:
评论

相关推荐

    深入理解requireJS-实现一个简单的模块加载器

    要深入理解requireJS实现一个简单的模块加载器,我们首先需要了解模块化编程的重要性和它能解决的问题。模块化编程可以解决单文件变量命名冲突问题、前端多人协作问题、文件依赖问题以及按需加载。模块化编程通过将...

    前端项目-requirejs-plugins.zip

    在前端开发中,正确地组织项目结构和利用模块化加载器如RequireJS,可以提高代码的可读性、可维护性,同时有助于实现代码的按需加载,减少网络请求,提高页面加载速度。 【压缩包子文件的文件名称列表】"requirejs-...

    requirejs-master

    RequireJS 是一个 JavaScript 模块化加载器,它在前端开发中扮演着至关重要的角色,尤其是在大型项目中,用于组织代码、管理和优化资源加载。"requirejs-master" 压缩包很可能包含了 RequireJS 的完整源码、文档、...

    react-requirejs-boilerplate-源码.rar

    RequireJS 则是一个 JavaScript 模块加载器,它使得在浏览器环境中遵循 AMD(Asynchronous Module Definition)规范来组织和异步加载代码变得可能。 React-RequireJS-Boilerplate 是一个基于 React 和 RequireJS 的...

    requirejs-demo.zip

    RequireJS 是一个 JavaScript 模块加载器,它使得在浏览器环境中可以实现异步加载和组织JavaScript文件,大大提高了页面性能。这个"requirejs-demo.zip"压缩包提供了一个基本的 RequireJS 示例,帮助开发者理解其...

    RequireJS一个JavaScript文件和模块加载器

    RequireJS 是一个JavaScript库,它的主要功能是作为一个模块管理和加载器。在JavaScript的世界里,由于其天然的异步性质,管理多个脚本文件的依赖关系往往变得复杂且困难。RequireJS 为此提供了解决方案,它引入了...

    前端项目-requirejs-handlebars.zip

    RequireJS是一款流行的JavaScript模块化加载器,它使得在浏览器端组织和管理JavaScript代码变得更加有序,解决了传统JavaScript代码中的依赖问题。而Handlebars则是一种轻量级的模板引擎,用于将数据和HTML结构分离...

    RequireJS-源码.rar

    RequireJS 是一个流行的JavaScript模块加载器和依赖管理库,它使得在浏览器环境中组织和加载复杂的JavaScript代码变得简单。 RequireJS 的源码分析可以帮助我们深入理解其工作原理,从而更好地运用到实际项目中。 ...

    requirejs-node-2.1.11-1.zip

    在Node.js环境中,RequireJS是一个前端模块加载器,它使得JavaScript遵循AMD(异步模块定义)规范,方便组织和管理代码。尽管RequireJS主要用于浏览器环境,但通过Browserify或webpack等工具,可以将其应用于Node.js...

    threejs-requirejs-seed:使用 requirejs-text 加载着色器的 Threejs 项目的简单启动种子

    通过这样的结构,我们可以实现一个动态加载和使用自定义着色器的3D场景。在实际项目中,你可能还会遇到光照、纹理、动画等高级特性,这些都是`three.js`库的强大之处。 总之,`threejs-requirejs-seed`项目提供了一...

    learn-requireJS-源码.rar

    《深入学习RequireJS:源码解析》 RequireJS是JavaScript世界中一个著名的模块化加载框架,它通过异步加载方式...同时,对RequireJS的理解也有助于我们理解其他模块加载器和构建工具的工作原理,进一步提高开发水平。

    requirejs-json:JSON AMD 插件

    RequireJS是AMD规范的一个实现,它允许开发者按需加载和管理代码,提高应用的性能和可维护性。 requirejs-json插件的主要功能包括: 1. **自动转换**: 当你尝试用RequireJS加载一个JSON文件时,requirejs-json插件...

    requireJS-test:一个简单的学习requireJS的测试站点

    标签 "JavaScript" 指出这个项目是与 JavaScript 相关的,尤其是关于 RequireJS 这个 JavaScript 模块加载器。 在 "压缩包子文件的文件名称列表" 中,我们看到 "requireJS-test-master",这通常意味着这是某个 ...

    requirejs-Example:一个示例项目,说明了 require.js 基础知识

    **require.js** 是一款在浏览器端管理 JavaScript 依赖关系的模块加载器,它引入了 AMD(Asynchronous Module Definition)规范,使得大型 JavaScript 应用能够更好地组织代码、按需加载和异步执行。本示例项目是...

    sample-requirejs-knockout-jasmine

    RequireJS是JavaScript的一个模块加载器,它的主要作用是管理代码依赖,使得大型JavaScript应用可以按需加载,提高页面性能。通过AMD(Asynchronous Module Definition)规范,RequireJS允许开发者声明模块及其依赖...

    requirejs-template-jasmine-build

    8. **Almond**:在生产环境中,为减小加载时间,通常会使用轻量级的 Almond 模块加载器替代 RequireJS。Almond 只提供模块加载的基本功能,不包含完整的 RequireJS 功能集,适合已优化的、静态依赖的生产环境。 在...

    ember-requirejs-blog:基于 emberJS,requireJS

    而 RequireJS 是一个模块化加载器,它引入了AMD(异步模块定义)规范,帮助开发者组织和优化代码,实现按需加载和依赖管理。 这个名为"ember-requirejs-blog"的项目结合了这两者,创建了一个基于博客的应用程序。在...

    requirejs-bridge

    RequireJS 是一款广泛使用的 JavaScript 模块化加载器,它使得在浏览器环境中按需加载 JavaScript 文件变得简单而高效。通过 RequireJS-Bridge,开发者可以将 RequireJS 的优势与类似 Java 的编程风格结合起来,提高...

    requirejs-jade:加载 jade 模板的 Require.js 插件

    Require.js 是一个流行的 JavaScript 模块化加载器,它使得在浏览器端组织和管理大量 JavaScript 文件变得更加容易。Jade(现更名为 Pug)则是一种简洁、强大的HTML模板引擎,它提供了一种更高效的语法来编写HTML。...

Global site tag (gtag.js) - Google Analytics