RequireJs ソース コード分析により、スクリプトの読み込みの仕組みが明らかに

はじめに

よく言われるように、原則を勉強するのが好きではないプログラマーは良いプログラマーではなく、ソースコードを読むのが好きではないプログラマーは良いjserではありません。ここ 2 日間、私はフロントエンドのモジュール化に関連する問題を目にして、JavaScript コミュニティがフロントエンド エンジニアリングに非常に熱心に取り組んでいることを知りました。今日はフロントエンドのモジュール化について1日勉強しました。まずモジュール化の標準仕様を簡単に理解してから、RequireJsの構文と使い方を学び、最後にRequireJsのデザインパターンとソースコードを勉強しました。関連するエクスペリエンスを記録し、モジュール読み込みの原理を分析します。

1. RequireJ について理解する

始める前に、フロントエンドのモジュール化について理解する必要があります。この記事では、フロントエンドのモジュール化に関する問題については説明しません。 Ruan Yifeng の連載記事 Javascript モジュラー プログラミング 。

RequireJs を使用するための最初のステップ: 公式 Web サイトにアクセスします ；

2 番目のステップ: ファイルをダウンロードして main 関数を設定します

1 <script type="text/javascript" src="scripts/require.js?1.1.11" data-main="scripts/main.js?1.1.11"></script>

次に、main.js ファイルでプログラムできます。 requirejs は、モジュールが相互に依存することも、独立した関係になることもできるという主な機能概念を採用しています。 requirejs を使用すると、プログラミング時にすべてのモジュールをページに導入する必要がなく、モジュールの導入は Java のインポートに相当します。

定義モジュール：

RREEEE

IMPORTモジュール：

 1 //直接定义一个对象 2 define({ 3     color: "black", 4     size: "unisize" 5 }); 6 //通过函数返回一个对象，即可以实现 IIFE 7 define(function () { 8     //Do setup work here 9 10     return {11         color: "black",12         size: "unisize"13     }14 });15 //定义有依赖项的模块16 define(["./cart", "./inventory"], function(cart, inventory) {17         //return an object to define the "my/shirt" module.18         return {19             color: "blue",20             size: "large",21             addToCart: function() {22                 inventory.decrement(this);23                 cart.add(this);24             }25         }26     }27 );

E

requirejsの使用については、公式WebサイトAPIを確認できます。記事はまだ有効ではありません。ejs の使用を説明する必要があります。

2. Main 関数エントリ

requirejs の核となるアイデアの 1 つは、C++ の int main()、Java の public static void main() と同じように、指定された関数エントリを使用することです。requirejs の使用方法は、 main 関数 script タグにキャッシュします。つまり、スクリプト ファイルの URL が script タグにキャッシュされます。

1 //导入一个模块2 require(['foo'], function(foo) {3     //do something4 });5 //导入多个模块6 require(['foo', 'bar'], function(foo, bar) {7     //do something8 });

新しいコンピューターのクラスメートが見て、すごい！ script タグに不明な属性はありますか?とても怖かったので、すぐに W3C を開いて関連する API を表示し、自分の HTML の基本的な知識を恥ずかしく思いました。しかし、残念なことに、script タグには関連する属性がなく、標準の属性ですらありませんでした。 requirejs のソース コードに直接アクセスしてみましょう:

1 <script type="text/javascript" src="scripts/require.js?1.1.11" data-main="scripts/main.js?1.1.11"></script>

実際、requirejs では、script タグにキャッシュされたデータを取得し、データを取り出してロードするだけで、これは動的ロードと同じです。具体的にどのように操作するのかは、以下の説明でソースコードを公開します。

3. 動的読み込みスクリプト

この部分は、Node.js でのモジュールの読み込み方法が同期的に行われることがわかっています。ローカル ハードディスクの場合、転送速度は高速で安定しています。ブラウザに切り替えると、ブラウザのロード スクリプトがサーバーと通信するため、これは実行できません。同期メソッドを使用してロードすると、引き続きブロックされる可能性があります。ブラウザーがブロックしないようにするには、スクリプトを非同期で読み込む必要があります。非同期でロードされるため、モジュールに依存する操作はスクリプトのロード後に実行する必要があり、ここでコールバック関数を使用する必要があります。

