前言
本文介紹的是自定義require函數讓浏覽器實現按需加載Js文件，那到底要怎麼自己寫一個按需加載的庫呢
為了實現按需加載：
//這是我們要實現的功能，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：我們可以插入一個<script src="str.js"></script> ，這樣不僅加載了str.js，裡面的代碼還可以被浏覽器自動運行呢。
2、如何判斷str.js文件已經加載完畢？
A：可以在str.js文件裡執行一個函數，通知大家，我已經加載完了。
3、require('str.js')返回一個對象，這個對象要怎麼和str.js相關聯呢？
A：我們可以創建一個叫JS['str.js']的對象，使str指向這個對象就行了。
4、我不想把代碼都寫進一個ready裡面，我要寫在很多個ready裡面，加載完之後它們都能執行嗎？
A：不管多少個ready，沒加載完的時候，都會丟進一個隊列裡面先保存著，所以我們需要一個隊列。
5、加載完的那個時刻觸發ready，那加載完之後我再寫的ready函數，就不執行嗎？
A：也會執行，所以，在加載完的那個時刻，我們將重寫ready函數。
6、這麼多東西20行代碼能完成嗎？
A：....
執行方案
根據上訴思路，寫了一個require.js文件：
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，一切正常。
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流。