ホームページ > 記事 > ウェブフロントエンド > カスタム require 関数により、ブラウザーがオンデマンドで JS ファイルをロードできるようになります
カスタム require 関数により、ブラウザーがオンデマンドで JS ファイルをロードできるようになります
- 高洛峰オリジナル
- 2016-12-05 14:21:331595ブラウズ
前書き
この記事では、ブラウザーがオンデマンドで JS ファイルをロードできるようにするカスタム require 関数を紹介します。 では、オンデマンド読み込みを実現するには、どのようにライブラリを作成すればよいでしょうか。 us 関数を実装するには、require('str.js') のときに str.js ファイルを読み込み、str というオブジェクトを作成します。読み込みが完了したら、str オブジェクトの Ready メソッドで関数を実行します。
var str = require('str.js');
str.ready(show);
//要执行的函数
function show(res){
console.log(res);
}
//str.js 文件，提供"我是str"字符串
//require.js 这个是我们要写的库
実装アイデア
1. str.js ファイルをロードするには?
A: c77b663b380843fff43fcd64be3fb50b2cacc6d41bbb37262a98f745aa00fbf0 を挿入すると、str.js がロードされるだけでなく、内部のコードがブラウザによって自動的に実行されるようにすることもできます。
A: str.js ファイル内の関数を実行して、読み込みが完了したことを全員に通知できます。
A: JS['str.js'] というオブジェクトを作成し、str がこのオブジェクトを指すようにすることができます。
A: 準備完了のアイテムがどれだけロードされても、それらはキューに投げ込まれて最初に保存されるため、キューが必要です。
A: こちらも実行されますので、読み込みが完了した瞬間にready関数を書き換えます。
A: ....
function require(path){
//比如我们require('js/str.js') , 我们需要获取'str.js'这个文件名
var filename = path.split('/');
filename = filename[filename.length-1];
JS[filename]={
fn:[/*这个就是(4)中提到的那个队列*/],
//这是(2)中提到的方法，str.js文件里面执行这个方法就代表它加载完了
ready:function(){
JS[filename].fn.forEach(function(fn){
//JS['str.js'].export就是str.js要提供的东西：'我是str'
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('script');
script.src = path;
document.head.appendChild(script);
//这是(3)中要返回的对象
return JS[filename].rt;
}次のステップは、str.js を作成することです:
/* 这里你想写什么代码都行，推荐写在闭包里，以免污染全局变量 */ JS['str.js'].export = '我是str';//这个是供大家使用的参数 JS['str.js'].ready();//执行这个函数，通知大家，str.js加载完毕了
実行結果を確認してください
<!DOCTYPE html>
<script src="require.js"></script>
<script>
var str = require('str/str.js');
str.ready(show);
setTimeout(function(){
str.ready(show);
},3000);
//要执行的函数
function show(res){
console.log(res);
}
</script>
OK、すべて正常です。