スクリプト ファイルが HTML で定義されている場合、スクリプトの実行順序は次のように同期的であることがわかっています。

　　那么在浏览器端总是会输出：

　　但是如果是动态加载脚本的话，脚本的执行顺序是异步的，而且不光是异步的，还是无序的：

 1 //main.js 2 console.log("main start"); 3  4 var script1 = document.createElement("script"); 5 script1.src = "scripts/module/module1.js?1.1.11"; 6 document.head.appendChild(script1); 7  8 var script2 = document.createElement("script"); 9 script2.src = "scripts/module/module2.js?1.1.11";10 document.head.appendChild(script2);11 12 var script3 = document.createElement("script");13 script3.src = "scripts/module/module3.js?1.1.11";14 document.head.appendChild(script3);15 16 console.log("main end");

 　　使用这种方式加载脚本会造成脚本的无序加载，浏览器按照先来先运行的方法执行脚本，如果 module1.js 文件比较大，那么极其有可能会在 module2.js 和 module3.js 后执行，所以说这也是不可控的。要知道一个程序当中最大的 BUG 就是一个不可控的 BUG ，有时候它可能按顺序执行，有时候它可能乱序，这一定不是我们想要的。

　　注意这里的还有一个重点是，"module" 的输出永远会在 "main end" 之后。这正是动态加载脚本异步性的特征，因为当前的脚本是一个 task ，而无论其他脚本的加载速度有多快，它都会在 Event Queue 的后面等待调度执行。这里涉及到一个关键的知识 — Event Loop ，如果你还对 JavaScript Event Loop 不了解，那么请先阅读这篇文章 深入理解 JavaScript 事件循环（一）— Event Loop。

 四、导入模块原理

　　在上一小节，我们了解到，使用动态加载脚本的方式会使脚本无序执行，这一定是软件开发的噩梦，想象一下你的模块之间存在上下依赖的关系，而这时候他们的加载顺序是不可控的。动态加载同时也具有异步性，所以在 main.js 脚本文件中根本无法访问到模块文件中的任何变量。那么 requirejs 是如何解决这个问题的呢？我们知道在 requirejs 中，任何文件都是一个模块，一个模块也就是一个文件，包括主模块 main.js，下面我们看一段 requirejs 的源码：

 1 /** 2  * Creates the node for the load command. Only used in browser envs. 3  */ 4 req.createNode = function (config, moduleName, url) { 5     var node = config.xhtml ? 6             document.createElementNS('http://www.w3.org/1999/xhtml', 'html:script') : 7             document.createElement('script'); 8     node.type = config.scriptType || 'text/javascript'; 9     node.charset = 'utf-8';10     node.async = true;11     return node;12 };

