JavaScript の動的読み込みに関する前回の記事では、同期読み込み戦略を使用して コードをコピー コードは次のとおりです。 Using("jquery"); $("#ID"); (){ var user = new User(); user.show() }; JS はシングルスレッドであるため、同期戦略には、後続のコードの実行が妨げられたり、ブラウザがフリーズしたりするなど、多くの欠点が生じます。 非同期戦略を使用して、後で主要なパッケージを使用する効果を達成することは困難です。これはコールバックの形式でのみ実行できますが、これは、JQuery の getScript 関数で実現できるものではありません。 少し考えた結果、非同期でパケットをブートする問題を解決する方法を最終的に思いつきました。まず、このソリューションを採用した後のプログラミング方法を見てみましょう。 コードをコピー コードは次のとおりです: </span><script type="text; /javascript" > </div>Using("jq"); <div class="codebody" id="code76705">Using("jq"); <br>Using("Http"); <br><br>Using.asyn(function(){ <br>$ ("#panel").click(function(){ <br>alert("jquery オブジェクトの使用"); <br>}); <br>Using.fetch("Http",function(){ <br>var http = new using.Modules.Http(); <br>http.show() <br>}); </ script> <br><br> <br>上記のコードに示されているように、全体的には、jquery を 2 回インポートするだけで、処理が必要なのは明らかです。この関数の具体的な目的は後で分析します。 <br>ご存知のとおり、非同期戦略は現在の操作には影響しません。したがって、インポートしたパッケージがロードされており、後続のコードも実行中であり、両者の間に依存関係が存在する場合、例外として、この 2 つの関係を解決するにはどうすればよいでしょうか? 現時点での唯一の解決策はコールバック関数です。 <br><br>使用の考え方によれば、パイロットパッケージの後に使用する必要があります。非同期ソリューションは、モジュールを使用する前に実際にファイルを取得するのではなく、必要な JS ファイルを配列などのオブジェクトに配置し、実際に必要なときにそれらを 1 つずつロードすることです。見てみましょう<br><br><br><br> </div>コードをコピーします<br><br><br> コードは次のとおりです。<br><br> <div class="codetitle">Using("jq "); <span>Using("jq"); <a style="CURSOR: pointer" data="54678" class="copybut" id="copybut54678" onclick="doCopy('code54678')">Using("Http"); <u></u> </a> の仕組み。前のコード</span> </div> <div class="codebody" id="code54678"> <br><br>コードをコピー<br><br> </div> コードは次のとおりです。<br><br> <div class="codetitle">var moduleList = [] <span> <a style="CURSOR: pointer" data="94199" class="copybut" id="copybut94199" onclick="doCopy('code94199')">Using.fn = using.prototype; <u>Using.fn.initialize= function(module){ </u>!this.exist(moduleList,module) : null; 🎜> } </a></span> </div>このコードは、Using のプロトタイプの初期化メソッドであり、コンテキストを省略してインターセプトする必要があるモジュールを配置することが主な役割であることがわかります。 moduleList にロードされ、現在ロードする必要があるモジュールが moduleList に含まれている場合は、操作は実行されません。 <div class="codebody" id="code94199"> <br>それで、いつロードされるのでしょうか?これは、前述の using.asyn メソッドを使用します。これは、ファイルを非同期でロードする必要があることを using に通知するもので、ロードの完了後に、Using.asyn 関数のコールバック関数が呼び出されます。前のコードと同じ <br><br><br><br><br> コードをコピーします <br> </div> <br> コードは次のとおりです。 <br><br> <br>Using.asyn = function(callback) { <div class="codetitle">Using.fn.script(callback); <span>} <a style="CURSOR: pointer" data="75637" class="copybut" id="copybut75637" onclick="doCopy('code75637')"><u> </u>Using.asyn 関数が using を呼び出していることは、コードから簡単に確認できます。 fn.script 関数と will にコールバック関数が渡されます。当然のことながら、それがどのように機能するかを確認する必要があります。 </a></span> </div> <div class="codebody" id="code75637"> <br>コードをコピー<br><br><br> コードは次のとおりです:</div> <div class="codebody" id="code57883"> <br>Using.fn.script = function(callback){ <br>var _this = this, <br>complete = 0, <br>count = moduleList.length, <br>len = 0; <br>if(count < 1){ <BR>return; <BR>} <br><br>var loadScript = function(){ <BR>while(len < count){ <BR>_this.ajax(Using .Config[moduleList[len]],function(){ <BR>complete ; <BR>if(complete >= count){ <br>callback(); <br>} <br>}); <br> len ; <br>} <br>} <br>!Using.Config ? _this.ajax("/js/config",function(){ <br>loadScript(); <br>}) : loadScript(); <br>} <br> </div> <br>First look at Using.Config, which is the module configuration file mentioned in the previous article, to notify Using to load the corresponding module file through the module name. <br><br>Secondly, the module file is loaded through the internal function loadScript. A counter complete is used to determine how many modules have been loaded. When all modules are loaded, the callback function is called. <br><br>Integrating the above code, the whole idea is to use the Using object to import the package and record it, notify Using to perform asynchronous loading through Using.asyn, and finally use Using.fn.script to implement asynchronous loading and execute callbacks function. <br><br> Also noticed the Using.fetch function. The entire function is mainly to solve the problem of files that need to be loaded when the code runs to a certain extent or meets a certain requirement. Similar to the $.getScript file, it will be judged before loading. Determine whether the currently required module has been loaded, and if so, execute the callback function directly. <br><br>This change to UsingJS is mainly to change the synchronization strategy to an asynchronous strategy, but there are still many problems left, such as $(document).ready, which is only executed when the document is loaded. , in itself, it is not difficult to achieve this effect, but when writing the code, my mind is messy, and I can't solve the problem of loading the same module multiple times due to asynchronous calls when Using.asyn is called multiple times, or each This is an inexplicable problem, and I have no clue for a while, so I postpone this problem and solve it step by step. <br><br>There is also the order of the imported packages, which cannot be in any order. At that time, I also wanted to make arbitrary imported packages. By adding dependencies, I could solve the loading order by code, but I thought that there was nothing wrong with this approach. It has great practical significance. The coder must know the dependency between files. If the coder does not know the loading order of the files, even if he uses the <script> tag form, errors will still occur. Creating a dependency relationship will not only increase the The volume of Using, more importantly, is doing a repetitive thing. I don’t know if this is the right understanding.
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
