首頁 > web前端 > js教程 > requireJS使用指南_其它

requireJS使用指南_其它

WBOY
發布: 2016-05-16 15:03:36
原創
1343 人瀏覽過

專案中大都使用模組化開發,requireJS作為AMD模組開發的典範,所以有必要學習下。透過一步步利用requireJS編寫demo,從而學習requireJS的一個整體開發流程以及自我使用requireJS的一些感受。

AMD:一種基於模組的非同步載入JavaScript程式碼的機制,它推薦開發人員將JavaScript程式碼封裝進一個個模組,對全域物件的依賴變成了對其他模組的依賴,無須再聲明一大堆的全域變數。透過延遲和按需載入來解決各個模組的依賴關係。模組化的JavaScript程式碼好處很明顯,各個功能組件的鬆散耦合性可以極大的提升程式碼的復用性、可維護性。這種非阻塞式的並發式快速載入JavaScript程式碼,讓Web頁面上其他不依賴JavaScript程式碼的UI元素,如圖片、CSS以及其他DOM節點得以先載入完畢,Web頁面載入速度更快,使用者也得到更好的體驗。

1、  下載requieJS

在用requieJS模組化開發之前,我們需要準備一些東西。那一定就是下載require.js檔咯,哈哈哈,因為是基於它開發嘛。

2、  建立一個HTML檔

建立一個HTML檔案後,導入requireJS肯定是使用<script>標籤的,這毫無疑問。然後在這個標籤中有data-main屬性,它的作用呢是作為一個出入口,就是說在載入requireJS後,從data-main這個屬性進入。 </script>

比如下面這樣:

 <!DOCTYPE html>
  <head>
    <title>require</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
  </head>
  <body>
    <!--这是requireJS,data-main是作为入口模块,在这里就是js/main-->
    <script data-main="js/main" src="js/require.js"></script>
  </body>
</html>
登入後複製

當我透過載入js/require.js後,然後去執行js/main的js檔案。 main它也是個js文件,我們可以將它的.js後綴省略掉,requireJS會加上。

3、  data-main

當程式執行後,透過data-main進入main.js,去執行main.js。那main.js裡是些什麼東東呢?

請看代碼:

/*
  require.config执行baseUrl为'js',
  baseUrl指的模块文件的根目录,可以是绝对路径或相对路径
*/
require.config({
  baseUrl: 'js',
  paths: {
    jquery: 'jquery-1.8.2.min'
  }
});
/*
  这里通过require,来引入monkey.js,
  然后通过后面的匿名函数给他们分配参数,如这里的
  monkey-->mk
*/
require(['monkey'],function(mk) {
  mk.init();  
});
登入後複製

從上面程式碼中,可以看見main.js中包含require.config和require兩個模組。

require.config的作用就是配置requireJS的一些參數,然後公開引用。

例如,上面的baseUrl,它的作用就是,以它為基礎路徑,在這個路徑之下,找出檔案。我是將所有.js檔案都放在js資料夾下的。所以,配置這個屬性後,以後的檔案都是在js這個路徑下找內容了。

如下:

require(['monkey'], function(monkey){
  monkey.init();
});
登入後複製

它在引用monkey時,就是引用的monkey,而不是js/monkey。

paths的作用呢?就是將一些常用的js文件,換成通用的名字。例如jquery-1.8.2.min.js,我們不可能每次呼叫它時,都寫這一啪啦吧,所以為了方便,就將jquery取代jquery-1.8.2.min.js咯,以後我們就可以直接使用jquery了,快速又方便。

好了,require.config基本上混了個臉熟,一句話,它的作用就是配置requireJS嘛。

那require呢?

require的作用就是執行。例如這裡我只需要monkey.js去執行,所以我就導入了monkey,然後透過mk參數,得到monkey執行後的回傳值。如果有回傳值,然後我們就可以對mk做對應的處理了。

咦,那monkey裡面是什麼?

我們來看看:

/*
  define的参数为匿名函数,该匿名函数返回一个对象
*/
define(['jquery'],function($){
  var init = function(){
    console.log($.browser);
  };
  return {
    init: init
  };
});
登入後複製

define!它的作用是,定義一個js模組,供其他模組或require使用。它引用其他js的模組的方法和require差不多,都是將需要的js檔案引入,然後參數一一對應。大家需要要注意的是,define裡定義的方法或者變量,其他模組是訪問不到的,所以,你如果想其他模組也能訪問,就將相應的方法拋出去(return)對像或者函數都可以。在這裡,我return的是一個對象,提供init供其他模組呼叫。

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板