require.js使用方法的簡單代碼講解筆記
更新時間：2022年12月17日 16:38:47 投稿：yin
頁面需要加載多個js文件時，加載時瀏覽器會停止網頁渲染，加載文件越多，網頁失去響應的時間就會越長；由于js文件之間存在依賴關系，必須嚴格保證加載順序，當依賴關系很復雜的時候，代碼的編寫和維護都會變得困難。這種情況下require.js插件應運而生。
頁面需要加載多個js文件時，加載時瀏覽器會停止網頁渲染，加載文件越多，網頁失去響應的時間就會越長；由于js文件之間存在依賴關系，必須嚴格保證加載順序，當依賴關系很復雜的時候，代碼的編寫和維護都會變得困難。這種情況下require.js插件應運而生。
目的：
這個插件的體積非常小14k左右，主要是解決目前我們js文件引入臃腫的問題，它可以將我們需要的js文件定義成一個模塊的方式，只要我們想引入某個模塊，我們聲明引入就可以了。而且是異步加載的模式，對瀏覽器體驗也非常好，不會阻塞渲染。
基本API
require定義三個變量：define,require,requirejs，其中require === requirejs，一般使用require更簡短
- define 從名字就可以看出這個api是用來定義一個模塊
- require 加載依賴模塊，并執(zhí)行加載完后的回調函數(shù)
第一步：a.js定義
define(function(){
function fun1(){
alert("it works");
}
fun1();
})第二步：引入這個模塊
require(["js/a"],function(){
alert("load finished");
})注意：a.js引入在js文件下，同時a.js中后綴不要了。
加載文件
加載本地是上面的那個樣子，如果我們要加載其他網站要用到require.config這個方法
require.config({
paths : {
"jquery" : ["http://libs.baidu.com/jquery/2.0.3/jquery", "js/jquery"],
"a" : "js/a"
}
})
require(["jquery","a"],function($){
$(function(){
alert("load finished");
})
})這樣配置后，當百度的jquery沒有加載成功后，會加載本地js目錄下的jquery
- 在使用requirejs時，加載模塊時不用寫.js后綴的，當然也是不能寫后綴
- 上面例子中的callback函數(shù)中發(fā)現(xiàn)有$參數(shù)，這個就是依賴的jquery模塊的輸出變量，如果你依賴多個模塊，可以依次寫入多個參數(shù)來使用：
講講data-main這個屬性：
<script data-main="js/main" src="js/require.js"></script>
其實就是引入require.js后，再引入js文件夾下的main.js文件
相關文章
這篇文章主要為大家介紹了TypeScript類型實現(xiàn)加減乘除示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-04-04
這篇文章主要為大家介紹了CesiumJS源碼雜談之從光到Uniform的使用示例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-04-04
rollup?cli開發(fā)全面系統(tǒng)性rollup源碼分析
這篇文章主要為大家介紹了rollup?cli開發(fā)全網系統(tǒng)性rollup源碼分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-01-01
這篇文章主要介紹了移動設備web開發(fā)首選框架：zeptojs介紹,他兼容jquery的API,所以學起來或用起來并不吃力,需要的朋友可以參考下2015-01-01
typescript封裝消息提示框插件ew-message使用實戰(zhàn)
這篇文章主要為大家介紹了typescript封裝消息提示框插件ew-message使用實戰(zhàn),有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-11-11
自動生成typescript類型聲明工具實現(xiàn)詳解
這篇文章主要為大家介紹了自動生成typescript類型聲明工具實現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-04-04
layui中的layer彈出層有很多提示框，但是我們使用最多的應該就幾種，layer.msg、layer.alert、layer.open、layer.load等。layer?有內置的skin：layui-layer-lan，layui-layer-molv，可以直接使用。skin不僅允許你傳入layer內置的樣式class名，可以自定義class名。2023-06-06
TypeScript使用命令行編譯器tsc或其他工具手動執(zhí)行編譯,在html使用s時編譯為JavaScript,那么有沒有辦法簡化過程,不編譯直接使用,本文介紹html中使用TypeScript的兩種方法2024-07-07
TS中Array.reduce提示沒有與此調用匹配的重載解析
這篇文章主要為大家介紹了TS中Array.reduce提示沒有與此調用匹配的重載解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-06-06
這篇文章主要為大家介紹了TS 中的類型推斷與放寬實例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-10-10