YUI模块配置

口碑网F2E 正邪 - 2011.06.26

模块配置信息

YUI({modules:{
		'custom-module-name':{
			type: 'js',
			path: 'custom-module-name.js',
			fullpath:'custom-module-name.js',
			requires:[],
			optional:[],
			supersedes:[],
			rollup: 4,
			submodules:{
			},
			plugins:{
			},
			after:[],
			lang:[]
			condition: {
				test: function(){
					return true;
				},
				'trigger':'xxx',
				'when': 'before' & 'after' & 'instead'
			},
			
		}
	},
	loadOptional: false

}).use('custom-module-name', function(Y){});

1

requires选项

YUI({
	modules:{
		'mod-a':{
			fullpath:'mod-a.js',
			requires:['mod-b']
		},
		'mod-b':{
			fullpath:'mod-b.js'
		}
	}
}).use('mod-a', function(Y){

	//mod-b loaded
	//mod-a loaded

});
2

optional选项

YUI({
	modules:{
		'mod-a':{
			fullpath:'mod-a.js',
			optional: ['mod-b']
		},
		'mod-b':{
			fullpath:'mod-b.js'
		}
	},
	loadOptional: true

}).use('mod-a',  function(Y){

	//mod-b loaded
	//mod-a loaded

});

3

supersedes选项

YUI({modules:{
	'mod-a':{
		fullpath:'mod-a.js',
		requires:['jsonp'],
		supersedes: ['jsonp']
	},
	'mod-b':{
		fullpath:'mod-b.js'
	}
}}).use( 'mod-a', 'mod-b', function(Y){
	Y.log(Y.jsonp); //undefined 

	YUI().use('jsonp', function(Y){
		Y.log(Y.jsonp); //undefined 
	});

	YUI({force: ['jsonp']}).use('jsonp', function(Y){
		Y.log(Y.jsonp); //undefined 
	});
});

YUI().use('jsonp', function(Y){
	Y.log(Y.jsonp); //undefined 
});
YUI({force: ['jsonp']}).use('jsonp', function(Y){
	Y.log(Y.jsonp); //function(){} 
});

4

submodules选项

YUI({
	modules:{
		'mod-a':{
			fullpath:'mod-a.js',
			submodules:{
				'mod-a-sub1':{
					fullpath: 'mod-a-sub1.js'
				},
				'mod-a-sub2':{
					fullpath: 'mod-a-sub2.js'
				}
			}
		}
	}

}).use('mod-a-sub1',  function(Y){
	
	//mod-a-sub1 loaded

});

5

plugins选项

YUI({
	modules:{
		'mod-a':{
			fullpath:'mod-a.js',
			plugins:{
				'mod-a-plugin1':{
					fullpath: 'mod-a-plugin1.js'
				},
				'mod-a-plugin2':{
					fullpath: 'mod-a-plugin2.js'
				}
			}
		}
	}

}).use('mod-a-plugin1',  function(Y){
	
	//mod-a-plugin1 loaded

});

6

先use先加载

YUI({
	modules:{
		'mod-a':{
			fullpath:'mod-a.js'
		},
		'mod-b':{
			fullpath:'mod-b.js'
		}
	}

}).use('mod-a', 'mod-b', function(Y){

	//mod-a loaded
	//mod-b loaded

});

7

after选项

YUI({
	modules:{
		'mod-a':{
			fullpath:'mod-a.js',
			after:['mod-b']
		},
		'mod-b':{
			fullpath:'mod-b.js'
		},
	}

}).use('mod-a', 'mod-b',  function(Y){
	
	//mod-b loaded
	//mod-a loaded

});

8

skinnable选项

skin: { defaultSkin: 'sam',
       base: 'assets/skins/',
       path: 'skin.css',
       after: ['cssreset',
                  'cssfonts',
                  'cssgrids',
                  'cssbase',
                  'cssreset-context',
                  'cssfonts-context']},
YUI({modules:{
		'mod-a':{
			fullpath:'mod-a.js',
			skinnable: true
		}
	}

}).use('mod-a', function(Y){
	
	//mod-a loaded
	// 自动从BASE+mod-a/assets/skins/sam/mod-a.css加载CSS

});

9

lang选项

YUI({
	lang: 'ko-KR,en-GB,zh-Hant-TW',
	modules:{
		'mod-a':{
			fullpath:'mod-a.js',
			 "lang": [
					"en-GB"
                ],
		}
	}

}).use('mod-a', function(Y){
	
	//mod-a loaded
	//自动从BASE+mod-a/lang/mod-a_en-GB.js加载js
});

10

condition选项

YUI({
	modules:{
		'mod-a':{
			fullpath:'mod-a.js',
			condition:{
				test: function(){
					return true;
				},
				'trigger': 'mod-b',
				'when': 'instead'
				//'when': 'before' //mod-a + mod-b
				//'when': 'after' //mod-b + mod-a 默认选项
			}
		},
		'mod-b':{
			fullpath:'mod-b.js'
		},
	}

}).use('mod-b',  function(Y){
	
	//mod-a loaded

});

11

Q&A

Thank You!

12