require.js使用方法的簡單代碼講解筆記
更新時間：2022年12月17日 16:38:47 投稿：yin
頁面需要加載多個js文件時，加載時瀏覽器會停止網(wǎng)頁渲染，加載文件越多，網(wǎng)頁失去響應(yīng)的時間就會越長；由于js文件之間存在依賴關(guān)系，必須嚴格保證加載順序，當依賴關(guān)系很復(fù)雜的時候，代碼的編寫和維護都會變得困難。這種情況下require.js插件應(yīng)運而生。
頁面需要加載多個js文件時，加載時瀏覽器會停止網(wǎng)頁渲染，加載文件越多，網(wǎng)頁失去響應(yīng)的時間就會越長；由于js文件之間存在依賴關(guān)系，必須嚴格保證加載順序，當依賴關(guān)系很復(fù)雜的時候，代碼的編寫和維護都會變得困難。這種情況下require.js插件應(yīng)運而生。
目的：
這個插件的體積非常小14k左右，主要是解決目前我們js文件引入臃腫的問題，它可以將我們需要的js文件定義成一個模塊的方式，只要我們想引入某個模塊，我們聲明引入就可以了。而且是異步加載的模式，對瀏覽器體驗也非常好，不會阻塞渲染。
基本API
require定義三個變量：define,require,requirejs，其中require === requirejs，一般使用require更簡短
- define 從名字就可以看出這個api是用來定義一個模塊
- require 加載依賴模塊，并執(zhí)行加載完后的回調(diào)函數(shù)
第一步：a.js定義
define(function(){
function fun1(){
alert("it works");
}
fun1();
})第二步：引入這個模塊
require(["js/a"],function(){
alert("load finished");
})注意：a.js引入在js文件下，同時a.js中后綴不要了。
加載文件
加載本地是上面的那個樣子，如果我們要加載其他網(wǎng)站要用到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文件
相關(guān)文章
如今最常用的JavaScript庫之一是RequireJS。最近我參與的每個項目，都用到了RequireJS，或者是我向它們推薦了增加RequireJS。在這篇文章中，我將描述RequireJS是什么，以及它的一些基礎(chǔ)場景。 2016-04-04
typescript封裝消息提示框插件ew-message使用實戰(zhàn)
這篇文章主要為大家介紹了typescript封裝消息提示框插件ew-message使用實戰(zhàn),有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-11-11
這篇文章主要介紹了Underscore.js常用方法總結(jié),本文講解了Underscore.js概述、在node.js下安裝、與集合有關(guān)的方法、與對象有關(guān)的方法、與函數(shù)相關(guān)的方法等內(nèi)容,需要的朋友可以參考下2015-02-02
Typescript使用裝飾器實現(xiàn)接口字段映射與Mock實例
這篇文章主要為大家介紹了Typescript使用裝飾器實現(xiàn)接口字段映射與Mock實例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-04-04
這篇文章主要為大家介紹了TypeScript類型實現(xiàn)加減乘除示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-04-04
一般情況下web項目的瀏覽器下載文件，都是使用form表單或者ajax向后端提交數(shù)據(jù)，發(fā)送請求，后端文件的URL地址或者二進制文件流。這篇文章主要介紹了使用JS?的download庫在瀏覽器直接下載文件。2022-12-12
layui中的layer彈出層有很多提示框，但是我們使用最多的應(yīng)該就幾種，layer.msg、layer.alert、layer.open、layer.load等。layer?有內(nèi)置的skin：layui-layer-lan，layui-layer-molv，可以直接使用。skin不僅允許你傳入layer內(nèi)置的樣式class名，可以自定義class名。2023-06-06
數(shù)據(jù)結(jié)構(gòu)TypeScript之棧和隊列詳解
這篇文章主要介紹了數(shù)據(jù)結(jié)構(gòu)TypeScript之棧和隊列詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-01-01
TypeScript 高級數(shù)據(jù)類型實例詳解
這篇文章主要為大家介紹了TypeScript 高級數(shù)據(jù)類型實例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-01-01
這篇文章主要為大家介紹了TS 中的類型推斷與放寬實例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-10-10