前言
本文介紹的是自定義require函數(shù)讓瀏覽器實(shí)現(xiàn)按需加載Js文件，那到底要怎么自己寫一個(gè)按需加載的庫(kù)呢
為了實(shí)現(xiàn)按需加載：
//這是我們要實(shí)現(xiàn)的功能，require('str.js')時(shí)加載str.js文件，并創(chuàng)建一個(gè)叫str對(duì)象，等加載完畢之后執(zhí)行str對(duì)象的ready方法里的函數(shù)。
var str = require('str.js');str.ready(show);//要執(zhí)行的函數(shù)function show(res){ console.log(res);}//str.js 文件，提供"我是str"字符串//require.js 這個(gè)是我們要寫的庫(kù)實(shí)現(xiàn)思路
1、如何加載str.js文件呢？
A：我們可以插入一個(gè)<script src="str.js"></script> ，這樣不僅加載了str.js，里面的代碼還可以被瀏覽器自動(dòng)運(yùn)行呢。
2、如何判斷str.js文件已經(jīng)加載完畢？
A：可以在str.js文件里執(zhí)行一個(gè)函數(shù)，通知大家，我已經(jīng)加載完了。
3、require('str.js')返回一個(gè)對(duì)象，這個(gè)對(duì)象要怎么和str.js相關(guān)聯(lián)呢？
A：我們可以創(chuàng)建一個(gè)叫JS['str.js']的對(duì)象，使str指向這個(gè)對(duì)象就行了。
4、我不想把代碼都寫進(jìn)一個(gè)ready里面，我要寫在很多個(gè)ready里面，加載完之后它們都能執(zhí)行嗎？
A：不管多少個(gè)ready，沒(méi)加載完的時(shí)候，都會(huì)丟進(jìn)一個(gè)隊(duì)列里面先保存著，所以我們需要一個(gè)隊(duì)列。
5、加載完的那個(gè)時(shí)刻觸發(fā)ready，那加載完之后我再寫的ready函數(shù)，就不執(zhí)行嗎？
A：也會(huì)執(zhí)行，所以，在加載完的那個(gè)時(shí)刻，我們將重寫ready函數(shù)。
6、這么多東西20行代碼能完成嗎？
A：....
執(zhí)行方案
根據(jù)上訴思路，寫了一個(gè)require.js文件：
function require(path){ //比如我們r(jià)equire('js/str.js') , 我們需要獲取'str.js'這個(gè)文件名 var filename = path.split('/'); filename = filename[filename.length-1]; JS[filename]={ fn:[/*這個(gè)就是(4)中提到的那個(gè)隊(duì)列*/], //這是(2)中提到的方法，str.js文件里面執(zhí)行這個(gè)方法就代表它加載完了 ready:function(){ JS[filename].fn.forEach(function(fn){ //JS['str.js'].export就是str.js要提供的東西：'我是str' fn(JS[filename].export); }); //這是(5)中提到的，ready函數(shù)的重寫 JS[filename].rt.ready = function(fn){ fn(JS[filename].export); }; }, rt:{ ready:function(fn){JS[filename].fn.push(fn)}//這個(gè)就是str對(duì)象的ready函數(shù) } }; //這是(1)中提到的插入script標(biāo)簽 var script = document.createElement('script'); script.src = path; document.head.appendChild(script); //這是(3)中要返回的對(duì)象 return JS[filename].rt;}接下來(lái)，就差str.js的寫法了：
/* 這里你想寫什么代碼都行，推薦寫在閉包里，以免污染全局變量*/JS['str.js'].export = '我是str';//這個(gè)是供大家使用的參數(shù)JS['str.js'].ready();//執(zhí)行這個(gè)函數(shù)，通知大家，str.js加載完畢了
確認(rèn)一下執(zhí)行結(jié)果
<!DOCTYPE html><script src="require.js"></script><script> var str = require('str/str.js'); str.ready(show); setTimeout(function(){ str.ready(show); },3000); //要執(zhí)行的函數(shù) function show(res){ console.log(res); }</script>ok，一切正常。
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，如果有疑問(wèn)大家可以留言交流。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
