RequireJS－模塊化開發框架

1、equireJS 和 SeaJS 都是很不錯的模塊加載器，二者區別以下

　　1. 二者定位有差別。RequireJS 想成爲瀏覽器端的模塊加載器，同時也想成爲 Rhino / Node 等環境的模塊加載器。SeaJS 則專一於 Web 瀏覽器端，同時經過 Node 擴展的方式能夠很方便跑在 Node 服務器端

　　2. 二者遵循的標準有差別。RequireJS 遵循的是 AMD（異步模塊定義）規範，SeaJS 遵循的是 CMD

 

RequireJS會讓你以不一樣於往常的方式去寫JavaScript。你將再也不使用script標籤在HTML中引入JS文件，以及不用經過script標籤順序去管理依賴關係。也不會有阻塞（blocking）的狀況發生

 

2、RequireJS的模塊入口

　　script標籤上一個自定義屬性：data-main="main"，等號右邊的main指的main.js。這個main指主模塊或入口模塊。

main.js中就兩個函數調用require.config和require。

require.config用來配置一些參數，它將影響到requirejs庫的一些行爲。

require.config的參數是一個JS對象，經常使用的配置有baseUrl，paths等。

 

 <script data-main="js/main" src="require.js.js"></script> 

 

 main.js

1 require.config({
2     paths: {
3         jquery: 'jquery-1.7.2'
4     }
5 });
6 
7 require(['jquery'], function($) {
8     alert($().jquery);
9 });

 

paths參數，使用模塊名「jquery」，其實際文件路徑jquery-1.7.2.js（後綴.js能夠省略）。

咱們知道jQuery從1.7後開始支持AMD規範，即若是jQuery做爲一個AMD模塊運行時，它的模塊名是「jquery」。注意「jquery」是固定的，不能寫「jQuery」或其它。

注：若是文件名「jquery-1.7.2.js」改成「jquery.js」就沒必要配置paths參數了。

 

 

3、定義模塊和讀取模塊

一、定義模塊

selector.js

1 define(function() { 
2     function query(selector,context) { 
3         alert(selector, context); 
4     } 
5     return query;
6  });     

 

二、讀取模塊

參數1爲獲取的js文件能夠不寫擴展名，第二個參數要執行的事

1 require(['selector'], function(query) {
2     var els = query('.wrapper');
3     console.log(els)
4 });

 

 

4、模塊的依賴

<script data-main="main.js" src="require.js"></script>

主模塊main

 1 require.config({
 2     baseUrl: 'js',          // baseUrl指的模塊文件的根目錄，能夠是絕對路徑或相對路徑。這裏用的是相對路徑。
 3     parth: {
 4         $: "http://public.zgzcw.com/shared/jquery-1.7.1.min.js?v=20140717123"
 5     }
 6 });
 7 
 8 // 引用模塊
 9 require(['lab', "event"], function(query, e) {
10     var els = query('#tagName');
11     e.bind();
12     e.unbind();
13 });

 

lab.js

 1 // 定義一個模塊
 2 define(function(){
 3 
 4     function tag(id){
 5         $(id + " li").click(function(){
 6             if($(this).hasClass("active")){
 7                 $(this).removeClass("active");
 8             }
 9             else{
10                 $(this).addClass("active");
11             }
12         })
13     }
14 
15     return tag;
16 })

 

event.js

 1 define(["lab"], function(lab){  // 引用lab.js
 2 
 3     var bind = function(){
 4 
 5     }
 6 
 7     var unbind = function(){
 8         
 9     }
10     
11     return {
12         bind: bind,
13         unbind: unbind
14     }
15 })