可能很多人看到這個題目就會想到LABjs、RequireJS、SeaJS... 這些庫，但無奈小編沒用過這些庫，什么 AMD 、CMD 哪來那么多術(shù)語... 前端的庫太多了，要看各種亂七八糟的文檔，好難啊，還不如自己寫一個庫呢。于是就有了這文章，有需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧。

前言

本文介紹的是自定義require函數(shù)讓瀏覽器實(shí)現(xiàn)按需加載Js文件，那到底要怎么自己寫一個按需加載的庫呢

為了實(shí)現(xiàn)按需加載：

//這是我們要實(shí)現(xiàn)的功能，require('str.js')時加載str.js文件，并創(chuàng)建一個叫str對象，等加載完畢之后執(zhí)行str對象的ready方法里的函數(shù)。

var str = require('str.js');

str.ready(show);

//要執(zhí)行的函數(shù)

function show(res){

 console.log(res);

}

//str.js 文件，提供"我是str"字符串

//require.js 這個是我們要寫的庫

實(shí)現(xiàn)思路

1、如何加載str.js文件呢？

A：我們可以插入一個<script src="str.js"></script> ，這樣不僅加載了str.js，里面的代碼還可以被瀏覽器自動運(yùn)行呢。

2、如何判斷str.js文件已經(jīng)加載完畢？

A：可以在str.js文件里執(zhí)行一個函數(shù)，通知大家，我已經(jīng)加載完了。

3、require('str.js')返回一個對象，這個對象要怎么和str.js相關(guān)聯(lián)呢？

A：我們可以創(chuàng)建一個叫JS['str.js']的對象，使str指向這個對象就行了。

4、我不想把代碼都寫進(jìn)一個ready里面，我要寫在很多個ready里面，加載完之后它們都能執(zhí)行嗎？

A：不管多少個ready，沒加載完的時候，都會丟進(jìn)一個隊列里面先保存著，所以我們需要一個隊列。

5、加載完的那個時刻觸發(fā)ready，那加載完之后我再寫的ready函數(shù)，就不執(zhí)行嗎？

A：也會執(zhí)行，所以，在加載完的那個時刻，我們將重寫ready函數(shù)。

6、這么多東西20行代碼能完成嗎？

A：....

執(zhí)行方案

根據(jù)上訴思路，寫了一個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文件里面執(zhí)行這個方法就代表它加載完了
  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)}//這個就是str對象的ready函數(shù)
  }
 };

 //這是(1)中提到的插入script標(biāo)簽
 var script = document.createElement('script');
 script.src = path;
 document.head.appendChild(script);

 //這是(3)中要返回的對象
 return JS[filename].rt;
}

接下來，就差str.js的寫法了：

/*

 這里你想寫什么代碼都行，推薦寫在閉包里，以免污染全局變量

*/
JS['str.js'].export = '我是str';//這個是供大家使用的參數(shù)
JS['str.js'].ready();//執(zhí)行這個函數(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é)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流。

您可能感興趣的文章: