為什麼學習RequireJS?
像我這種菜鳥,會提到海量文章裡提到的AMD、JS模塊化編程、異步... ... 等等
RequireJS會讓你以不同於往常的方式去寫JavaScript。你將不再使用script標簽在HTML中引入JS文件,以及不用通過script標簽順序去管理依賴關系。
RequireJS是一個Javascript 文件和模塊框架,它可以幫我們去管理js代碼(我的理解)。
深入學習,我們便會被迫接受一系列的名詞:data-main、require、define、baseUrl、paths、shims、deps。。。等等;
總之,很多文章都在向我們推銷一些自己都說不明白的名詞和概念。
簡單點,現在我們要做一個簡單的需求,用RequireJS管理我們的js代碼,還要能使用jquery!
1.構建一個web工程,跑起來!
裡面文件如圖:
這裡面有好多坑,所以我把文件都放在文件根目錄,先排除掉這些小問題!
其中jquery.js和require.js是需要去網站下載的,請自行百度。
2. 在index.jsp中添加script標簽
可以在<body>裡添加一個標簽 <p>RequireJS異步加載測試</p>
3. 補充main.js文件
require.config({ paths: { jquery: 'jquery-2.1.1' } }); require(['jquery'], function($) { alert($().jquery); });
4.跑起來~
你會看到彈出框,頁面已經渲染顯示了 “RequireJS異步加載測試” 。
小結:
a. RequireJS由James Burke創建,他也是AMD規范的創始人。它是一個工具庫,用於客戶端的模塊管理。
從本例體現出的:
1. 彈出alert的時候頁面同時也被渲染,體現了異步加載的功能,傳統放在head中的寫法會造成阻塞,只有點擊確定後才能渲染頁面。
2. 頁面只需要引入一個require.js,不需要再引入其他繁多復雜的js代碼,剩下的工作交給RequireJS框架來做!
b. 學習之前先了解AMD規范,AMD通過define來定義模塊,基本模式:define("id",[deps1,deps2,...],callback);
為什麼本例沒有define就可以跑起來? 因為jquery提供了對AMD的支持。path對象即是用來引入各種模塊的。
普通的js代碼可否被RequireJS管理? 可以,使用shims來加載這些資源!
c. 總結以後的編碼思路:
Xx.jsp Xx.js(同main.js) 通過 require.config 引入各種js模塊(資源);require加載所需模塊,並在回調函數中傳入對應變量,以方便在其中直接調用各模塊中的函數和變量。
d. 自己實現: 頁面加一個按鈕;在main.js中加入juqery的click監聽事件,測試是否監聽成功!
e. 遺留問題:路徑問題,肯定不能在根目錄,不過這都不是事兒!
本文就是關於RequireJS入門一之實現第一個例子的全部敘述,希望對大家有所幫助。