資訊專欄INFORMATION COLUMN
摘要：劇透一下，實(shí)現(xiàn)這個功能只需要行代碼。如何判斷文件已經(jīng)加載完畢可以在文件里執(zhí)行一個函數(shù)，通知大家，我已經(jīng)加載完了。
唉？這種文章你也點(diǎn)進(jìn)來看，你不知道有 LABjs、RequireJS、SeaJS... 這些庫嗎？
反正我是沒用過這些庫，什么 AMD 、CMD 哪來那么多術(shù)語... 前端的庫太多了，要看各種亂七八糟的文檔，看文檔就想睡覺，就像學(xué)一門新語言一樣，好煩啊，還不如自己寫一個庫呢。
劇透一下，實(shí)現(xiàn)這個功能只需要20行代碼。
好了，要怎么自己寫一個按需加載的庫呢，為了實(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 這個是我們要寫的庫
理一理思路
1、如何加載str.js文件呢？
A：我們可以插入一個，這樣不僅加載了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行代碼能完成嗎？
執(zhí)行方案A：....
根據(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é)果
ok，一切正常。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/80992.html
摘要：隨著承擔(dān)地職責(zé)越來越大，模塊化開發(fā)的需求越來越急迫。我們可以把當(dāng)成是模塊化標(biāo)準(zhǔn)的實(shí)現(xiàn)方案，但的功能不僅限于此。支持多種模塊使用方式，包括的。下面介紹一下在工程中常用的。最后一個的輸出就是我們最終要的結(jié)果。在文件有值的情況下，是必要的。 由于web應(yīng)用擴(kuò)展地得極其迅猛，前端技術(shù)也是日新月異，前端的苦不是有多難學(xué)，而是我剛學(xué)完，這東西就被淘汰了（手動哭臉）?？蚣芊矫嫖覀冇衯ue、react...
摘要：但是瀏覽器是不識別這個關(guān)鍵詞的所以會對的代碼進(jìn)行解釋首先給設(shè)定導(dǎo)出的值如果是會直接賦值給如果是其他形式則給的導(dǎo)出的設(shè)定一個該的返回值就是導(dǎo)出的結(jié)果而對于來說整個執(zhí)行過程其實(shí)過程和是一樣的。 最近由于一篇分享手淘過年項目中采用到的前端技術(shù)的影響,重新研究了一下項目中CSS的架構(gòu).本來打算寫一篇文章,但是寫到一半突然發(fā)現(xiàn)自己像在寫文檔介紹一樣,所以后來就放棄了。但是覺得過程中研究的 Web...
摘要：模塊化總結(jié)最近重新復(fù)習(xí)的模塊化的相關(guān)知識，總結(jié)一下，僅供自己理解和大家參考。模塊化的優(yōu)點(diǎn)可維護(hù)性根據(jù)定義，每個模塊都是獨(dú)立的。良好設(shè)計的模塊會盡量與外部的代碼撇清關(guān)系，以便于獨(dú)立對其進(jìn)行改進(jìn)和維護(hù)。 模塊化總結(jié) 最近重新復(fù)習(xí)的模塊化的相關(guān)知識，總結(jié)一下，僅供自己理解和大家參考。 模塊化的優(yōu)點(diǎn) 可維護(hù)性：根據(jù)定義，每個模塊都是獨(dú)立的。良好設(shè)計的模塊會盡量與外部的代碼撇清關(guān)系，以便于獨(dú)立...
摘要：可維護(hù)性根據(jù)定義，每個模塊都是獨(dú)立的。良好設(shè)計的模塊會盡量與外部的代碼撇清關(guān)系，以便于獨(dú)立對其進(jìn)行改進(jìn)和維護(hù)。這標(biāo)志模塊化編程正式誕生。的模塊系統(tǒng)，就是參照規(guī)范實(shí)現(xiàn)的。對象就代表模塊本身。 javascript模塊化及webpack基本介紹 JavaScript 模塊化發(fā)展歷程 什么是模塊化 ? 為什么要做Javascript模塊化? JavaScript 模塊化發(fā)展歷程 什么是模...
摘要：實(shí)際上程序應(yīng)當(dāng)只加載當(dāng)前渲染頁所需的，也就是大家說的代碼分拆將所有的代碼分拆成多個小包，在用戶瀏覽過程中按需加載。這里面有個方法這是提供的方法，這也是按需加載的核心方法。 注：本文使用的 react-router 版本為 2.8.1 React Router 是一個非常出色的路由解決方案，同時也非常容易上手。但是當(dāng)網(wǎng)站規(guī)模越來越大的時候，首先出現(xiàn)的問題是 Javascript 文件變得...
閱讀 4167·2021-11-22 13:52
閱讀 2086·2021-09-22 15:12
閱讀 1126·2019-08-30 15:53
閱讀 3458·2019-08-29 17:12
閱讀 2196·2019-08-29 16:23
閱讀 1659·2019-08-26 13:56
閱讀 1778·2019-08-26 13:44
閱讀 1891·2019-08-26 11:56
