瀏覽器關閉javascript,自制 require 函數:讓瀏覽器輕松實現 js 文件按需加載

 2023-10-05 阅读 21 评论 0

摘要:唉?這種文章你也點進來看,你不知道有 LABjs、RequireJS、SeaJS... 這些庫嗎? 反正我是沒用過這些庫,什么 AMD 、CMD 哪來那么多術語... 前端的庫太多了,要看各種亂七八糟的文檔,看文檔就想睡覺,就像學一門新語言一樣࿰

唉?這種文章你也點進來看,你不知道有 LABjs、RequireJS、SeaJS... 這些庫嗎?

反正我是沒用過這些庫,什么 AMD 、CMD 哪來那么多術語... 前端的庫太多了,要看各種亂七八糟的文檔,看文檔就想睡覺,就像學一門新語言一樣,好煩啊,還不如自己寫一個庫呢。

劇透一下,實現這個功能只需要20行代碼。

好了,要怎么自己寫一個按需加載的庫呢,為了實現按需加載:

//這是我們要實現的功能,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 這個是我們要寫的庫

理一理思路

瀏覽器關閉javascript,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指向這個對象就行了。

js resolve、4、我不想把代碼都寫進一個ready里面,我要寫在很多個ready里面,加載完之后它們都能執行嗎?

A:不管多少個ready,沒加載完的時候,都會丟進一個隊列里面先保存著,所以我們需要一個隊列。

5、加載完的那個時刻觸發ready,那加載完之后我再寫的ready函數,就不執行嗎?

A:也會執行,所以,在加載完的那個時刻,我們將重寫ready函數。

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

A:....

執行方案

chrome瀏覽器導入js腳本、根據上訴思路,寫了一個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,一切正常。

版权声明:本站所有资料均为网友推荐收集整理而来,仅供学习和研究交流使用。

原文链接:https://hbdhgg.com/1/118179.html

发表评论:

本站为非赢利网站,部分文章来源或改编自互联网及其他公众平台,主要目的在于分享信息,版权归原作者所有,内容仅供读者参考,如有侵权请联系我们删除!

Copyright © 2022 匯編語言學習筆記 Inc. 保留所有权利。

底部版权信息