RequireJS入門一之實(shí)現(xiàn)第一個(gè)例子
為什么學(xué)習(xí)RequireJS？
像我這種菜鳥，會(huì)提到海量文章里提到的AMD、JS模塊化編程、異步... ... 等等
RequireJS會(huì)讓你以不同于往常的方式去寫JavaScript。你將不再使用script標(biāo)簽在HTML中引入JS文件，以及不用通過script標(biāo)簽順序去管理依賴關(guān)系。
RequireJS是一個(gè)Javascript 文件和模塊框架，它可以幫我們?nèi)ス芾韏s代碼（我的理解）。
深入學(xué)習(xí)，我們便會(huì)被迫接受一系列的名詞：data-main、require、define、baseUrl、paths、shims、deps。。。等等；
總之，很多文章都在向我們推銷一些自己都說不明白的名詞和概念。
簡(jiǎn)單點(diǎn)，現(xiàn)在我們要做一個(gè)簡(jiǎn)單的需求，用RequireJS管理我們的js代碼，還要能使用jquery！
1.構(gòu)建一個(gè)web工程，跑起來！
里面文件如圖：
這里面有好多坑，所以我把文件都放在文件根目錄，先排除掉這些小問題！
其中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.跑起來~
你會(huì)看到彈出框，頁面已經(jīng)渲染顯示了 “RequireJS異步加載測(cè)試” 。
小結(jié)：
a. RequireJS由James Burke創(chuàng)建，他也是AMD規(guī)范的創(chuàng)始人。它是一個(gè)工具庫，用于客戶端的模塊管理。
從本例體現(xiàn)出的：
1. 彈出alert的時(shí)候頁面同時(shí)也被渲染，體現(xiàn)了異步加載的功能，傳統(tǒng)放在head中的寫法會(huì)造成阻塞，只有點(diǎn)擊確定后才能渲染頁面。
2. 頁面只需要引入一個(gè)require.js，不需要再引入其他繁多復(fù)雜的js代碼，剩下的工作交給RequireJS框架來做！
b. 學(xué)習(xí)之前先了解AMD規(guī)范，AMD通過define來定義模塊，基本模式：define("id",[deps1,deps2,...],callback);
為什么本例沒有define就可以跑起來？ 因?yàn)閖query提供了對(duì)AMD的支持。path對(duì)象即是用來引入各種模塊的。
普通的js代碼可否被RequireJS管理？ 可以，使用shims來加載這些資源！
c. 總結(jié)以后的編碼思路：
Xx.jsp Xx.js(同main.js) 通過 require.config 引入各種js模塊（資源）；require加載所需模塊，并在回調(diào)函數(shù)中傳入對(duì)應(yīng)變量，以方便在其中直接調(diào)用各模塊中的函數(shù)和變量。
d. 自己實(shí)現(xiàn)： 頁面加一個(gè)按鈕；在main.js中加入juqery的click監(jiān)聽事件，測(cè)試是否監(jiān)聽成功！
e. 遺留問題：路徑問題，肯定不能在根目錄，不過這都不是事兒！
本文就是關(guān)于RequireJS入門一之實(shí)現(xiàn)第一個(gè)例子的全部敘述，希望對(duì)大家有所幫助。
- 一篇文章掌握RequireJS常用知識(shí)
- 教你5分鐘學(xué)會(huì)用requirejs(必看篇)
- RequireJS多頁面應(yīng)用實(shí)例分析
- 在Html中使用Requirejs進(jìn)行模塊化開發(fā)實(shí)例詳解
- RequireJS使用注意細(xì)節(jié)
- 使用requirejs模塊化開發(fā)多頁面一個(gè)入口js的使用方式
- requirejs + vue 項(xiàng)目搭建詳解
- 在JavaScript應(yīng)用中使用RequireJS來實(shí)現(xiàn)延遲加載
- 詳解RequireJS按需加載樣式文件
- 使用RequireJS庫加載JavaScript模塊的實(shí)例教程
- RequireJS用法簡(jiǎn)單示例
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了原生JS實(shí)現(xiàn)的輪播效果，通過改變圖片的透明度來實(shí)現(xiàn)輪播的效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
JS電話號(hào)碼驗(yàn)證是比較常的一種驗(yàn)證，下邊給出一個(gè)JavaScript驗(yàn)證電話號(hào)碼的小例子。國(guó)內(nèi)固定電話都是七位或8位的數(shù)字組成的，還可以帶有長(zhǎng)途的區(qū)號(hào)。2015-09-09
利用javascript實(shí)現(xiàn)一些常用軟件的下載導(dǎo)航
利用javascript實(shí)現(xiàn)一些常用軟件的下載導(dǎo)航，非常不錯(cuò)的應(yīng)用，思路值得借鑒，沒看過的朋友可以看下。2009-08-08
探索JavaScript函數(shù)的無限可能(函數(shù)基本概念)
JavaScript中的函數(shù)是一種重要的編程概念，它允許我們封裝可重用的代碼塊，并在需要時(shí)進(jìn)行調(diào)用，本文將深入介紹JavaScript函數(shù)的各個(gè)方面，包括函數(shù)定義和調(diào)用、參數(shù)和返回值、作用域和閉包、高階函數(shù)以及常見的函數(shù)應(yīng)用場(chǎng)景，感興趣的朋友一起看看吧2023-08-08
基于IE下ul li 互相嵌套時(shí)的bug,排查,解決過程以及心得介紹
昨天到今天上午都在查一個(gè)IE的bug，情形如下：通過異步請(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ù)組作為在開發(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ì)大家有所幫助。一起跟隨小編過來看看吧2018-01-01
這篇文章主要介紹了微信小程序利用Canvas繪制圖片和豎排文字詳解，合成圖片應(yīng)該按照 Canvas 的文檔來做都沒什么問題，主要是有個(gè)豎排文字的需求，這里和大家分享一下,需要的朋友可以參考下2019-06-06
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è)前幾天寫代碼踩的坑,筆者在業(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