DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> RequireJS入門一之實現第一個例子
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標簽

 

可以在<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入門一之實現第一個例子的全部敘述,希望對大家有所幫助。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved