這篇文章主要介紹了require.js深入了解,require.js特性介紹,本文講解了require.js和CommonJS的兼容、CDN回退、循環依賴、BaseUrl、JSONP等內容,需要的朋友可以參考下
			現在,Require.js是我最喜歡的Javascript編程方式。它可以使代碼化整為零,并易于管理。而Require.js Optimizer能幫助我們將一個較大的應用分散成多個較小的應用,并通過依賴串聯起來,最后在編譯打包時合并起來。這些原因促使我們使用require.js。
			那么,讓我們來看看require.js有什么牛逼的特性吧!
			與CommonJS兼容
			AMD (異步模塊定義規范) 出現自CommonJS工作組。CommonJS旨在創造Javascript的生態系統。 CommonJS的一個重要部分是transport/c, 即AMD的前身,而require.js則是該規范的一個實現。
			CommonJS模塊和AMD模塊的語法差異,主要由于AMD需要支持瀏覽器的異步特性。而CommonJS模塊則需要同步進行,例如:
			復制代碼代碼如下:
			
		var someModule = require( "someModule" );
		var anotherModule = require( "anotherModule" );    
		 
		exports.asplode = function() {
		    someModule.doTehAwesome();
		    anotherModule.doMoarAwesome();
		};
		AMD模塊是異步加載模塊的,故而模塊定義需要一個數組作為第一個參數,而模塊加載完畢后回調的函數作為第二個參數傳入。	
		復制代碼代碼如下:
			
		define( [ "someModule"],  function( someModule ) {   
		    return {
		        asplode: function() {
		            someModule.doTehAwesome();
		 
		            // 這將會異步執行
		            require( [ "anotherModule" ], function( anotherModule ) {
		                anotherModule.doMoarAwesome();
		            });
		        }
		    };
		});
		然而,在require.js中AMD亦能兼容CommonJS語法。通過AMD的define函數包裝CommonJS模塊,你也可以再AMD中擁有一個CommonJS模塊,例如:	
		復制代碼代碼如下:
			
		define(function( require, exports, module )
		    var someModule = require( "someModule" );
		    var anotherModule = require( "anotherModule" );    
		 
		    someModule.doTehAwesome();
		    anotherModule.doMoarAwesome();
		 
		    exports.asplode = function() {
		        someModule.doTehAwesome();
		        anotherModule.doMoarAwesome();
		    };
		});
			 
			實際上,require.js通過函數.toString解釋回調函數的模塊內容,找到其正確的依賴,將其變成一個通常的AMD模塊。需要注意,如果你使用這種方式編寫模塊,可能會發生與其他AMD加載器不兼容的情況,因為這違背了AMD規范,但它能很好的理解這種格式的寫法。
			這里發生了什么,require.js實際上做了function.toString的回調函數解析模塊的內容,找到正確的依賴,就像它,如果它是一個正常的AMD模塊。重要的是要注意,如果您選擇這樣寫模塊,他們將最有可能不兼容與其他AMD模塊裝載機,因為這違背了AMD規范,但它是很好的了解這個格式存在!
			CDN回退
			另一個隱藏的require.js瑰寶是,其支持當CDN加載不正確時,回退加載本地相應的庫。我們可以通過require.config達到這個目的:
			復制代碼代碼如下:
			
		requirejs.config({
		    paths: {
		        jquery: [
		            '//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js',
		            'lib/jquery'
		        ]
		    }
		});
				 
			沒有依賴?對象字面量?沒問題!
			當你寫一個沒有任何依賴的模塊,并且只是返回一個對象包含一些功能函數,那么我們可以使用一種簡單的語法:
			復制代碼代碼如下:
			
		define({
		    forceChoke: function() {
		 
		    },
		    forceLighting: function() {
		 
		    },
		    forceRun: function() {
		 
		    }    
		});
		很簡單,也很有用,如果該模塊僅僅是功能的集合,或者只是一個數據包。	
		 
			 循環依賴
			在一些情況中,我們可能需要模塊moduleA和moduleA中的函數需要依賴一些應用。這就是循環依賴。
			復制代碼代碼如下:
			
		// js/app/moduleA.js
		define( [ "require", "app/app"],
		    function( require, app ) {
		        return {
		            foo: function( title ) {
		                var app = require( "app/app" );
		                return app.something();
		            }
		        }
		    }
		);
		得到模塊的地址	
		 
			如果你需要得到模塊的地址,你可以這么做……
			復制代碼代碼如下:
			
		var path = require.toUrl("./style.css");
			 
			BaseUrl
			通常,在進行的單元測試時,你的源代碼可能放在類似src的文件夾里,同時,可能你的測試放在類似tests的文件夾里。這可能比較難讓測試配置正確。
			比如我們在tests文件夾有一個index.html文件,并需要本地加載tests/spec/*.js。并假設,所有源代碼在為src/js/*.js,并有一個main.js在該文件夾。
			index.html中,不在加載require.js時設置data-main。
			復制代碼代碼如下:
			
		<script src="src/js/vendor/require.js"></script>
		<script>
		require( [ "../src/js/main.js" ], function() {
		    require.config({
		        baseUrl: "../src/js/"
		    });
		 
		    require([ 
		        "./spec/test.spec.js",
		        "./spec/moar.spec.js"
		    ], function() {
		        // start your test framework
		    });
		});
		</script>
		你可以發現main.js被加載。然而由于沒有設置data-main,所欲我們需要制定一個baseUrl。而當使用data-main時,baseUrl會根據其設定的文件來自動設置。	
		 
			在這里,你可以看到main.js被載入。然而,由于它沒有加載數據主要腳本標記,那么您必須指定一個base即可。當數據主要是用于baseURL時從主文件中的位置推斷。通過自定義baseUrl我們可以很容易將測試代碼和應用代碼分開存放。
			JSONP
			我們可以這樣處理JSONP終端:
			復制代碼代碼如下:
			
		require( [ 
		    "http://someapi.com/foo?callback=define"
		], function (data) {
		    console.log(data);
		});
		對于非AMD庫,使用shim來解決	
		 
			在很多請款下,我們需要使用非AMD庫。例如Backbone和Underscore并未適應AMD規范。而jQuery實際上只是將自己定義成一個名為jQuery全局變量,所以對于jQuery什么都不用做。
			幸運的是,我們可以使用shim配置來解決這一問題。
			復制代碼代碼如下:
			
		require.config({
		    paths: {
		        "backbone": "vendor/backbone",
		        "underscore": "vendor/underscore"
		    },
		    shim: {
		        "backbone": {
		            deps: [ "underscore" ],
		            exports: "Backbone"
		        },
		        "underscore": {
		            exports: "_"
		        }
		    }
		});