自訂require函數讓瀏覽器按需載入Js文件

前言

本文介紹的是自訂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：我們可以插入一個 ，這不只載入了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;
}

   🜥

確認一下執行結果

/*
 
 这里你想写什么代码都行，推荐写在闭包里，以免污染全局变量
 
*/
JS['str.js'].export = '我是str';//这个是供大家使用的参数
JS['str.js'].ready();//执行这个函数，通知大家，str.js加载完毕了

   

ok，一切正常。