Heim > Artikel > Web-Frontend > Die benutzerdefinierte Require-Funktion ermöglicht es dem Browser, JS-Dateien bei Bedarf zu laden
Die benutzerdefinierte Require-Funktion ermöglicht es dem Browser, JS-Dateien bei Bedarf zu laden
- 高洛峰Original
- 2016-12-05 14:21:331556Durchsuche
Vorwort
In diesem Artikel wird die benutzerdefinierte Anforderungsfunktion vorgestellt, mit der der Browser Js-Dateien bei Bedarf laden kann.
Um dies zu erreichen Laden bei Bedarf:
//Dies ist die Funktion, die wir implementieren möchten. Wenn Sie require('str.js') benötigen, laden Sie die Datei str.js und erstellen Sie ein Objekt namens str Wenn der Ladevorgang abgeschlossen ist, führen Sie die Funktion „ready“ des str-Objekts in der Methode aus.
var str = require('str.js');
str.ready(show);
//要执行的函数
function show(res){
console.log(res);
}
//str.js 文件，提供"我是str"字符串
//require.js 这个是我们要写的库
Implementierungsideen
1. Wie lade ich die str.js-Datei?
A: Wir können ein c77b663b380843fff43fcd64be3fb50b2cacc6d41bbb37262a98f745aa00fbf0 einfügen, sodass nicht nur str.js geladen wird, sondern der Code darin auch automatisch ausgeführt werden kann der Browser.
2. Wie kann man beurteilen, ob die str.js-Datei geladen wurde?
A: Sie können eine Funktion in der Datei str.js ausführen, um alle zu benachrichtigen, dass ich mit dem Laden fertig bin.
3. require('str.js') gibt ein Objekt zurück. Wie kann dieses Objekt mit str.js verknüpft werden?
A: Wir können ein Objekt namens JS['str.js'] erstellen und str auf dieses Objekt verweisen.
4. Ich möchte nicht den gesamten Code in eine fertige Datei schreiben. Kann sie alle nach dem Laden ausgeführt werden?
A: Egal wie viele fertige Artikel geladen werden, sie werden zuerst in eine Warteschlange geworfen und gespeichert, also brauchen wir eine Warteschlange.
5. Ready wird in dem Moment ausgelöst, in dem der Ladevorgang abgeschlossen ist. Wird die Ready-Funktion, die ich nach dem Laden schreibe, nicht ausgeführt?
A: Es wird auch ausgeführt. Sobald der Ladevorgang abgeschlossen ist, werden wir die Ready-Funktion neu schreiben.
6. Können so viele Dinge in 20 Zeilen Code erledigt werden?
A: ....
Implementierungsplan
Basierend auf der Einspruchsidee habe ich eine require.js-Datei geschrieben:
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;
}
Der nächste Schritt besteht darin, str.js zu schreiben:
/* 这里你想写什么代码都行，推荐写在闭包里，以免污染全局变量 */ JS['str.js'].export = '我是str';//这个是供大家使用的参数 JS['str.js'].ready();//执行这个函数，通知大家，str.js加载完毕了
Ausführung bestätigen Ergebnis
<!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, alles ist normal.