RequireJS入門一之實(shí)現(xiàn)第一個(gè)例子
為什么學(xué)習(xí)RequireJS?
像我這種菜鳥(niǎo),會(huì)提到海量文章里提到的AMD、JS模塊化編程、異步... ... 等等
RequireJS會(huì)讓你以不同于往常的方式去寫(xiě)JavaScript。你將不再使用script標(biāo)簽在HTML中引入JS文件,以及不用通過(guò)script標(biāo)簽順序去管理依賴關(guān)系。
RequireJS是一個(gè)Javascript 文件和模塊框架,它可以幫我們?nèi)ス芾韏s代碼(我的理解)。
深入學(xué)習(xí),我們便會(huì)被迫接受一系列的名詞:data-main、require、define、baseUrl、paths、shims、deps。。。等等;
總之,很多文章都在向我們推銷一些自己都說(shuō)不明白的名詞和概念。
簡(jiǎn)單點(diǎn),現(xiàn)在我們要做一個(gè)簡(jiǎn)單的需求,用RequireJS管理我們的js代碼,還要能使用jquery!
1.構(gòu)建一個(gè)web工程,跑起來(lái)!
里面文件如圖:
這里面有好多坑,所以我把文件都放在文件根目錄,先排除掉這些小問(wèn)題!
其中jquery.js和require.js是需要去網(wǎng)站下載的,請(qǐng)自行百度。
2. 在index.jsp中添加script標(biāo)簽
可以在<body>里添加一個(gè)標(biāo)簽 <p>RequireJS異步加載測(cè)試</p>
3. 補(bǔ)充main.js文件
require.config({
paths: {
jquery: 'jquery-2.1.1'
}
});
require(['jquery'], function($) {
alert($().jquery);
});
4.跑起來(lái)~
你會(huì)看到彈出框,頁(yè)面已經(jīng)渲染顯示了 “RequireJS異步加載測(cè)試” 。
小結(jié):
a. RequireJS由James Burke創(chuàng)建,他也是AMD規(guī)范的創(chuàng)始人。它是一個(gè)工具庫(kù),用于客戶端的模塊管理。
從本例體現(xiàn)出的:
1. 彈出alert的時(shí)候頁(yè)面同時(shí)也被渲染,體現(xiàn)了異步加載的功能,傳統(tǒng)放在head中的寫(xiě)法會(huì)造成阻塞,只有點(diǎn)擊確定后才能渲染頁(yè)面。
2. 頁(yè)面只需要引入一個(gè)require.js,不需要再引入其他繁多復(fù)雜的js代碼,剩下的工作交給RequireJS框架來(lái)做!
b. 學(xué)習(xí)之前先了解AMD規(guī)范,AMD通過(guò)define來(lái)定義模塊,基本模式:define("id",[deps1,deps2,...],callback);
為什么本例沒(méi)有define就可以跑起來(lái)? 因?yàn)閖query提供了對(duì)AMD的支持。path對(duì)象即是用來(lái)引入各種模塊的。
普通的js代碼可否被RequireJS管理? 可以,使用shims來(lái)加載這些資源!
c. 總結(jié)以后的編碼思路:
Xx.jsp Xx.js(同main.js) 通過(guò) require.config 引入各種js模塊(資源);require加載所需模塊,并在回調(diào)函數(shù)中傳入對(duì)應(yīng)變量,以方便在其中直接調(diào)用各模塊中的函數(shù)和變量。
d. 自己實(shí)現(xiàn): 頁(yè)面加一個(gè)按鈕;在main.js中加入juqery的click監(jiān)聽(tīng)事件,測(cè)試是否監(jiān)聽(tīng)成功!
e. 遺留問(wèn)題:路徑問(wèn)題,肯定不能在根目錄,不過(guò)這都不是事兒!
本文就是關(guān)于RequireJS入門一之實(shí)現(xiàn)第一個(gè)例子的全部敘述,希望對(duì)大家有所幫助。
- 一篇文章掌握RequireJS常用知識(shí)
- 教你5分鐘學(xué)會(huì)用requirejs(必看篇)
- RequireJS多頁(yè)面應(yīng)用實(shí)例分析
- 在Html中使用Requirejs進(jìn)行模塊化開(kāi)發(fā)實(shí)例詳解
- RequireJS使用注意細(xì)節(jié)
- 使用requirejs模塊化開(kāi)發(fā)多頁(yè)面一個(gè)入口js的使用方式
- requirejs + vue 項(xiàng)目搭建詳解
- 在JavaScript應(yīng)用中使用RequireJS來(lái)實(shí)現(xiàn)延遲加載
- 詳解RequireJS按需加載樣式文件
- 使用RequireJS庫(kù)加載JavaScript模塊的實(shí)例教程
- RequireJS用法簡(jiǎn)單示例
相關(guān)文章
利用javascript實(shí)現(xiàn)一些常用軟件的下載導(dǎo)航
利用javascript實(shí)現(xiàn)一些常用軟件的下載導(dǎo)航,非常不錯(cuò)的應(yīng)用,思路值得借鑒,沒(méi)看過(guò)的朋友可以看下。2009-08-08
探索JavaScript函數(shù)的無(wú)限可能(函數(shù)基本概念)
JavaScript中的函數(shù)是一種重要的編程概念,它允許我們封裝可重用的代碼塊,并在需要時(shí)進(jìn)行調(diào)用,本文將深入介紹JavaScript函數(shù)的各個(gè)方面,包括函數(shù)定義和調(diào)用、參數(shù)和返回值、作用域和閉包、高階函數(shù)以及常見(jiàn)的函數(shù)應(yīng)用場(chǎng)景,感興趣的朋友一起看看吧2023-08-08
基于IE下ul li 互相嵌套時(shí)的bug,排查,解決過(guò)程以及心得介紹
昨天到今天上午都在查一個(gè)IE的bug,情形如下:通過(guò)異步請(qǐng)求獲取json數(shù)據(jù),然后拼接成html代碼,最后使用innerHTML類似方法插入到文檔流中。在chrome下和IE8\9下均表現(xiàn)正常。結(jié)果已進(jìn)入IE7,瀏覽器就崩潰,更別提IE6了,也是一副死給你看的樣子。于是我就把這個(gè)bug定位于IE6\7,其實(shí)這時(shí)候我已經(jīng)陷入了這個(gè)固定思維模式中,浪費(fèi)了不少時(shí)間2013-05-05
JavaScript數(shù)組常用方法解析及數(shù)組扁平化
這篇文章主要介紹了JavaScript數(shù)組常用方法解析及數(shù)組扁平化,數(shù)組作為在開(kāi)發(fā)中常用的集合,除了for循環(huán)遍歷以外,還有很多內(nèi)置對(duì)象的方法,包括map,以及數(shù)組篩選元素filter等2022-07-07
Bootstrap popover 實(shí)現(xiàn)鼠標(biāo)移入移除顯示隱藏功能方法
下面小編就為大家分享一篇Bootstrap popover 實(shí)現(xiàn)鼠標(biāo)移入移除顯示隱藏功能方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-01-01
uniapp實(shí)現(xiàn)注冊(cè)發(fā)送獲取驗(yàn)證碼功能
隨著網(wǎng)絡(luò)的發(fā)達(dá),總會(huì)有人惡意注冊(cè)網(wǎng)站,而使用輸入驗(yàn)證碼功能可以有效的阻止這一類現(xiàn)象的發(fā)生,下面這篇文章主要給大家介紹了關(guān)于uniapp實(shí)現(xiàn)注冊(cè)發(fā)送獲取驗(yàn)證碼功能的相關(guān)資料,需要的朋友可以參考下2022-11-11
JavaScript中Number.isNaN 和 isNaN 的區(qū)別詳解
本文和大家分享一個(gè)前幾天寫(xiě)代碼踩的坑,筆者在業(yè)務(wù)邏輯中需要對(duì)一個(gè)值進(jìn)行NaN的判斷,由于筆者的不嚴(yán)謹(jǐn),使用了isNaN,從而引起B(yǎng)ug,也正是因?yàn)檫@個(gè),筆者才知道了isNaN和Number.isNaN的區(qū)別,所以本文就和大家聊聊它們的區(qū)別2023-09-09