　　在这段代码中我们可以看出， requirejs 导入模块的方式实际就是创建脚本标签，一切的模块都需要经过这个方法创建。那么 requirejs 又是如何处理异步加载的呢？传说江湖上最高深的医术不是什么灵丹妙药，而是以毒攻毒，requirejs 也深得其精髓，既然动态加载是异步的，那么我也用异步来对付你，使用 onload 事件来处理回调函数：

 1 //In the browser so use a script tag 2 node = req.createNode(config, moduleName, url); 3  4 node.setAttribute('data-requirecontext', context.contextName); 5 node.setAttribute('data-requiremodule', moduleName); 6  7 //Set up load listener. Test attachEvent first because IE9 has 8 //a subtle issue in its addEventListener and script onload firings 9 //that do not match the behavior of all other browsers with10 //addEventListener support, which fire the onload event for a11 //script right after the script execution. See:12 //13 //UNFORTUNATELY Opera implements attachEvent but does not follow the script14 //script execution mode.15 if (node.attachEvent &&16     //Check if node.attachEvent is artificially added by custom script or17     //natively supported by browser18     //read 19     //if we can NOT find [native code] then it must NOT natively supported.20     //in IE8, node.attachEvent does not have toString()21     //Note the test for "[native code" with no closing brace, see:22     //23     !(node.attachEvent.toString && node.attachEvent.toString().indexOf('[native code') < 0) &&24     !isOpera) {25     //Probably IE. IE (at least 6-8) do not fire26     //script onload right after executing the script, so27     //we cannot tie the anonymous define call to a name.28     //However, IE reports the script as being in &#39;interactive&#39;29     //readyState at the time of the define call.30     useInteractive = true;31 32     node.attachEvent(&#39;onreadystatechange&#39;, context.onScriptLoad);33     //It would be great to add an error handler here to catch34     //404s in IE9+. However, onreadystatechange will fire before35     //the error handler, so that does not help. If addEventListener36     //is used, then IE will fire error before load, but we cannot37     //use that pathway given the connect.microsoft.com issue38     //mentioned above about not doing the &#39;script execute,39     //then fire the script load event listener before execute40     //next script&#39; that other browsers do.41     //Best hope: IE10 fixes the issues,42     //and then destroys all installs of IE 6-9.43     //node.attachEvent(&#39;onerror&#39;, context.onScriptError);44 } else {45     node.addEventListener(&#39;load&#39;, context.onScriptLoad, false);46     node.addEventListener(&#39;error&#39;, context.onScriptError, false);47 }48 node.src = url;

　　注意在这段源码当中的监听事件，既然动态加载脚本是异步的的，那么干脆使用 onload 事件来处理回调函数，这样就保证了在我们的程序执行前依赖的模块一定会提前加载完成。因为在事件队列里， onload 事件是在脚本加载完成之后触发的，也就是在事件队列里面永远处在依赖模块的后面，例如我们执行：

1 require(["module"], function (module) {2     //do something3 });

　　那么在事件队列里面的相对顺序会是这样：

　　相信细心的同学可能会注意到了，在源码当中不光光有 onload 事件，同时还添加了一个 onerror 事件，我们在使用 requirejs 的时候也可以定义一个模块加载失败的处理函数，这个函数在底层也就对应了 onerror 事件。同理，其和 onload 事件一样是一个异步的事件，同时也永远发生在模块加载之后。

　　谈到这里 requirejs 的核心模块思想也就一目了然了，不过其中的过程还远不直这些，博主只是将模块加载的实现思想抛了出来，但 requirejs 的具体实现还要复杂的多，比如我们定义模块的时候可以导入依赖模块，导入模块的时候还可以导入多个依赖，具体的实现方法我就没有深究过了， requirejs 虽然不大，但是源码也是有两千多行的... ...但是只要理解了动态加载脚本的原理过后，其思想也就不难理解了，比如我现在就可以想到一个简单的实现多个模块依赖的方法，使用计数的方式检查模块是否加载完全：

 1 function myRequire(deps, callback){ 2     //记录模块加载数量 3     var ready = 0; 4     //创建脚本标签 5     function load (url) { 6         var script = document.createElement("script"); 7         script.type = 'text/javascript'; 8         script.async = true; 9         script.src = url;10         return script;11     }12     var nodes = [];13     for (var i = deps.length - 1; i >= 0; i--) {14         nodes.push(load(deps[i]));15     }16     //加载脚本17     for (var i = nodes.length - 1; i >= 0; i--) {18         nodes[i].addEventListener("load", function(event){19             ready++;20             //如果所有依赖脚本加载完成，则执行回调函数；21             if(ready === nodes.length){22                 callback()23             }24         }, false);25         document.head.appendChild(nodes[i]);26     }27 }

　　实验一下是否能够工作：

1 myRequire(["module/module1.js?1.1.11", "module/module2.js?1.1.11", "module/module3.js?1.1.11"], function(){2     console.log("ready!");3 });

はい、仕事です！

概要

requirejs ローディング モジュールの中心的なアイデアは、動的にロードされるスクリプトと onload イベントの非同期の性質を利用して、ウイルスを毒と戦うことです。スクリプトのロードに関しては、次の点に注意する必要があります。ポイント:

• HTML での