RequireJS入門實現第一個範例_javascript技巧

為什麼要學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標籤

 

可以在

裡加入一個標籤  

RequireJS非同步載入測試

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入門一之實現第一個例子的完整敘述，希望對大家有幫助。