RequireJs學習筆記（二）

config：baseUrl  +  path+shim 讓依賴更簡潔、靈活

語法：require.config({ baseUrl: '', paths: {  }，shim：{} });

從上面的demo中,有a.js，b.js，c.js三個JavaScript文件，在config中我就可以這樣聲明瞭：

require.config({
	baseUrl:'./'
	
});

require(['assets/js/jquery-3.1.1.min','assets/js/a','assets/js/b','assets/js/c'],function(jquery,a,b,c){

});

從代碼中我們可以看出代碼似乎有點累贅，且不利於維護。比方,以後我的文件路徑js下面再加多一層alph，那我就要逐個修改。爲了易於維護，我將代碼進行了一下修改：

require.config({
	baseUrl:'./',
	paths:{
		common:'assets/js'
	}
	
});

require(['common/jquery-3.1.1.min','common/a','common/b','common/c'],function(jquery,a,b,c){
	
});

下面這種方式更爲優雅：（假設a，b，c 三個文件皆遵循AMD）

require.config({
	baseUrl:'./assets/js',
	paths:{
		a:'a',
		b:'b',
		c:'c'
	}
	
});

require(['a','b','c'],function(a,b,c){
	
});

在config中還有一個重要的參數shim:deps[]依賴數組名稱，exports{}模塊名稱；

require.config({
	baseUrl:'./',
	paths:{
		common:'assets/js',
		jquery:'assets/js/jquery-3.1.1.min',
		'jquery.validate':'assets/js/jquery.validate'
	},
	shim:{
		'jquery.validate':['jquery']
	}
	
	
});

require(['jquery','common/a','jquery.validate'],function(jquery,a,validate){
	
});

define：定義requirejs模塊

語法：define(name，[] , callback)

define([], function(){})中第一個參數是依賴的名稱數組，第二個參數是函數，在模塊的所有依賴加載完畢後，該函數會被調用來定義該模塊。依賴關係會以參數的形式注入到該函數上，參數列表與依賴名稱列表一一對應。

config.js配置

require.config({
	baseUrl:'./',
	paths:{
		common:'assets/js',
		jquery:'assets/js/jquery-3.1.1.min',
		'jquery.validate':'assets/js/jquery.validate'
	},
	shim:{
		'jquery.validate':['jquery']

	}
	
	
});

require(['jquery','common/a','jquery.validate'],function(jquery,a,validate){
	
});

a.js

//第一種寫法 
//define(['require','common/b','common/c'],function(require){
//	
//	var b = require('common/b');
//	var c = require('common/c');
//});
//第二種寫法
//define(['require','common/b','common/c'], function(require){  
//  var b = arguments[1];
//  var c = arguments[2];
//});

關於加載依賴jquery的附件：

//第一種寫法
define(['require', 'jquery.validate'], function(require, validate){
    var jquery = require('jquery');
})

//第二種寫法
define(['jquery', 'jquery.validate'], function(jquery, validate){
})

require：加載用於讀取依賴模塊

語法：require（[name , name2],callback）

require([], function(){
    // do something
});