カスタム require 関数により、ブラウザーがオンデマンドで JS ファイルをロードできるようになります-jsチュートリアル-php.cn

カスタム require 関数により、ブラウザーがオンデマンドで JS ファイルをロードできるようになります

高洛峰

リリース： 2016-12-05 14:21:33

オリジナル

1554 人が閲覧しました

前書き

この記事では、ブラウザーがオンデマンドで JS ファイルをロードできるようにするカスタム require 関数を紹介します。では、オンデマンド読み込みを実現するには、どのようにライブラリを作成すればよいでしょうか。 us 関数を実装するには、require('str.js') のときに str.js ファイルを読み込み、str というオブジェクトを作成します。読み込みが完了したら、str オブジェクトの Ready メソッドで関数を実行します。

var str = require(&#39;str.js&#39;);
 
str.ready(show);
 
//要执行的函数
 
function show(res){
 
 console.log(res);
 
}
 
//str.js 文件，提供"我是str"字符串
 
//require.js 这个是我们要写的库

ログイン後にコピー

実装アイデア

1. str.js ファイルをロードするには?

A: を挿入すると、str.js がロードされるだけでなく、内部のコードがブラウザによって自動的に実行されるようにすることもできます。

2. str.js ファイルが読み込まれたことをどのように判断するか?

A: str.js ファイル内の関数を実行して、読み込みが完了したことを全員に通知できます。

3. require('str.js') はオブジェクトを返します。このオブジェクトは str.js にどのように関連付けられますか?

A: JS['str.js'] というオブジェクトを作成し、str がこのオブジェクトを指すようにすることができます。

4. すべてのコードを 1 つの Ready に書きたくないのですが、ロード後にすべてを実行できますか?

A: 準備完了のアイテムがどれだけロードされても、それらはキューに投げ込まれて最初に保存されるため、キューが必要です。

5. ロードが完了した時点でReadyがトリガーされますが、ロード後に書いたready関数は実行されないのでしょうか？

A: こちらも実行されますので、読み込みが完了した瞬間にready関数を書き換えます。

6. 20 行のコードでこれほど多くのことが完了できるでしょうか?

A: ....

実行計画

アピールのアイデアに基づいて、require.js ファイルを作成しました:

function require(path){
 
 //比如我们require(&#39;js/str.js&#39;) , 我们需要获取&#39;str.js&#39;这个文件名
 var filename = path.split(&#39;/&#39;);
 filename = filename[filename.length-1];
 
 JS[filename]={
  fn:[/*这个就是(4)中提到的那个队列*/],
 
  //这是(2)中提到的方法，str.js文件里面执行这个方法就代表它加载完了
  ready:function(){
   
   JS[filename].fn.forEach(function(fn){
    //JS[&#39;str.js&#39;].export就是str.js要提供的东西：&#39;我是str&#39;
    fn(JS[filename].export);
   });
 
   //这是(5)中提到的，ready函数的重写
   JS[filename].rt.ready = function(fn){
    fn(JS[filename].export);
   };
  },
  rt:{
   ready:function(fn){JS[filename].fn.push(fn)}//这个就是str对象的ready函数
  }
 };
 
 //这是(1)中提到的插入script标签
 var script = document.createElement(&#39;script&#39;);
 script.src = path;
 document.head.appendChild(script);
 
 //这是(3)中要返回的对象
 return JS[filename].rt;
}

ログイン後にコピー

次のステップは、str.js を作成することです:

/*
 
 这里你想写什么代码都行，推荐写在闭包里，以免污染全局变量
 
*/
JS[&#39;str.js&#39;].export = &#39;我是str&#39;;//这个是供大家使用的参数
JS[&#39;str.js&#39;].ready();//执行这个函数，通知大家，str.js加载完毕了

ログイン後にコピー

実行結果を確認してください

<!DOCTYPE html>
<script src="require.js"></script>
<script>
 var str = require(&#39;str/str.js&#39;);
 str.ready(show);
 
 setTimeout(function(){
  str.ready(show);
 },3000);
 
 //要执行的函数
 function show(res){
  console.log(res);
 }
</script>

ログイン後にコピー

OK、すべて正常です。