RequireJS入門之一——實現第一個例子

時間 2019-11-11

標籤 requirejs 入門之一實現第一個例子欄目 JavaScript 简体版

原文原文鏈接

爲何學習RequireJS？jquery

像我這種菜鳥，會提到海量文章裏提到的AMD、JS模塊化編程、異步... ... 等等git

RequireJS是一個Javascript 文件和模塊框架，它能夠幫咱們去管理js代碼（個人理解）。github

深刻學習，咱們便會被迫接受一系列的名詞：data-main、require、define、baseUrl、paths、shims、deps。。。等等；web

總之，不少文章都在向咱們推銷一些本身都說不明白的名詞和概念。編程

簡單點，如今咱們要作一個簡單的需求，用RequireJS管理咱們的js代碼，還要能使用jquery！api

1.構建一個web工程，跑起來！裏面文件如圖：框架

這裏面有好多坑，因此我把文件都放在文件根目錄，先排除掉這些小問題！異步

其中jquery.js和require.js是須要去網站下載的，請自行百度。jsp

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. 遺留問題：路徑問題，確定不能在根目錄，不過這都不是事兒！

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。