你的位置:首页 > Java教程

[Java教程]操刀 requirejs,自己动手写一个

前沿 写在文章的最前面


这篇文章讲的是,我怎么去写一个 requirejs 。

去 github 上fork一下,顺便star~

requirejs,众所周知,是一个非常出名的js模块化工具,可以让你使用模块化的方式组织代码,并异步加载你所需要的部分。balabala 等等好处不计其数。

之所以写这篇文章,是做一个总结。目前打算动一动,换一份工作。感谢 一线码农 大大帮忙推了携程,得到了面试的机会。

面试的时候,聊着聊着感觉问题都问在了自己的“点”上,应答都挺顺利,于是就慢慢膨胀了。在说到模块化的时候,我脑子一抽,凭着感觉说了一下requirejs实现的大概步骤,充满了表现欲望,废话一堆。侥幸不可能当场让我写一遍,算是过了,事后尝试了一下,在这里跟大家分享一下我的实现。

结构划分


上面是我划分的项目结构:

  1. tool,工具模块,存放便捷方法,很多地方需要用到。
  2. async,异步处理模块,主要实现了 promisedeferred 。逻辑上的异步。
  3. requirejs -> loader ,amd加载器,处理模块的依赖和异步加载。物理上的异步。

因为对于异步流程控制方面,研究过一段时间,所以这里第一时间想到的就是 promise ,如果用这个来做,所有的模块放入字典,路径做key,promise做value,所有依赖都结束之后,才进行下一步操作。 不用管复杂的依赖关系,把逻辑尽量简单化:

  1. 首先有一个字典,存放所有的模块。key放地址,value放promise,promise在模块加载完毕的时候resolve。
  2. 如果依赖某个模块,先根据路径从字典找key,存在就用该promise,不存在就去加载该模块并放入字典,并使用该模块的promise。
  3. 所有的模块,我只用它的 promise ,在它的回调中写我的后续操作。它的resolve应该单独抽离出来,属于异步加载方面。

大致思路有了,当然实际写的时候肯定困难重重,不过没关系,遇到问题再去解决。

考虑到代码的简易性,以及我的个人习惯。我打算用类似于 jquery 的 $.Deferred() 和它的promise,与es6的promise有一定的出入。这样代码书写更简易,并且逻辑上更清晰,es6的promise用起来确实稍显麻烦。我需要的是一个 pub/sub 模式,一个地方触发,多个回调执行的并行方式,es6的promise,需要在then中一次次返回,并且resolve起来也不方便,最最主要的是需要 polyfill 一下,而我想自己写,写我熟悉且喜欢的代码 。

callbacks模块


