定義的是一個簡單的鍵值對數(shù)據(jù)模塊ž

//Inside file my/shirt.js:  
 define({  
    color: "black",  
    size: "unisize“  
 });  
 

Definition Functions

定義的模塊包裝在一個function內(nèi) 

define(function () {  
//Do setup work here  
    return {  
       color: "black",  
       size: "unisize“  
 }  
 }); 

Definition Functions with Dependencies

定義一個有模塊依賴關系的模塊

//module in the same directory as shirt.js  
define(["./cart", "./inventory"], function(cart, inventory) {  
        //return an object to define the "my/shirt" module.  
        return {  
             color: "blue",  
             size: "large",  
             addToCart: function() {  
                 inventory.decrement(this);  
                 cart.add(this);  
             }  
        }  
} );  

那么，執(zhí)行了這個模塊的初始化會依次的加載順序為

my/cart.js  
my/inventory.js  
my/shirt.js 

Define a Module as a Function

定義的模塊為返回一個function

define(["my/cart", "my/inventory"], function(cart, inventory) {  
    //return a function to define "foo/title".  
   //It gets or sets the window title.  
   return function(title) {  
      return title ? (window.title = title) : inventory.storeName + ' ' + cart.name;  
   }  
} ); 

Define a Module with Simplified CommonJS Wrapper

定義一個簡單的commonjs包裝

define(function(require, exports, module) {  
       var a = require('a'),  
             b = require('b');  
//Return the module value  
       return function () {};  
 } );  
 

這個定義就可以把模塊內(nèi)部的任何變量暴露給exports來作為模塊的屬性提供。比如：

內(nèi)有個定義

var name=‘nickli’; 

這個就僅僅是模塊的內(nèi)部私有變量，但是要想作為這個模塊的屬性提供就可以

Exports.name=“nickli”;  

然后在require這個模塊的時候 就可以訪問到name這個屬性了

最后一點，也是比較重要的一點

Define a Module with a Name  給一個模塊設置一個名字，這個在多個模塊壓縮成一個文件的時候是必要的，因為否則模塊系統(tǒng)就找不到你壓縮的文件里面哪個模塊是哪個。而且這個name的定義 在你的開發(fā)環(huán)境中也要符合模塊文件的路徑，比如你的m模塊在a文件夾下，那么你的name 的定義也要是 a/m 

//Explicitly defines the "foo/title" module:define("foo/title",  
        ["my/cart", "my/inventory"],  
        function(cart, inventory) {  
            //Define foo/title object in here.  
       }  
); 

模塊化后的加載

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

Require.js加載完畢后會自動去 拉取scripts/main.js

//Inside scripts/main.js  
require(["some/module", "a.js", "b.js"], function(someModule) { //... });  

會依次加載some/module.js   a.js b.js三個文件

模塊化后的新問題

目前nodejs的模塊系統(tǒng)是嚴格遵循的commonjs  規(guī)范實施的，但是要注意到，nodejs是運行在server端的，然而瀏覽器端編程和server的最大不同是server的所有模塊文件都是在server和主文件是一塊的。而瀏覽器要面對的是大量的模塊文件帶來的大量http請求的問題， 嗯， 這個問題在瀏覽器端是致命的。。。。。。。

不過我們有combo   動態(tài)文件壓縮技術，這里不詳述,前面已經(jīng)有一隨筆 講述 require來實現(xiàn)combo的支持

關于js的模塊化開發(fā)和amd相關資料，在http://www.cnblogs.com/snandy/里有不少更加詳細的資料。

原文鏈接：http://www.cnblogs.com/litao229/archive/2012/04/10/2440274.html