回调模块 callbacks,熟悉jquery的朋友接下来可能会觉得使用方式很熟悉,没错,我受jq的影响算是比较深的。以前在学习jq源码的时候,就觉得这个很好用,你可以从我的代码里面看到jq的影子 :

 1 import _ from '../tool/tool'; 2  3 /** 4  * 基础回调模块 5  *  6  * @export 7  * @returns callbacks 8 */ 9 export default function () {10   let list = [],11     _args = (arguments[0] || '').split(' '),      // 参数数组12     fireState = 0,                   // 触发状态 0-未触发过 1-触发中 2-触发完毕13     stopOnFalse = ~_args.indexOf('stopOnFalse'),    // stopOnFalse - 如果返回false就停止14     once = ~_args.indexOf('once'),           // once - 只执行一次,即执行完毕就清空15     memory = ~_args.indexOf('memory') ? [] : null,   // memory - 保持状态16     fireArgs = [];                   // fire 参数17 18   /**19    * 添加回调函数20    * 21    * @param {any} cb22    * @returns callbacks23   */24   function add(cb) {25     if (memory && fireState == 2) { // 如果是memory模式,并且已经触发过26       cb.apply(null, fireArgs);27     }28 29     if (disabled()) return this;   // 如果被disabled30 31     list.push(cb);32     return this;33   }34 35   /**36    * 触发37    * 38    * @param {any} 任意参数39    * @returns callbacks40   */41   function fire() {42     if (disabled()) return this; // 如果被禁用43 44     fireArgs = _.makeArray(arguments); // 保存 fire 参数45 46     fireState = 1; // 触发中 47 48     _.each(list, (index, cb) => { // 依次触发回调49       if (cb.apply(null, fireArgs) === false && stopOnFalse) { // stopOnFalse 模式下,遇到false会停止触发50         return false;51       }52     });53 54     fireState = 2; // 触发结束55 56     if (once) disable(); // 一次性列表57 58     return this;59   }60 61   function disable() {  // 禁止62     list = undefined;63     return this;64   }65 66   function disabled() { // 获取是否被禁止67     return !list;68   }69 70   return {71     add: add,72     fire: fire,73     disable: disable,74     disabled: disabled75   };76 }

View Code

 

这是一个工厂方法,每次所需的对象由该方法生成,用闭包来隐藏局部变量,私有方法。而最后暴露(发布)出来的对象,用 pub/sub 模式,提供了 订阅触发禁用查看禁用 4个方法。 这里要说的是 ,提供了3个参数:stopOnFalseoncememory。触发的时候,按照订阅顺序依次触发,如果是 stopOnFalse 模式,当某个订阅的函数,返回是 false 的时候,停止整个触发过程。 如果是 once ,表示每个函数只能执行一次,在执行过后,会被移除队列。而 memory 状态下,在 callback 触发后,会被保持状态,之后添加的方法,添加后会直接执行。

这三种模式,传参的时候直接传入字符串,可以随意组合,用空格分开,比如:callbacks('once memory')

该模块用于整个项目中,处理所有的回调。使用方式类似于jquery的:$.Callbacks(...)

 

deferred 模块

deferred ,是对promise的父级模块,主要提供了 触发 和 订阅 2个方法。 promise 是对 deferred 的一个再封装,仅仅暴露出其中的 订阅 方法。

从概念上来说,很像 C# 中的委托和事件。

 1 import _ from '../tool/tool'; 2 import callbacks from './callbacks'; 3  4 /** 5  * deferred 模块 6  *  7  * @export 8  * @returns deferred 9 */10 export default function () {11   let tuples = [  // 用于存放一系列回调的 tuple 结构12     // 方法名 - 接口名称 - 回调列表 - 最终状态13     ['resolve', 'then', callbacks('once memory'), 'resolved'],14     ['reject', 'catch', callbacks('once memory'), 'rejected']15   ];16 17   let _state = 'pending';  // 当前状态18 19   let dfd = {        // 返回的延迟对象20     state: function () {21       return _state;22     },   // 状态23     promise: function () { // promise - 仅提供接口用于注册/订阅24       let self = this;25       let pro = {26         state: self.state27       };28       _.each(tuples, (i, tuple) => { // 订阅接口29         pro[tuple[1]] = self[tuple[1]];30       });31       return pro;32     }33   };34 35   _.each(tuples, (i, tuple) => {36     dfd[tuple[0]] = function () {    // 触发37       if (_state != "pending") return this;38       tuple[2].fire.apply(tuple[2], _.makeArray(arguments));39       _state = tuple[3];40       return this;41     };42     dfd[tuple[1]] = function (cb) {   // 绑定43       tuple[2].add(cb);44       return this;45     };46   });47 48   return dfd;49 }

View Code

deferred 使用了 callbacks 模块来处理其中所有的回调函数。是一个工厂方法,deferred() 返回的是一个deferred对象(发布),包含了3种状态:pendingresolvedrejected;提供了 thencatch 去订阅;通过 resolvereject 去 改变(触发) 状态。

deferred 对象,提供了一个 promise() 方法去返回一个promise对象,区别就是promise对象屏蔽了触发的方法。就像委托和事件,前者可以订阅和触发,而后者只能订阅。之所以如此,是想只提供订阅的接口,而如何触发,何时触发,由我自己控制,是我逻辑内部的事情,而其他部分,只需要知道也只能去订阅。

Tuple ,是一种约定的、按照某个规则进行存储的数据结构(类?), c# ,typescript 中都有这个东西,之前在学习jq的时候,看到了它的内部也这么用,于是学到了。其实在我看来,使用tuple,就是节约代码,笑。不必要去定义某个类,或者其他的东西,只需要在定义和使用的时候,遵循某个约定好的规则,那么就可以省去一大堆的代码,让逻辑部分也清晰不少。


all 模块

 1 import deferred from './deferred'; 2 import _ from '../tool/tool'; 3  4 export default function (promises) { 5   promises = _.makeArray(promises); 6   let len = promises.length,  // promise 个数 7     resNum = 0,        // resolve 的数量 8     argsArr = new Array(len), // 每个reject的参数 9     dfd = deferred(),  // 用于当前task控制的deferred10     pro = dfd.promise();   // 用于当前返回的promise11 12   if (len === 0) {  // 如果是个空数组,直接就返回了13     dfd.resolve();14     return pro;15   }16 17   function addThen() {  // 检测是否全部完成18     resNum++;19     let args = _.makeArray(arguments);20     let index = args.shift(); // 当前参数在promises中的索引21 22     if (args.length <= 1) {       // 保存到数组,用户回调23       argsArr[index] = args[0];24     } else {25       argsArr[index] = args;26     }27 28     if (resNum >= len) {     // 如果所有promise都resolve完毕29       dfd.resolve(argsArr);30     }31   }32 33   function addCatch() { // 如果某个promise发生了reject 34     var args = _.makeArray(arguments);35     dfd.reject(...args);36   }37 38   _.each(promises, (index, promise) => {39     promise.then(function () {40       addThen(index, ...arguments);41     }).catch(addCatch);42   });43 44   return pro;45 }

View Code

 

all,其实就是es6中, Promise.all 或者 $.when 的一种实现。参数是一系列的promise,本身返回一个promise对象,在所有参数中的promise对象都处于 resolved状态 时,本身也会被resolve掉,由此来执行通过then订阅的方法。

all本身,是通过一个触发器来实现在最后一个promise完成时回调。内部用一个int值来存储resolved的参数的个数,给每个参数通过 then 添加一个回调来执行这个触发器,当 完成数量 >= 参数个数 的时候,就表示所有promise已经完成,可以进行后续的操作。 用 >= 来代替 == 是个好习惯 :D

 


 

模块分析 模块定义、模块获取

到此为止,async 部分已经完成,准备工作已经做好。我们开始 amd 模块部分的分析。

amd 模块在我看来,主要分为两个部分:模块定义模块获取。先说模块获取:

模块获取

模块的获取,并不复杂。先从字典中根据路径(key)去找该模块,如果有该模块,就去加载。如果不存在,就去加载该js,根据onload来确定该模块的名称(如果是匿名模块);然后根据该模块的返回值==》 一个promise,给该promise添加一个回调,去管理 getModule 的返回值状态==》另一个promise。在使用一个模块的时候,从本质上来讲,是给该模块的promise的then接口添加回调函数,一层层往下处理。

模块定义

这里的重点是 加载模块,大家都知道,amd的每个模块,对应一个js文件,加载模块就是去加载这个js。

再看看模块的定义,有 3种重载:

  1. define(sender)
  2. define(deps,sender)
  3. define(name,deps,sender)

sender 是一个函数,或者某个对象。deps 是一个数组,表示该模块依赖的其他模块。name 是表示当前模块是一个命名模块,强制使用该名称,一般是打包工具生成这种模块,不建议自己直接这么写。

从上面我们可以看到,模块是通过执行一个函数,用传参的方式把所要用到的模块加载到某个地方保存起来。那么看到这个你们有没有想到什么呢?我首先想到的就是 jsonp ,动态执行一个函数,把数据放进去,对得上,完美。从这个思路,我实验了一下,在这里直接说结论: script标签在动态加载到页面后,首先去服务器拿对应地址的数据,然后在文件下载完全后,执行该js文件中的内容,执行完毕后,会触发该script标签的load事件。

也就是说,通过给load事件注册方法,我们可以知道最后一个加载的模块(js文件),来自哪里,什么时候执行完全。这样就确定了,并行加载多个js文件时,匿名模块所属来源。这里不讨论兼容的问题,低版本ie对应的是其他事件:onreadystatechange,我没用过。

 

在模块加载后,我们用一个函数来将模块填充到字典中,类似于一个 触发器,每次加载一个模块,模块中包含这个函数并执行,处理依赖关系,并将最后的结果保存。

在模块的加载中,因为可能会同时加载多个模块(js文件),并不能确定到底是哪一个先加载完全。但是我们知道,js是单线程,在js文件下载完全后,会先把js文件中的内容执行完毕,然后再触发load事件,这个顺序是可以保证的,所以就可以使用一个变量来保存最近加载的模块,来知道匿名模块的所属路径。

不论是匿名模块,还是命名模块,都可能依赖其他的模块,所以并不能确定在模块加载完之后,就可以立即使用,要等待所有的依赖项都加载完毕,所以一个模块的最终返回值我使用的一个promise来保存。这样就可以方便的在状态变更后才添加下一步的处理操作,从逻辑上简化整个流程控制。

模块入口 require

 1 /** 2  * 程序入口, require 3  *  4  * @export 5  * @param {any} deps 依赖项 6  * @param {any} callback 程序入口 7 */ 8 export function requireModule(deps, callback) { 9   setTimeout(function () { // 避免阻塞同文件中,使用名称定义的模块10     deps = deps.map(url => getModule(_.resolvePath(core.rootUrl, url)));11     all(deps).then(function (args) {12       callback(...args);13     });14   }, 0);15 }

View Code

 这里的代码比较简单,唯一要注意的就是这个 setTimeout(action,0)  。因为js是单线程,从上往下依次执行。模块可能会被打包工具合并成一个文件,那么在一个文件中就含有了模块入口、命名模块。如果模块入口在最上方,,,在依赖某个命名模块的时候,就会试图去加载这个名称的js文件,而这注定是会失败的。所以使用一个setTimeout,把模块入口的逻辑,放入事件队列中,让js逻辑线程优先去执行文件后面的代码,就避免了这个问题。

loader 模块代码

 1 import core from './core'; 2 import deferred from './async/deferred'; 3 import all from './async/all'; 4 import _ from './tool/tool'; 5  6 let lastNameDfd = null; // 最后一个加载的module的name的 deferred 7  8  9 /** 10  * 程序入口, require 11  *  12  * @export 13  * @param {any} deps 依赖项 14  * @param {any} callback 程序入口 15 */ 16 export function requireModule(deps, callback) { 17   setTimeout(function () { // 避免阻塞同文件中,使用名称定义的模块 18     deps = deps.map(url => getModule(_.resolvePath(core.rootUrl, url))); 19     all(deps).then(function (args) { 20       callback(...args); 21     }); 22   }, 0); 23 } 24  25 /** 26  * 模块定义,url,deps,sender 27  *  28  * @export 29 */ 30 export function defineModule() { 31   let args = _.makeArray(arguments); 32   let name = "",   // 模块名称 33     proArr,  // 模块依赖 34     sender; // 模块的主体 35  36   let argsLen = args.length; // 参数的个数,用来重载 37  38   if (argsLen == 1) { // 重载一下  sender 39     proArr = []; 40     sender = args[0]; 41   } 42   else if (argsLen == 2) { // deps,sender 43     proArr = args[0]; 44     sender = args[1]; 45   } 46   else if (argsLen == 3) { // name,deps,sender 47     name = args[0]; 48     proArr = args[1]; 49     sender = args[2]; 50   } 51   else { 52     throw Error('参数个数异常'); 53   } 54  55   let dfdThen = (_name, lastModule) => { 56     _name = _.normalizePath(_name); // 名称,路径 57  58     proArr = proArr.map(url => { // 各个依赖项  59       url = _.resolvePath(_name, url); // 以当前路径为基准,合并路径 60       return getModule(url); 61     }); 62  63     all(proArr).then(function (_args) { // 在依赖项加载完毕后,进行模块处理 64       _args = _args || []; 65       let result; // 最终结果 66       let _type = _.type(sender); // 回调模块类型 67  68       if (_type == "function") { 69         result = sender(..._args); 70       } 71       else if (_type == "object") { 72         result = sender; 73       } 74       else { 75         throw Error("参数类型错误"); 76       } 77  78       lastModule.resolve(result); 79  80     }); 81   }; 82  83   if (argsLen < 3) { // 如果是匿名模块,使用 onload 来判断js的名称/路径 84     lastNameDfd = deferred(); // 先获取当前模块名称 85  86     lastNameDfd.then(dfdThen); 87   } 88   else { // 如果是自定义模块名,直接触发,命名模块直接添加 89     let lastModule = deferred(); 90     let dictName = _.resolvePath(core.rootUrl, name); 91     core.dict[dictName] = lastModule; 92  93     let namedDfd = deferred().then(dfdThen); 94  95     setTimeout(function () {  // 避免同文件中,多个命名模块注册阻塞,先把名字注册了,具体内容等待一下 event loop  96       namedDfd.resolve(dictName, lastModule); 97     }, 0); 98   } 99 100 }101 102 /**103  * 根据 路径/名称 ,加载/获取模块的promise104  * 105  * @param {any} name106  * @returns promise107 */108 function getModule(name) {109   let dict = core.dict;110   if (dict[name]) {111     return dict[name];112   }113 114   let script = addScript(name);115 116   let dfd = deferred();117   dict[name] = dfd;118 119   script.onload = function () { // 模块加载完毕,立马会触发 load 事件,由此来确定模块所属120     let lastModule = deferred();121     lastNameDfd.resolve(name, lastModule); // 绑定当前模块的名称122 123     lastModule.then(result => { // 在模块加载完毕之后,触发该模块的 resolve124       dfd.resolve(result);125     });126   };127 128   return dfd.promise();129 }130 131 /**132  * 添加 script 标签133  * 134  * @export135  * @param {any} name136  * @returns137 */138 export function addScript(name) {139   let script = document.createElement('script');140   script.type = "text/javascript";141   script.async = true;142   script.charset = "utf-8";143   script.src = name + ".js";144   document.head.appendChild(script);145   return script;146 }

View Code

 

core 模块

 1 /** 2  * 默认核心载体 3 */ 4 export default { 5   /** 6    * 版本 7   */ 8   ver: "0.0.1", 9   /**10    * 模块定义名称11   */12   defineName: "define",13   /**14    * 程序入口函数15   */16   requireName: "require",17   /**18    * 暴露的全局名称,可用于配置19   */20   coreName: "requirejs",21   /**22    * 根目录,入口文件目录23   */24   rootUrl: "",25   /**26    * 依赖模块存储字典27   */28   dict: { // 模块字典 {key:string,value:promise}29 30   }31 };

View Code

core,主要存的是一些配置信息,和模块的字典,比较简单。

 

 


总结、Github


写到这里,就已经结束了。本文讲了对于requirejs,我的实现思路,列举了可能遇到的问题,及我的解决方式。希望能给大家的学习提供点帮助。

去 github 上fork一下,顺便star~

上面是github的地址,求star啊,作为一个虚荣的人,我对这个很看重的,哈哈,也就这点追求了。再次感激 一线码农 大哥的推荐,还有 linkFly 的经验指导。